(Consulta) Cuadros de filehippo.com

[opzina]

Hola., necesitaria saber cmo se hacen los recuadros dnd tiene los links cada seccion, ejemplo: browsers and plugins etc...ya q es todo css excepto las viñetas..

pagina: http://www.filehippo.com

saludos.!

[benz0]

Código para dos cuadrados

Código:

<div class="box-three">
<div class="box">
	<h2 class="s1"><a href="/software/browsers/">Browsers and Plugins</a></h2>
	<ul>
		<li><img src="http://i.filehippo.com/img/new.gif" alt="New"/><a href="/download_firefox/">Firefox 3.0 RC2</a></li>
		<li><a href="/download_flashplayer_ie/">Flash Player 10.0.1.218 Beta (IE)</a></li>
		<li><a href="/download_google_desktop/">Google Desktop 5.7.805.16405</a></li>
		<li><a href="/download_google_toolbar/">Google Toolbar 5.0.1112.7760 (IE) Beta</a></li>
		<li><a href="/download_internet_explorer/">Internet Explorer 8.0 Beta 1</a></li>
		<li><a href="/download_maxthon/">Maxthon 2.1.0.2082</a></li>
		<li><a href="/download_opera/">Opera 9.50 Beta 2</a></li>
	</ul>
	<div class="more"><a href="/software/browsers/">View more &raquo;</a></div>
</div>
<div class="box">
	<h2 class="s1"><a href="/software/browsers/">Browsers and Plugins</a></h2>
	<ul>
		<li><img src="http://i.filehippo.com/img/new.gif" alt="New"/><a href="/download_firefox/">Firefox 3.0 RC2</a></li>
		<li><a href="/download_flashplayer_ie/">Flash Player 10.0.1.218 Beta (IE)</a></li>
		<li><a href="/download_google_desktop/">Google Desktop 5.7.805.16405</a></li>
		<li><a href="/download_google_toolbar/">Google Toolbar 5.0.1112.7760 (IE) Beta</a></li>
		<li><a href="/download_internet_explorer/">Internet Explorer 8.0 Beta 1</a></li>
		<li><a href="/download_maxthon/">Maxthon 2.1.0.2082</a></li>
		<li><a href="/download_opera/">Opera 9.50 Beta 2</a></li>
	</ul>
	<div class="more"><a href="/software/browsers/">View more &raquo;</a></div>
</div>
</div>

Y el estilo :

Código:

.box-three {
	float: left;
	width: 260px;
	margin: 0;
	padding: 0;
}
.box {
	font-size:12px;
	margin:0 5px 10px 5px;
	padding:0;
	background: #fff;
	border-right: 1px solid #e8e6df;
	border-bottom: 1px solid #e8e6df;
	border-left: 1px solid #e8e6df;
}
.box h2.s0{
	background-color:#8ec6ee;
	border-top:3px solid #5e96be;
}
.box h2.s1{
	background-color:#E7D769;
	border-top:3px solid #b7a739;
}
.box h2.s2{
	background-color:#EC9486;
	border-top:3px solid #bc5446;
}
.box h2.s3{
	background-color:#C2D7B0;
	border-top:3px solid #92a780;
}
.box ul {
	margin:0;
	padding:4px 0;
}
.box ul li {
	list-style:none;
	padding: 2px 0px 2px 22px;
	background: url(http://i.filehippo.com/img/bul0.png) no-repeat;
	background-position: 8px 6px;
}
.box ol {
	margin:0;
	padding:4px 0;
}
.box ol li {
	list-style: none;
	padding: 2px 0px 2px 8px;
}

body,td,input,select,textarea{
	font-family:Arial,Helvetica,sans-serif;
	font-size:10pt;
}

/* LINKS */

a img{border:none;}
a:link {
	color: #025eb3;
	text-decoration:none;
}
a:visited {
	color: #025eb3;
	text-decoration:none;
}
a:hover {
	color: #025eb3;
	text-decoration:underline;
}
a.black{
	color:#000;
	text-decoration:underline;
}

/* TITLES */

h1 {
	font-size:1.5em;
	line-height:22px;
	color: #33302e;
	margin: 0;
	padding:10px 0 2px 5px;
	font-weight: bold;
	letter-spacing: -0.4px;
	border:0;
}
h2 {
	font-size: 1.1em;
	line-height: 8px;
	color: #33302e;
	margin: 0;
	padding: 8px 8px;
	font-weight:normal;
	background:#e8e6df;
	border-top:3px solid #d6d3cd;
}
h2 a:link {
	color: #33302e;
	text-decoration: none;
}
h2 a:visited {
	color: #33302e;
	text-decoration: none;
}
h2 a:hover {
	color: #33302e;
	text-decoration:underline;
}

h3 {
	font-size: 15px;
	margin: 0;
	color: #025eb3;
	font-weight: bold;
}
a.underline{
	text-decoration:underline;
}
.more {
	text-align:right;
	margin:0;
	padding: 3px 10px 3px 22px;
	background-color:#ecf0f3;
	border-top: 1px solid #e8e6df;
}

Saludos.