css怎么实现图文混排

发布时间：2022-03-02 15:43:29 作者：iii
来源：亿速云阅读：224

本文小编为大家详细介绍“css怎么实现图文混排”，内容详细，步骤清晰，细节处理妥当，希望这篇“css怎么实现图文混排”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

　　最顶部是栏目名称“模板无忧 ”与栏目导航“CSS酷站欣赏 DivCSS教程 CSS模板下载”。栏目名称用标题元素Hx来表示，栏目导航可以用ul li的无序列表。

　　下部的三个链接区域形式基本雷同，左侧是图片链接，右侧是文章列表元素。将左侧的图片与文字看成是一个段落，用p标签来表示，右侧的文章列表用ul li的无序列表。

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

　　?Example Source Code

　　</div>

　　?将所有元素置入id为list_mb5u_com的层中，以便于进行整体布局的控制。在其内部建立四个层，它们分别是：list_title、 l_showcase、l_article、l_templates。对于下部的三个内容层，应用同样的class，为list_unit。

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

　　<ul>

　　<li><a href="" title="CSS酷站欣赏">CSS酷站欣赏</a></li>

　　<li><a href="" title="DivCSS教程">DivCSS教程</a></li>

　　<li><a href="" title="CSS模板下载">CSS模板下载</a></li>

　　</ul>

　　</div>

　　<p>

　　<span><a href="">CSS酷站欣赏</a></span>

　　</p>

　　<ul>

　　<li>·<a href="">The Highland Fling</a></li>

　　<li>·<a href="">We Make Merch We Sell Merch</a></li>

　　<li>·<a href="">Kingsfield Church Connecting with God Each Other and the World</a></li>

　　<li>·<a href="">Adventure Trekking in Nepal</a></li>

　　<li>·<a href="">Web Design Hamilton - VO2 Studio</a></li>

　　<li>·<a href="">We have been doing strategic consulting Digiwize</a></li>

　　<li>·<a href="">Modern Arboricultural Services</a></li>

　　</ul>

　　</div>

　　<p>

　　<span><a href="">Div CSS教程</a></span>

　　</p>

　　<ul>

　　<li>·<a href="">CSS控制Table单元格强制换行与强制不换行 </a></li>

　　<li>·<a href="">DivCSS实例：CSS菜单Flash效果用图片模拟实现 </a></li>

　　<li>·<a href="">DivCSS布局实例用dl dt dd来制作列表 </a></li>

　　<li>·<a href="">符合web标准的嵌入Flash的方法-JS调用 </a></li>

　　<li>·<a href="">CSS经验：如何治理好样式CSS？ </a></li>

　　<li>·<a href="">DIV CSS实例：橙蓝互换的CSS翻页效果 </a></li>

　　<li>·<a href="">div css表单布局技巧及CSS Form表单设计技巧 </a></li>

　　</ul>

　　</div>

　　<p>

　　<span><a href="">CSS模板下载</a></span>

　　</p>

　　<ul>

　　<li>·<a href="">CS模板下载 - Scuba Holding</a></li>

　　<li>·<a href="">CS模板下载 - Keeping It Clean</a></li>

　　<li>·<a href="">CS模板下载 - Culture Shock</a></li>

　　<li>·<a href="">CS模板下载 - Simply CSS</a></li>

　　<li>·<a href="">模板下载 - Doctors Office</a></li>

　　<li>·<a href="">模板下载 - Mint Chocolate Chip</a></li>

　　<li>·<a href="">CS模板下载 - Andrea Layout</a></li>

　　</ul>

　　</div>

　　</div>

　　?在list_title层，置入h4元素作为栏目名称，建立一个ul列表放置栏目导航。

　　下部的三个内容层（list_unit），分别置入段落标签p，引入链接图片与文字；建立一个ul放置文章列表。

　　在最底部，放置一个类为clear的层来清除浮动。

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

　　?Example Source Code

　　* { 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:30px auto; border:1px solid #999;}

　　整体布局声明：

　　设置整个层的样式，宽度为418px，上下外边距为30px，左右为自动实现水平居中对齐。边框设置为1px的灰色实线。

　　?Example Source Code

　　.list_title { width:418px; height:32px; border-bottom:1px solid #999; background:#f2f9fd; overflow:hidden;}

　　.list_title h4 { float:left; width:160px; line-height:32px; text-indent:15px;}

　　.list_title h4 a { color:#c00;}

　　.list_title h4 a:hover { color:#03c;}

　　.list_title ul { float:right; width:230px;}

　　.list_title ul li { float:left; line-height:32px; padding:0 5px;}

　　.list_title ul li a { font-size:12px; color:#333;}

　　标题区域list_title层的CSS样式定义：

　　设置list_title层宽度与高度分别是：418px、32px；下边框为1px的灰色实线；设置背景色及溢出隐藏。

　　栏目名称h4元素向左浮动；宽度160px；行距32px实现文字垂直居中对齐；文本缩进为15px。紧接着设置栏目名称h4链接的样式。

　　栏目导航ul列表的CSS样式，向右浮动；宽度为230px；设置列表项li向左浮动；行距为32px；上下内边距为0，左右内边距为5px；紧接着设置链接文字大小与颜色。

　　?Example Source Code

　　.list_unit { float:left; width:388px; margin-left:15px; padding:15px 0 8px 0; border-bottom:1px dotted #9AC4E9;}

　　.list_unit { display:inline;}

　　内容层（list_unit）整体样式定义：

　　向左浮动；宽度为388px，左外边距为15px，上内边距15px、下内边距8px；设置下边框为浅蓝色的虚线。

　　设置为内联是避免IE的双边距BUG。

　　?Example Source Code

　　.list_unit p { float:left; width:164px;}

　　.list_unit p a { display:block; border:1px solid #03c;}

　　.list_unit p a:hover { border:1px dashed #00f;}

　　.list_unit p a img { width:160px; height:120px; margin:1px; border:0;}

　　.list_unit span { display:block;}

　　.list_unit span a { display:block; width:164px; height:22px; border:0; line-height:22px; text-align:center;}

　　.list_unit span a:hover { border:0; color:#c00;}

　　内容层（list_unit）内图片链接样式定义：

　　整个段落p，向左浮动，宽度为164px。

　　设置链接为块元素；设置边框为1px蓝色实线。

　　链接悬念状态下，边框变为1px深蓝色虚线。

　　链接元素内的图片定义，宽度与高度分别是：160px、120px；外边距为1px；边框为0（消除图片链接浏览器的默认边框）。

　　设置链接文字样式，由于上面的设置是整体的，因而在下面的内容中，注重将上面的一些内容层叠掉。

　　将span转换为块元素。span内的链接同样转换为块元素，设置宽度与高度分别是164px、22px；设置边框为0（层叠先前的设置）；行距设置为22px；文字水平居中对齐。

　　span内的链接文字悬停状态下，设置边框为0；颜色设置为#c00；显示下划线。

　　Example Source Code

　　.list_unit ul { float:right; width:216px; margin-top:-5px;}

　　.list_unit ul li { 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下无效）

　　?Example Source Code

　　#l_templates { border-width:0;}

　　.clear { clear:both;}

　　最后的CSS设置：

　　最后一个内容层（list_unit）是没有下边框的，此层的id为l_templates。因而在此进行层叠定义，消除此层的边框即可。

　　清除浮动是必须的，否则在FF下可能会出现混乱。这是一个良好的编码实践。

读到这里，这篇“css怎么实现图文混排”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。

css怎么实现图文混排

相关阅读