(CSS布局列表.docVIP

CSS实例教程：用列表ul+li制作CSS横向菜单的基础知识-CSS布局实例 今天介绍如何用ul和li制作横向菜单。ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。 　　CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。我们下面用CSS来改变它的外观，使它能横向在一行中显示，并且将项目符号去掉。 　　我们看下面的XHTML代码： ul?id=nav? ????lia?href=http://www. /Div+CSS教程/a/li? ????lia?href=/CSS布局实例/a/li? ????lia?href=/CSS2.0教程/a/li? ????lia?href=/CSS酷站欣赏/a/li? ????lia?href=/CSS模板下载/a/li? /ul? 　　我们建立了一个id为nav的无序列表，包含了五个列表项li，这就是我们的菜单了。我们通过下面的css代码，对它进行重新定义： #nav?li?{ ? ????display:?inline; ? ????list-style-type:?none; ? ????padding:?5px?10px; ? }? 　　对id为nav的无序列表中的列表项li，我们进行CSS定义。每句代码的意义解释如下： 　　display:?inline;　内联（行内）。将li限制在一行来显示。 　　list-style-type:?none;　列表项预设标记为无。这就去掉了“方块或实心的黑点” 　　padding:?5px?10px;　设置li的填充，距离上下均为5px，距离左右均为10px. 　　这样定义以后，我们的列表就有一个菜单的雏形了，它看上去不是很美观，以后的教程中，再对它进行更加深入的修饰。 ? UL制作CSS横向菜单蓝绿色调-CSS布局实例 在前面的文章中学习《用列表ul制作CSS横向菜单的基础知识》。实现的原理我们都能理解了，但这样的菜单还远远不能满足我们的需要，我们需要制作出比较美观的菜单，我们今天学习让菜单有一个矩形的背景，并且当鼠标激活时能有所变化（hover）。废话不多说了，让我们开始吧！ *?{ ? ????margin:0; ? ????padding:0; ? } ? #nav?{ ? ????background:#06c; ? ????float:left; ? ????width:100%; ? } ? #nav?li?{ ? ????display:?inline; ? ????list-style-type:?none; ? } ? #nav?li?a:link,#nav?li?a:visited?{ ? ????float:left; ? ????padding:5px?12px; ? ????color:#fff; ? ????text-decoration:?none; ? ????background:#06c; ? ????border-right:?1px?solid?#fff; ? } ? #nav?li?a: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实例：UL li打造CSS横向菜单蓝色地平线-CSS布局实例 在前面的文章中学习《用列表ul制作CSS横向菜单的基础知识》。以及《CSS实例教程：UL制作CSS横向菜单蓝绿色调》。我们发现了一些问题，这些菜单的链接相距太远了。而且浏览器窗口有一定距离的空白，更重要的是宽度问题。我们今天就来解决这些问题制作“蓝色地平线”。 　　HTML代码与