CSS布局列表.doc

CSS实例教程：用列表ul+li制作CSS横向菜单的基础知识-CSS布局实例
今天介绍如何用ul和li制作横向菜单。ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。
CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。我们下面用CSS来改变它的外观，使它能横向在一行中显示，并且将项目符号去掉。
我们看下面的XHTML代码：
<ulid="nav">
<li><ahref="http://www.css.com/">Div+CSS教程</a></li>
<li><ahref="http://www.css.com/">CSS布局实例</a></li>
<li><ahref="http://www.css.com/">CSS2.0教程</a></li>
<li><ahref="http://www.css.com/">CSS酷站欣赏</a></li>
<li><ahref="http://www.css.com/">CSS模板下载</a></li>
</ul>
我们建立了一个id为nav的无序列表，包含了五个列表项li，这就是我们的菜单了。我们通过下面的css代码，对它进行重新定义：
#navli{
display:inline;
list-style-type:none;
padding:5px10px;
}
对id为nav的无序列表中的列表项li，我们进行CSS定义。每句代码的意义解释如下：
display:inline;内联（行内）。将li限制在一行来显示。
list-style-type:none;列表项预设标记为无。这就去掉了“方块或实心的黑点”
padding:5px10px;设置li的填充，距离上下均为5px，距离左右均为10px.
这样定义以后，我们的列表就有一个菜单的雏形了，它看上去不是很美观，以后的教程中，再对它进行更加深入的修饰。

UL制作CSS横向菜单蓝绿色调-CSS布局实例

在前面的文章中学习《用列表ul制作HYPERLINK"http://css.zz5u.net/CSS/2009/0710/2932.html"CSS横向菜单的基础知识》。实现的原理我们都能理解了，但这样的菜单还远远不能满足我们的需要，我们需要制作出比较美观的菜单，我们今天学习让菜单有一个矩形的背景，并且当鼠标激活时能有所变化（hover）。废话不多说了，让我们开始吧！
*{
margin:0;
padding:0;
}
#nav{
background:#06c;
float:left;
width:100%;
}
#navli{
display:inline;
list-style-type:none;
}
#navlia:link,#navlia:visited{
float:left;
padding:5px12px;
color:#fff;
text-decoration:none;
background:#06c;
border-right:1pxsolid#fff;
}
#navlia:hover{
background:#060;
}
首先是整体布局声明。利用通配符“*”表示在不特别声明的情况下，默认所有元素的边距及填充均为零。
我们设置UL无序列表nav的背景色为#06c，向左浮动，宽度是100%。这两段代码定义以后，我们的菜单就能紧靠着浏览器窗口了，并且它的宽度是100%。
菜单的列表项li定义为display:inline;内联（行内）将li限制在一行来显示及设置列表项预设标记为无；
我们接着往下看链接区域的代码意义，link、visited状态：
链接元素向左浮动，填充上下为5px、左右为12px。
文字颜色为白色，去除链接下划线。背景色#06c与上面的相同。
我们定义了右边框线：1px、实线、白色#fff。这一句很重要，它明确的划分了菜单链接之间的距离。这一句话是缩下的形式。

border-right-width:1px;
border-right-style:solid;
border-right-color:#fff;
CSS实例：ULli打造CSS横向菜单蓝色地平线-CSS布局实例

在前面的文章中学习《用列表ul制作CSS横向菜单的基础知识》。以及《HYPERLINK"http://css.zz5u.net/CSS/index.html"CSS实例教程：UL制作CSS横向菜单蓝绿色调》。我们发现了一些问题，这些菜单的链接相距太远了。而且浏览器窗口有一定距离的空白，更重要的是宽度问题。我们今天就来解决这些问题制作“蓝色地平线”。
HTM