<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body,h2,ul{
margin:0;padding:0;font-family:"宋体";}
li{
list-style:none;}
a{
text-decoration:none;color:cadetblue;}
img{
border:none;vertical-align:top;}
.clear{
zoom:1;}
.clear:after{
content:"";display:block;clear:both;}
.wrap{
width:500px; margin:30px 200px;padding-top:11px;background:#f4fafb;}
.head {
height:25px;
background: url(headBg.gif) no-repeat;
}
.title {
line-height: 24px;
padding-top: 1px;
font-size: 12px;
color: steelblue;
text-indent:33px;
background: url(titleBg.gif) no-repeat 6px 4px;
}
.picls {
padding-top: 16px;
}
.picls li {
padding-right: 17px;
margin: 0 8px;
float: left;
display: inline;
background: url(liBg.gif) no-repeat right 17px;
}
.picls a {
display: block;
}
.picls img {
border: 1px solid #c8c4d3;
padding: 2px;
background: #fff;
}
.picls strong {
display: block;
text-align: center;
padding-top: 4px;
font: normal 12px/22px "宋体";
}
.textls {
padding: 0 27px;
line-height: 22px;
font-size: 12px;
}
.textls li {
background: url(textListBg.gif) no-repeat 0 10px;
text-indent: 14px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="head">
<h2 class="title">一切都会好起来哒</h2>
</div>
<ul class="picls clear" >
<li>
<a href="#">
<img src="4.png" width="100" alt="Alternate Text" />
<strong>康康是谁</strong>
</a>
</li>
<li>
<a href="#">
<img src="5.png" width="105" alt="Alternate Text" />
<strong>上个勾儿</strong>
</a>
</li>
<li>
<a href="#">
<img src="6.png" width="100" alt="Alternate Text" />
<strong>夏西仁儿</strong>
</a>
</li>
</ul>
<ul class="textls">
<li> <a href="#">to be or not to be</a> </li>
<li> <a href="#">to be or not to be</a> </li>
<li> <a href="#">to be or not to be</a> </li>
</ul>
</div>
</body>
</html>