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

樱枫飘雪 2011-04-21

展开全文

图文混排是网页的重要组成部分，什么样的结构符合语义，什么样的css最简洁？刚开始接触div+css的时候，一定会为使用什么样的标签来实现想要的图文效果而苦恼。这时候，我们不妨看看国内一些大的门户网站是怎么做的。下面是一个非常常见的图文混排方式，腾讯的做法，写出来大家一起学习。

XHTML

Example Source Code

      <div class="imgArea">
        <div class="imgLAreapic"><a href="">
                                    <img src="http://www./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.">css初学者-图文混排（一）div</a></li>
                <li><a href="http://www.">蜗爱css新手学习css div+css教</a></li>
                <li><A href="http://www.">经典图文混排立标div+css教程</A></li>
                <li><a href="http://www.">css基础css布局知识 div+css</a></li>
            </ul>
        </div>
</div>

css

Example Source Code

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./works/pic/skin1v3.png) no-repeat;
    overflow:hidden;

}

运行查看：

HTML代码