字体大小: 【返回】
您的位置:首页 > 资讯中心 > > 正文阅读

图文混排DIV布局CSS制作

来源:sugood.com 发布时间:2008-2-25 阅读:20839次

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

* { margin:0; padding:0; font-size:13px; color:#000; list-style:none;}
a { color:#03c; text-decoration:none;}
a:hover { text-decoration:underline;}
#listAll { width:418px; margin:30px auto; border:1px solid #999;}
整体布局声明:
  设置整个层的样式,宽度为418px,上下外边距为30px,左右为自动实现水平居中对齐。边框设置为1px的灰色实线。
----------------------------------
.listTitle { width:418px; height:32px; border-bottom:1px solid #999; background:#f2f9fd; overflow:hidden;}
.listTitle h3 { float:left; width:160px; line-height:32px; text-indent:15px;}
.listTitle h3 a { color:#c00;}
.listTitle h3 a:hover { color:#03c;}
.listTitle ul { float:right; width:230px;}
.listTitle ul li { float:left; line-height:32px; padding:0 5px;}
.listTitle ul li a { font-size:12px; color:#333;}
标题区域listTitle层的CSS样式定义:
  设置listTitle层宽度与高度分别是:418px、32px;下边框为1px的灰色实线;设置背景色及溢出隐藏。
  栏目名称h3元素向左浮动;宽度160px;行距32px实现文字垂直居中对齐;文本缩进为15px。紧接着设置栏目名称h3链接的样式。
  栏目导航ul列表的CSS样式,向右浮动;宽度为230px;设置列表项li向左浮动;行距为32px;上下内边距为0,左右内边距为5px;紧接着设置链接文字大小与颜色。
-------------------------------------
.listContent { float:left; width:388px; margin-left:15px; padding:15px 0 8px 0; border-bottom:1px dotted #9AC4E9;}
.listContent { display:inline;}
  内容层(listContent)整体样式定义:
  向左浮动;宽度为388px,左外边距为15px,上内边距15px、下内边距8px;设置下边框为浅蓝色的虚线。
  设置为内联是避免IE的双边距BUG。

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

.listContent ul { float:right; width:216px; margin-top:-5px;}
.listContent ul li { float:left; width:216px; line-height:22px; color:#039; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
  内容层(listContent)内文章列表样式定义:
  整个列表ul向右浮动;宽度为216px;上外边距为-5px。
  列表项li的CSS样式设置,向左浮动,宽度为216px;行距为22px;颜色为#039;后面的三个属性是实现“截字”效果,请注意此效果在FF下无效。

#contentDesign { border-width:0;}
.clear { clear:both;}
  最后的CSS设置:
  最后一个内容层(listContent)是没有下边框的,此层的id为contentDesign 因而在此进行层叠定义,消除此层的边框即可。
  清除浮动是必须的,否则在FF下可能会出现混乱。
-------------------------------------------------
编写HTML代码:
最顶部是栏目名称“海平面网站设计”与栏目导航“网站建设 设计教程 平面设计”。栏目名称用标题元素Hx来表示,栏目导航可以用ul+li的无序列表。
下部的三个链接区域形式基本雷同,左侧是图片链接,右侧是文章列表元素。将左侧的图片与文字看成是一个段落,用p标签来表示,右侧的文章列表用ul+li的无序列表。
将所有元素置入id为listAll层中,以便于进行整体布局的控制。在其内部建立四个层,它们分别是:listTitle、contentWeb、contentArticle、contentDesign对于下部的三个内容层,应用同样的class,为listContent。

<div id="listAll">
    <div class="listTitle">
        <h3><a href="http://www.sugood.com/" title="网站设计">海平面网站设计</a></h3>
        <ul>
            <li><a href="http://www.sugood.com/website.htm" title="网站建设">网站建设</a></li>
            <li><a href="http://www.sugood.com/news/default.asp" title="设计教程">设计教程</a></li>
            <li><a href="http://www.sugood.com/design/design.asp" title="平面设计">平面设计</a></li>
        </ul>
    </div>
    <div class="listContent" id="contentWeb">
        <p>
            <a href="http://www.sugood.com/website.htm"><img src="p1.jpg" alt="网站建设" /></a>
            <span><a href="http://www.sugood.com/website.htm">网站建设</a></span>
        </p>
        <ul>
            <li>·<a href="">网站建设策划分析</a></li>
            <li>·<a href="">标准型功能型网站建设套餐</a></li>
            <li>·<a href="">增强功能型网站建设方案套餐</a></li>
            <li>·<a href="">品牌形象型网站建设方案套餐</a></li>
            <li>·<a href="">商务功能型网站建设方案套餐</a></li>
            <li>·<a href="">上海网站设计案例展示</a></li>
            <li>·<a href="">上海网站建设合同</a></li>
        </ul>
    </div>
    <div class="listContent" id="contentArticle">
        <p>
            <a href="http://www.sugood.com/news/default.asp"><img src="p2.jpg" alt="设计教程" /></a>
            <span><a href="http://www.sugood.com/news/default.asp">设计教程</a></span>
        </p>
        <ul>
            <li>·<a href="">必须接受条款,否则灰色按钮</a></li>
            <li>·<a href="">经典二级导航菜单样式</a></li>
            <li>·<a href="">绝对经典的标签切换栏目显示</a></li>
            <li>·<a href="">通用设置字体大中小代码</a></li>
            <li>·<a href="">css十大秘集技巧</a></li>
            <li>·<a href="">QQ在线咨询代码</a></li>
            <li>·<a href="">CSS Beauty 风格的分类列表导航样式</a></li>
        </ul>
    </div>
    <div class="listContent" id="contentDesign">
        <p>
            <a href="http://www.sugood.com/design/design.asp"><img src="p3.jpg" alt="平面设计" /></a>
            <span><a href="http://www.sugood.com/design/design.asp">平面设计</a></span>
        </p>
        <ul>
            <li>·<a href="">企业样本</a></li>
            <li>·<a href="">标志设计</a></li>
            <li>·<a href="">广告设计</a></li>
            <li>·<a href="">包装设计</a></li>
            <li>·<a href="">VI设计</a></li>
            <li>·<a href="">包装设计</a></li>
            <li>·<a href="">其他设计</a></li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

免责声明:力倡网络文化,崇尚互联共享。本站所发表的文章新闻资讯,部份来自互联网转载,若有冒犯原创之处请来信告知,我们第一时间内删除。同时所发表或转载的文章新闻信息,并不代表本站赞同或者支持该文的观点,我们的立场仅限于传播更多读者感兴趣的信息。