<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>图文混排一</title>
<style type="text/css">
body{ /*公共样式*/
margin:0;
padding:0 0 12px 0;
font-size:12px;
line-height:22px;
font-family:"宋体","Arial Narrow";
background:#fff;
}
div{
overflow:hidden;
}
form,ul,li,p,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
img{
border:0;
}
ul,li{
list-style-type:none;
}
a{
color:#333;text-decoration:none;
}
a:hover{
color:#bd0a01;text-decoration:underline;
}
.imgArea{
width:350px;
height:108px;
}
.imgRArea{
width:222px;
float:left;
padding-top:4px;
}
.imgLAreapic{
float:left;
width:128px;
height:90px;
padding-top:2px;
text-align:center;
}
.imgLAreapic img{
width:115px;
height:70px;
border:#dddddd 1px solid;
margin-bottom:2px;
}
.imgLAreapic a.t{
display:block;
width:117px;
height:21px;
margin:0 auto;
font-size:12px;
color:#333;
line-height:20px;
background:#f1f1f1;
}
.imgRArea li{
padding-left:12px;
width:222px;
height:22px;
line-height:22px;
font-size:14px;
background:url(http://www.woaicss.com/works/pic/skin1v3.png) no-repeat;
overflow:hidden;
}
</style>
</head>
<body>
<div class="imgArea">
<div class="imgLAreapic"><a href="">
<img src="http://www.woaicss.com/works/pic/pic1.jpg" alt="" width="115" height="70" border="0" /></a><br><a class="t" href="">蜗爱css-css初学者</a>
</div>
<div class="imgRArea">
<ul>
<li><a href="http://www.woaicss.com">css初学者-图文混排(一)div</a></li>
<li><a href="http://www.woaicss.com">蜗爱css新手学习css div+css教</a></li>
<li><A href="http://www.woaicss.com">经典图文混排立标div+css教程</A></li>
<li><a href="http://www.woaicss.com">css基础css布局知识 div+css</a></li>
</ul>
</div>
</div></body>
</html>