我用的图文混和CSS排列表.doc_第1页
我用的图文混和CSS排列表.doc_第2页
我用的图文混和CSS排列表.doc_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

我用的图文混和CSS排列表 CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。将所有元素置入id为list_mb5u_com的层中，以便于进行整体布局的控制。在其内部建立四个层，它们分别是：list_title、l_showcase、l_article、l_templates。对于下部的三个内容层，应用同样的class，为list_unit。 在list_title层，置入h3元素作为栏目名称，建立一个ul列表放置栏目导航。下部的三个内容层（list_unit），分别置入段落标签p，引入链接图片与文字；建立一个ul放置文章表。在最底部，放置一个类为clear的层来清除浮动。整体布局声明：设置整个层的样式，宽度为418px，上下外边距为30px，左右为自动实现水平居中对齐。边框设置为1px的灰色实线。 标题区域list_title层的CSS样式定义：设置list_title层宽度与高度分别是：418px、32px；下边框为1px的灰色实线；设置背景色及溢出隐藏。栏目名称h3元素向左浮动；宽度160px；行距32px实现文字垂直居中对齐；文本缩进为15px。紧接着设置栏目名称h3链接的样式。栏目导航ul列表的CSS样式，向右浮动；宽度为230px；设置列表项li向左浮动；行距为32px；上下内边距为0，左右内边距为5px；紧接着设置链接文字大小与颜色。 内容层（list_unit）整体样式定义：向左浮动；宽度为388px，左外边距为15px，上内边距15px、下内边距8px；设置下边框为浅蓝色的虚线。设置为内联是避免IE的双边距BUG。内容层（list_unit）内图片链接样式定义：整个段落p，向左浮动，宽度为164px。设置链接为块元素；设置边框为1px蓝色实线。链接悬念状态下，边框变为1px深蓝色虚线。链接元素内的图片定义，宽度与高度分别是：160px、120px；外边距为1px；边框为0（消除图片链接浏览器的默认边框）。设置链接文字样式，由于上面的设置是整体的，因而在下面的内容中，注重将上面的一些内容层叠掉。将span转换为块元素。span内的链接同样转换为块元素，设置宽度与高度分别是164px、22px；设置边框为0（层叠先前的设置）；行距设置为22px；文字水平居中对齐。span内的链接文字悬停状态下，设置边框为0；颜色设置为#c00；显示下划线。内容层（list_unit）内文章列表样式定义：整个列表ul向右浮动；宽度为216px；上外边距为-5px。列表项li的CSS样式设置，向左浮动，宽度为216px；行距为22px；颜色为#039；后面的三个属性是实现“截字”效果，网站上有具体的介绍。（请注重此效果在FF下无效） 最后的CSS设置：最后一个内容层（list_unit）是没有下边框的，此层的id为l_te
人人文库> 全部分类> 应用文书 > 技术指导

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论