DivCSS布局实例：很实用的图文混排CSS列表-富有语义-CSS布局实例，如何创建网站，如何建网站，怎么创建网站，怎么建网站，怎样创建网站，怎样建网站，企业建站，企业建网站

　CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。

　　今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。

列表的效果如图所示：

　　最顶部是栏目名称“模板无忧MB5U.com”与栏目导航“CSS酷站欣赏DivCSS教程CSS模板下载”。栏目名称用标题元素Hx来表示，栏目导航可以用ulli的无序列表。
　　下部的三个链接区域形式基本雷同，左侧是图片链接，右侧是文章列表元素。将左侧的图片与文字看成是一个段落，用p标签来表示，右侧的文章列表用ulli的无序列表。

有了上面的分析开始下面的HTML编码：

ExampleSourceCode[www.mb5u.com]
<divid=list_mb5u_com>
<divclass=list_title></div>
<divclass=list_unitid=l_showcase></div>
<divclass=list_unitid=l_article></div>
<divclass=list_unitid=l_templates></div>
</div>
　　将所有元素置入id为list_mb5u_com的层中，以便于进行整体布局的控制。在其内部建立四个层，它们分别是：list_title、l_showcase、l_article、l_templates。对于下部的三个内容层，应用同样的class，为list_unit。

下面开始具体深入的编写HTML代码：

ExampleSourceCode[www.mb5u.com]
<divid=list_mb5u_com>
<divclass=list_title>
<h3><ahref=http://www.mb5u.com/title=模板无忧>模板无忧MB5U.com</a></h3>
<ul>
<li><ahref=http://www.mb5u.com/css_websites_showcase/title=CSS酷站欣赏>CSS酷站欣赏</a></li>
<li><ahref=http://www.mb5u.com/default.asptitle=DivCSS教程>DivCSS教程</a></li>
<li><ahref=http://www.mb5u.com/css_template/title=CSS模板下载>CSS模板下载</a></li>
</ul>
</div>
<divclass=list_unitid=l_showcase>
<p>
<ahref=http://www.mb5u.com/css_websites_showcase/><imgsrc=1.jpgalt=CSS酷站欣赏/></a>
<span><ahref=CSS‘>http://www.mb5u.com/css_websites_showcase/>CSS酷站欣赏</a></span>
</p>
<ul>
<li>·<ahref=The‘>http://www.mb5u.com/css_websites_showcase/view.asp?id=100>TheHighlandFling</a></li>
<li>·<ahref=We‘>http://www.mb5u.com/css_websites_showcase/view.asp?id=99>WeMakeMerchWeSellMerch</a></li>
<li>·<ahref=Kingsfield‘>http://www.mb5u.com/css_websites_showcase/view.asp?id=98>KingsfieldChurchConnectingwithGodEachOtherandtheWorld</a></li>
<li>·<ahref=Adventure‘>http://www.mb5u.com/css_websites_showcase/view.asp?id=97>AdventureTrekkinginNepal</a></li>
<li>·<ahref=Web‘>http://www.mb5u.com/css_websites_showcase/view.asp?id=96>WebDesignHamilton-VO2Studio</a></li>
<li>·<ahref=We‘>http://www.mb5u.com/css_websites_showcase/view.asp?id=95>WehavebeendoingstrategicconsultingDigiwize</a></li>
<li>·<ahref=Modern‘>http://www.mb5u.com/css_websites_showcase/view.asp?id=94>ModernArboriculturalServices</a></li>
</ul>
</div>
<divclass=list_unitid=l_article>
<p>
<ahref=http://www.mb5u.com/default.asp><imgsrc=2.jpgalt=DivCSS教程/></a>
<span><ahref=Div‘>http://www.mb5u.com/default.asp>DivCSS教程</a></span>
</p>
<ul>
<li>·<ahref=CSS‘>http://www.mb5u.com/article.asp?id=668>CSS控制Table单元格强制换行与强制不换行</a></li>
<li>·<ahref=DivCSS‘>http://www.mb5u.com/article.asp?id=667>DivCSS实例：CSS菜单Flash效果用图片模拟实现</a></li>
<li>·<ahref=DivCSS‘>http://www.mb5u.com/article.asp?id=666>DivCSS布局实例用dldtdd来制作列表</a></li>
<li>·<ahref=http://www.mb5u.com/article.asp?id=660>符合web标准的嵌入Flash的方法-JS调用</a></li>
<li>·<ahref=CSS‘>http://www.mb5u.com/article.asp?id=656>CSS经验：如何治理好样式CSS？</a></li>
<li>·<ahref=DIV‘>http://www.mb5u.com/article.asp?id=655>DIVCSS实例：橙蓝互换的CSS翻页效果</a></li>
<li>·<ahref=div‘>http://www.mb5u.com/article.asp?id=650>divcss表单布局技巧及CSSForm表单设计技巧</a></li>
</ul>
</div>
<divclass=list_unitid=l_templates>
<p>
<ahref=http://www.mb5u.com/css_template/><imgsrc=3.jpgalt=CSS模板下载/></a>
<span><ahref=CSS‘>http://www.mb5u.com/css_template/>CSS模板下载</a></span>
</p>
<ul>
<li>·<ahref=CS‘>http://www.mb5u.com/css_template/view.asp?id=100>CS模板下载-ScubaHolding</a></li>
<li>·<ahref=CS‘>http://www.mb5u.com/css_template/view.asp?id=99>CS模板下载-KeepingItClean</a></li>
<li>·<ahref=CS‘>http://www.mb5u.com/css_template/view.asp?id=98>CS模板下载-CultureShock</a></li>
<li>·<ahref=CS‘>http://www.mb5u.com/css_template/view.asp?id=97>CS模板下载-SimplyCSS</a></li>
<li>·<ahref=CS‘>http://www.mb5u.com/css_template/view.asp?id=96>CS模板下载-DoctorsOffice</a></li>
<li>·<ahref=CS‘>http://www.mb5u.com/css_template/view.asp?id=95>CS模板下载-MintChocolateChip</a></li>
<li>·<ahref=CS‘>http://www.mb5u.com/css_template/view.asp?id=94>CS模板下载-AndreaLayout</a></li>
</ul>
</div>
<divclass=clear></div>
</div>
　　在list_title层，置入h3元素作为栏目名称，建立一个ul列表放置栏目导航。
　　下部的三个内容层（list_unit），分别置入段落标签p，引入链接图片与文字；建立一个ul放置文章列表。
　　在最底部，放置一个类为clear的层来清除浮动。

有了上面的基础开始下面的CSS编码：

ExampleSourceCode[www.mb5u.com]
*{margin:0;padding:0;font-size:13px;color:#000;list-style:none;}
a{color:#03c;text-decoration:none;}
a:hover{text-decoration:underline;}
#list_mb5u_com{width:418px;margin:30pxauto;border:1pxsolid#999;}
　　整体布局声明：
　　设置整个层的样式，宽度为418px，上下外边距为30px，左右为自动实现水平居中对齐。边框设置为1px的灰色实线。

ExampleSourceCode[www.mb5u.com]
.list_title{width:418px;height:32px;border-bottom:1pxsolid#999;background:#f2f9fd;overflow:hidden;}
.list_titleh3{float:left;width:160px;line-height:32px;text-indent:15px;}
.list_titleh3a{color:#c00;}
.list_titleh3a:hover{color:#03c;}
.list_titleul{float:right;width:230px;}
.list_titleulli{float:left;line-height:32px;padding:05px;}
.list_titleullia{font-size:12px;color:#333;}
　　标题区域list_title层的CSS样式定义：
　　设置list_title层宽度与高度分别是：418px、32px；下边框为1px的灰色实线；设置背景色及溢出隐藏。
　　栏目名称h3元素向左浮动；宽度160px；行距32px实现文字垂直居中对齐；文本缩进为15px。紧接着设置栏目名称h3链接的样式。
　　栏目导航ul列表的CSS样式，向右浮动；宽度为230px；设置列表项li向左浮动；行距为32px；上下内边距为0，左右内边距为5px；紧接着设置链接文字大小与颜色。

ExampleSourceCode[www.mb5u.com]
.list_unit{float:left;width:388px;margin-left:15px;padding:15px08px0;border-bottom:1pxdotted#9AC4E9;}
.list_unit{display:inline;}
　　内容层（list_unit）整体样式定义：
　　向左浮动；宽度为388px，左外边距为15px，上内边距15px、下内边距8px；设置下边框为浅蓝色的虚线。
　　设置为内联是避免IE的双边距BUG。

ExampleSourceCode[www.mb5u.com]
.list_unitp{float:left;width:164px;}
.list_unitpa{display:block;border:1pxsolid#03c;}
.list_unitpa:hover{border:1pxdashed#00f;}
.list_unitpaimg{width:160px;height:120px;margin:1px;border:0;}
.list_unitspan{display:block;}
.list_unitspana{display:block;width:164px;height:22px;border:0;line-height:22px;text-align:center;}
.list_unitspana:hover{border:0;color:#c00;}
　　内容层（list_unit）内图片链接样式定义：
　　整个段落p，向左浮动，宽度为164px。
　　设置链接为块元素；设置边框为1px蓝色实线。
　　链接悬念状态下，边框变为1px深蓝色虚线。
　　链接元素内的图片定义，宽度与高度分别是：160px、120px；外边距为1px；边框为0（消除图片链接浏览器的默认边框）。
　　设置链接文字样式，由于上面的设置是整体的，因而在下面的内容中，注重将上面的一些内容层叠掉。
　　将span转换为块元素。span内的链接同样转换为块元素，设置宽度与高度分别是164px、22px；设置边框为0（层叠先前的设置）；行距设置为22px；文字水平居中对齐。
　　span内的链接文字悬停状态下，设置边框为0；颜色设置为#c00；显示下划线。

ExampleSourceCode[www.mb5u.com]
.list_unitul{float:right;width:216px;margin-top:-5px;}
.list_unitulli{float:left;width:216px;line-height:22px;color:#039;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
　　内容层（list_unit）内文章列表样式定义：
　　整个列表ul向右浮动；宽度为216px；上外边距为-5px。
　　列表项li的CSS样式设置，向左浮动，宽度为216px；行距为22px；颜色为#039；后面的三个属性是实现“截字”效果，mb5u.com网站上有具体的介绍。（请注重此效果在FF下无效）

ExampleSourceCode[www.mb5u.com]
#l_templates{border-width:0;}
.clear{clear:both;}
　　最后的CSS设置：
　　最后一个内容层（list_unit）是没有下边框的，此层的id为l_templates。因而在此进行层叠定义，消除此层的边框即可。
　　清除浮动是必须的，否则在FF下可能会出现混乱。这是一个良好的编码实践。　　
内容来源:模板无忧(www.mb5u.com)详文参考：http://www.mb5u.com/divcssjiaocheng/13865.html