CSS布局列表.doc

CSS实例教程：用列表ul+li制作CSS横向菜单的基础知识-CSS布局实例今天介绍如何用ul和li制作横向菜单。ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。我们下面用CSS来改变它的外观，使它能横向在一行中显示，并且将项目符号去掉。我们看下面的XHTML代码：Div+CSS教程CSS布局实例CSS2.0教程CSS酷站欣赏CSS模板下载我们建立了一个id为nav的无序列表，包含了五个列表项li，这就是我们的菜单了。我们通过下面的css代码，对它进行重新定义：1. #navli 2. display:inline; 3. list-style-type:none; 4. padding:5px10px; 5. 对id为nav的无序列表中的列表项li，我们进行CSS定义。每句代码的意义解释如下：display:inline;内联（行内）。将li限制在一行来显示。list-style-type:none;列表项预设标记为无。这就去掉了“方块或实心的黑点”padding:5px10px;设置li的填充，距离上下均为5px，距离左右均为10px.这样定义以后，我们的列表就有一个菜单的雏形了，它看上去不是很美观，以后的教程中，再对它进行更加深入的修饰。UL制作CSS横向菜单蓝绿色调-CSS布局实例在前面的文章中学习用列表ul制作CSS横向菜单的基础知识。实现的原理我们都能理解了，但这样的菜单还远远不能满足我们的需要，我们需要制作出比较美观的菜单，我们今天学习让菜单有一个矩形的背景，并且当鼠标激活时能有所变化（hover）。废话不多说了，让我们开始吧！1. * 2. margin:0; 3. padding:0; 4. 5. #nav 6. background:#06c; 7. float:left; 8. width:100%; 9. 10. #navli 11. display:inline; 12. list-style-type:none; 13. 14. #navlia:link,#navlia:visited 15. float:left; 16. padding:5px12px; 17. color:#fff; 18. text-decoration:none; 19. background:#06c; 20. border-right:1pxsolid#fff; 21. 22. #navlia:hover 23. background:#060; 24. 首先是整体布局声明。利用通配符“*”表示在不特别声明的情况下，默认所有元素的边距及填充均为零。我们设置UL无序列表nav的背景色为#06c，向左浮动，宽度是100%。这两段代码定义以后，我们的菜单就能紧靠着浏览器窗口了，并且它的宽度是100%。菜单的列表项li定义为display:inline;内联（行内）将li限制在一行来显示及设置列表项预设标记为无；我们接着往下看链接区域的代码意义，link、visited状态：链接元素向左浮动，填充上下为5px、左右为12px。文字颜色为白色，去除链接下划线。背景色#06c与上面的相同。我们定义了右边框线：1px、实线、白色#fff。这一句很重要，它明确的划分了菜单链接之间的距离。这一句话是缩下的形式。1. border-right-width:1px; 2. border-right-style:solid; 3. border-right-color:#fff;CSS实例：UL li打造CSS横向菜单蓝色地平线-CSS布局实例在前面的文章中学习用列表ul制作CSS横向菜单的基础知识。以及CSS实例教程：UL制作CSS横向菜单蓝绿色调。我们发现了一些问题，这些菜单的链接相距太远了。而且浏览器窗口有一定距离的空白，更重要的是宽度问题。我们今天就来解决这些问题制作“蓝色地平线”。HTML代码与前面的一样，我们就不再重复了。我们看CSS代码。1. * 2. margin:0; 3. padding:0; 4. 5. #nav 6. background:#06c; 7. float:left; 8. width:100%; 9. 10. #navli 11. display:inline; 12. list-style-type:none; 13. 14. #navlia:link,#navlia:visited 15. float:left; 16. padding:5px12px; 17. color:#fff; 18. text-decoration:none; 19. background:#06c; 20. border-right:1pxsolid#fff; 21. 22. #navlia:hover 23. background:#060; 24. 首先是整体布局声明。利用通配符“*”表示在不特别声明的情况下，默认所有元素的边距及填充均为零。我们设置UL无序列表nav的背景色为#06c，向左浮动，宽度是100%。这两段代码定义以后，我们的菜单就能紧靠着浏览器窗口了，并且它的宽度是100%。菜单的列表项li定义为display:inline;内联（行内）将li限制在一行来显示及设置列表项预设标记为无；我们接着往下看链接区域的代码意义，link、visited状态：链接元素向左浮动，填充上下为5px、左右为12px。文字颜色为白色，去除链接下划线。背景色#06c与上面的相同。我们定义了右边框线：1px、实线、白色#fff。这一句很重要，它明确的划分了菜单链接之间的距离。这一句话是缩下的形式。1. border-right-width:1px; 2. border-right-style:solid; 3. border-right-color:#fff;CSS横向菜单会动的小竖条-CSS布局实例在前面的文章中学习用列表ul制作CSS横向菜单的基础知识。以及CSS实例教程：UL制作CSS横向菜单蓝绿色调.等等。我们可以让我们的菜单更加的美化，加上一些装饰性的效果，同时也提高用户的易用性。今天我们学习CSS横向菜单会动的小竖条。最终效果如下：图片1HTML非常简单主要是通过CSS实现这款菜单效果1. 2. Div+CSS教程 3. CSS布局实例 4. CSS2.0教程 5. CSS酷站欣赏 6. CSS模板下载 7. 我们详细的解释与说明CSS代码，看它是如何控制这个ULLI打造CSS横向菜单的：1. * 2. font-size:12px; 3. text-align:center; 4. 5. #nav 6. width:520px; 7. border-bottom:1pxsolid#06f; 8. margin:20pxauto0auto; 9. 10. #navli 11. display:inline; 12. list-style-type:none; 13. 14. #navlia:link,#navlia:visited 15. float:left; 16. margin-right:5px; 17. padding:5px10px5px8px; 18. text-decoration:none; 19. color:#000; 20. background:#ffe67d; 21. border-left:5pxsolid#fc0; 22. 23. #navlia:hover 24. color:#060; 25. border-left:5pxsolid#f60; 26. 首页我们进行了整体布局声明，声明了文字大小及居中的对齐方式。需要说明的是，在ff中，我们设置margin:0auto。即可实现容器的居中了，但在IE中，这还不够，还需要在父容器中声明text-align:center。这一点我们要记得，不然容易出错。声明UL无序列表的宽度为520ox，下边框一象素的实现，颜色为#06f。我们设置了nav这个UL，距离顶部为20px、距离底部为零，左右的距离为auto。这就实现了nav在水平方向内是居中的，垂直方面上距离浏览器窗口20px。声明LI列表项为内联（行内）显示，列表预设标记为无。我们重点需要理解#navlia:link,#navlia:visited的定义，设置链接的样式。向左浮动，并且右边距为5px。这是设置链接元素从左向右排行，并且元素之间的右部间隔5px。设置填充，顶5px、右10