css_项目列表.docx

一、项目列表传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的标记和无顺序列表的标记等。当引入CSS后，项目列表被赋予了很多新的属性，甚至超越了它最初设计时的功能。1、列表符号通常的项目列表主要采用或者标记，然后配合标记罗列各个项目，如下图示：项目列表bodybackground-color:#c1daff;ulfont-size:0.9em;color:#00458c;水上运动freestyle 自由泳backstroke 仰泳breaststroke 蛙泳butterfly 蝶泳individual medley 个人混合泳freestyle relay 自由泳接力在CSS中项目列表的编号是通过属性list-style-type来修改的，无论是标记还是标记，都可以使用相同的属性值，而且效果是完全相同的。如下所示： ulfont-size:0.9em;color:#00458c;list-style-type:decimal; /* 项目编号 */此时项目列表将按照十进制编号显示，这本身是标记的功能。换句话说，在CSS中标记与标记的分界线并不明显，只要利用list-style-type属性，二者就可以通用，如下图：当给或者标记设置list-style-type属性时，在它们中间的所有都将采用该设置，而如果对标记单独设置list-style-type属性，则仅仅作用在该条项目上，如下所示：项目列表水上运动freestyle 自由泳backstroke 仰泳breaststroke 蛙泳butterfly 蝶泳individual medley 个人混合泳freestyle relay 自由泳接力list-style-type属性的取值及含义属性值代表的含义disc实心圆点circle空心圆点square实心方块decimal十进制数1、2、3、4、5、.lower-roman小写罗马数字i、ii、iii、iv、v、.upper-roman大写罗马数字I、II、III、IV、V、.lower-alpha小写英文字母a、b、c、d、e、.upper-alpha大写英文字母A、B、C、D、E、.none不使用项目符号2、图片符号除了传统的各种项目符号外，CSS还提供了属性list-style-image，可以将项目符号显示为任意的图片，如下图：图片符号bodybackground-color:#c1daff;ulfont-family:Arial;font-size:13px;color:#00458c;list-style-image:url(icon1.jpg); /* 图片符号 */自行车Road cycling 公路自行车赛Track cycling 场地自行车赛sprint 追逐赛time trial 计时赛points race 计分赛pursuit 争先赛Mountain bike 山地自行车赛 但以上方法在IE和Firefox中的显示效果不同，因此这种设置图片符号的方法并不推荐。如果希望项目符号采用图片的方式，则建议大家把，如下所示：图片符号bodybackground-color:#c1daff;ulfont-family:Arial;font-size:13px;color:#00458c;list-style-type:none; /* 不显示项目符号 */libackground:url(icon1.jpg) no-repeat; /* 添加为背景图片 */padding-left:25px; /* 设置图标与文字的间隔 */自行车Road cycling 公路自行车赛Track cycling 场地自行车赛sprint 追逐赛time trial 计时赛points race 计分赛pursuit 争先赛Mountain bike 山地自行车赛这样我们就通过隐藏标记中的项目列表，然后再设置标记的样式，统一定制文字与图标之间的距离。 二、无需表格的菜单当项目列表的项目符号可以通过设置list-style-type属性值为“none”时，制作各式各样的菜单和导航条成了项目列表的最大用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。要完成的效果。第一步：先制作好背景颜色和项目列表，如下图所示：body background-color: #ffdee0;homemy blogfriendsnext stationcontact me第二步：设置整个块的宽度为固定像素，并设置文字字体，并设置项目列表的属性，将项目符号设置为不显示。通过这样设置后，项目列表便显示为普通的超链接列表。#navigationwidth:200px;font-family:Arial, Helvetica, sans-serif;#navigation ullist-style-type:none;/*不显示项目符号*/margin:0px;padding:0px;第三步：接下来为标记添加下划线，以分割各个超链接，并且对超链接标记进行整体设置，如下所示：#navigation li border-bottom:1px solid #ED9F9F; /* 添加下划线 */#navigation li adisplay:block; /* 区块显示 */text-decoration:none;border-left:12px solid #711515; /* 左边的粗红边 */border-right:1px solid #711515; /* 右侧阴影 */特别说明“display:block;”语句： 通过这个语句，超链接被设置成块元素，当鼠标进入该块的任何部分时都会被激活，而不是仅仅在文字上方时才被激活。第四步：设置链接的样式：#navigation li a:link, #navigation li a:visitedbackground-color:#c11136;color:#FFFFFF;#navigation li a:hover /* 鼠标经过时 */background-color:#990020; /* 改变背景色 */color:#ffff00; /* 改变文字颜色 */三、菜单的横竖转换导航条不只是竖直排列，很多时候要求页面的菜单能够在水平方向显示，通过CSS属性的控制，可以轻松实现项目列表导航条的横竖转换，如下：基本和上述的一样，只不过不设置块的宽度，如下所示：body background-color: ffdee0;#navigationfont-family:Arial, Helvetica, sans-serif;#navigation ullist-style-type:none;/*不显示项目符号*/margin:0px;padding:0px;homemy blogfriendsnext stationcontact me然后设置的float属性，使得各个项目都水平显示，再跟上例一样，设置的相关属性和链接样式，如下所示：#navigation li float:left; /* 水平显示各个项目 */#navigation li adisplay:block; /* 区块显示 */padding:3px 6px 3px 6px;text-decoration:none;border:1px solid #711515;margin:2px;#navigation li a:link, #navigation