列表符号：使用 list-style-type 属性来控制
View Code
1 <html> 2 <head> 3 <title>项目列表</title> 4 <style> 5 <!-- 6 body{ 7 background-color:#c1daff; 8 } 9 ul{ 10 font-size:0.9em; 11 color:#00458c; 12 list-style-type:circle; /* 项目编号 */ 13 } 14 --> 15 </style> 16 </head> 17 <body> 18 <p>水上运动</p> 19 <ul> 20 <li>freestyle 自由泳</li> 21 <li>backstroke 仰泳</li> 22 <li>breaststroke 蛙泳</li> 23 <li>butterfly 蝶泳</li> 24 <li>individual medley 个人混合泳</li> 25 <li>freestyle relay 自由泳接力</li> 26 </ul> 27 </body> 28 </html>
图片符号：使用 list-style-image 属性来控制
View Code
1 <html> 2 <head> 3 <title>图片符号</title> 4 <style> 5 <!-- 6 body{ 7 background-color:#c1daff; 8 } 9 ul{ 10 font-family:Arial; 11 font-size:13px; 12 color:#00458c; 13 list-style-image:url(icon1.jpg); /* 图片符号 */ 14 } 15 --> 16 </style> 17 </head> 18 <body> 19 <p>自行车</p> 20 <ul> 21 <li>Road cycling 公路自行车赛</li> 22 <li>Track cycling 场地自行车赛</li> 23 <li>sprint 追逐赛</li> 24 <li>time trial 计时赛</li> 25 <li>points race 计分赛</li> 26 <li>pursuit 争先赛</li> 27 <li>Mountain bike 山地自行车赛</li> 28 </ul> 29 </body> 30 </html>
注意：不同的浏览器，可能的结果有所不同。
此时，以上的设计， ul 或 ol 对列表的影响并不大
无需表格的菜单
View Code
1 <head> 2 <title>无需表格的菜单</title> 3 <style> 4 <!-- 5 body{ 6 background-color:#ffdee0; 7 } 8 #navigation { 9 width:200px; 10 font-family:Arial; 11 } 12 #navigation ul { 13 list-style-type:none; /* 不显示项目符号 */ 14 margin:0px; 15 padding:0px; 16 } 17 #navigation li { 18 border-bottom:1px solid #ED9F9F; /* 添加下划线 */ 19 } 20 #navigation li a{ 21 display:block; /* 区块显示 */ 22 padding:5px 5px 5px 0.5em; 23 text-decoration:none; 24 border-left:12px solid #711515; /* 左边的粗红边 */ 25 border-right:1px solid #711515; /* 右侧阴影 */ 26 } 27 #navigation li a:link, #navigation li a:visited{ 28 background-color:#c11136; 29 color:#FFFFFF; 30 } 31 #navigation li a:hover{ /* 鼠标经过时 */ 32 background-color:#990020; /* 改变背景色 */ 33 color:#ffff00; /* 改变文字颜色 */ 34 } 35 --> 36 </style> 37 </head> 38 <body> 39 <div id="navigation"> 40 <ul> 41 <li><a href="#">Home</a></li> 42 <li><a href="#">My Blog</a></li> 43 <li><a href="#">Friends</a></li> 44 <li><a href="#">Next Station</a></li> 45 <li><a href="#">Contact Me</a></li> 46 </ul> 47 </div> 48 </body> 49 </html>
实现的想法：
控制每个 li 下划线，使得有区分的效果；
通过 a ，统一设计左右边框；
通过 a：link，a:visited，a:hover的设计，使得效果更像一个连接；
把竖直列表转为横向列表：巧妙地使用 float 来设计
View Code
1 <html> 2 <head> 3 <title>菜单的横竖转换</title> 4 <style> 5 <!-- 6 body{ 7 background-color:#ffdee0; 8 } 9 #navigation { 10 font-family:Arial; 11 } 12 #navigation ul { 13 list-style-type:none; /* 不显示项目符号 */ 14 margin:0px; 15 padding:0px; 16 } 17 #navigation li { 18 float:left; /* 水平显示各个项目 */ 19 } 20 #navigation li a{ 21 display:block; /* 区块显示 */ 22 padding:3px 6px 3px 6px; 23 text-decoration:none; 24 border:1px solid #711515; 25 margin:2px; 26 } 27 #navigation li a:link, #navigation li a:visited{ 28 background-color:#c11136; 29 color:#FFFFFF; 30 } 31 #navigation li a:hover{ /* 鼠标经过时 */ 32 background-color:#990020; /* 改变背景色 */ 33 color:#ffff00; /* 改变文字颜色 */ 34 } 35 --> 36 </style> 37 </head> 38 <body> 39 <div id="navigation"> 40 <ul> 41 <li><a href="#">Home</a></li> 42 <li><a href="#">My Blog</a></li> 43 <li><a href="#">Friends</a></li> 44 <li><a href="#">Next Station</a></li> 45 <li><a href="#">Contact Me</a></li> 46 </ul> 47 </div> 48 </body> 49 </html>
设计 Tab 菜单：巧妙地控制下划线的颜色来凸显显示效果
代码：待续