div+css布局实例:常用图文混排（一）--腾讯图文

      <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{                    /*公共样式*/
    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;

}