悦跑圈和咕咚:div+css布局实例:常用图文混排（一）--腾讯图文 - 蜗爱CSS

来源：百度文库编辑：中财网时间：2024/04/30 01:14:18

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

日期:2009-09-28作者:woniu

字体大小: 小中大

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

XHTML

Example Source Code

                                蜗爱css-css初学者

css初学者-图文混排（一）div

蜗爱css新手学习css div+css教

经典图文混排立标div+css教程

css基础css布局知识 div+css

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

}

运行查看：

HTML代码

<!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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Div+CSS布局采用DIV+CSS布局的好处采用DIV+CSS布局的好处怎么使用DIV+CSS布局网页 Css高手进,关于<div>页面布局!~ Div布局? 请问那有div+css页面的实例 CSS+DIV? 图文混排素材 dreamweaver 图文混排用DIV+CSS布局网站有没有好用的工具？制作网页中，什么时候应该用DIV+CSS布局呢？有例子么？请问dx学习css的好论坛或网站，学习新一代网页布局css+div的网站和论坛 coreldraw怎样图文混排？ msn无法图文混排 div+css怎样入门？关于css定义div div+css 问题？关于cms div+css DIV+CSS的问题? 请问本人用DIV+CSS布局的，为什么在IE和傲游中显示正常，在火狐中就乱了 div布局的小问题！有没有图文混排的样子?? CorelDraw12图文混排怎么弄?