HTML与CSS（图解7）：项目列表

最新推荐文章于 2022-02-09 15:28:29 发布

weixin_30873847

最新推荐文章于 2022-02-09 15:28:29 发布

阅读量152

点赞数

原文链接：http://www.cnblogs.com/KeenLeung/archive/2012/05/16/2502648.html

版权

列表符号：使用 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 菜单：巧妙地控制下划线的颜色来凸显显示效果

代码：待续

转载于:https://www.cnblogs.com/KeenLeung/archive/2012/05/16/2502648.html

weixin_30873847

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS（图解7）：项目列表

列表符号：使用 list-style-type 属性来控制View Code 1 <html> 2 <head> 3 <title>项目列表</title> 4 <style> 5 <!-- 6 body{ 7 background-color:#c1daff; 8 } 9 ...
复制链接

扫一扫