列表导航条剖析.ppt

一、动态超链接 二、css列表 三、导航条、导航菜单 四、滚动条 重点难点 一、动态超链接 1、去掉下划线 a{text-decoration:none;} 2、伪类 a:link a:hover a:active a:visited 在css里面书写的顺序是： a:link a:visited a:hover a:active 1 4 2 3 思考： 要想每个div里的链接颜色都不同，怎样做？ 二、css列表 列表的基本语法 列表属性在CSS中用ul / li { list-style:----- }表示： 列表前的图标（list-style-image ） 列表位置（内外）（list-style-position） 列表的样式（list-style-type） list-style 1、设置列表前的图标： list-style-image : url (images/01.jpg); 2、设置列表位置（内外）： list-style-position : outside/inside; 3、设置列表的样式： list-style-type : disc；（默认值） list-style-type : disc圆点 circle圆圈 square小方块 decimal数字 lower-roman小写罗马数字 upper-roman大写罗马数字 lower-alpha小写字母 upper-alpha大写字母 none无 ul ol 思考 2、加大行间距后，图标和文字对不齐怎么办？ 1、怎样增加列表的行间距？ li{ list-style:none; background-image:url(two.gif); background-repeat:no-repeat; background-position:0px 18px;} text-indent:20px; line-height:50px; 参考4列表行间距.html 小技巧： li标签前面的图标推荐使用background-image，而不是list-style-image。因为background-image:url norepeat x y可以定位X轴、Y轴，以文字开始的坐下角为原始坐标(0,0),改变位置很灵活。 列表加锚记制作选项卡切换效果 定义列表： dl dt……/dt dd……/dd 锚记链接： ul id=“a”/ul a href=“#a”焦点新闻/a 参考6定义列表选项卡技术.html dl dta href=#a焦点新闻/aa href=#b国内新闻/aa href=#c国际新闻/a/dt dd ul id=a li焦点新闻1/li 。。。。。。。。 li焦点新闻5/li /ul ul id=b li国内新闻1/li 。。。。。。。。 li国内新闻5/li /ul ul id=c li国际新闻1/li 。。。。。。。。 li国际新闻5/li /ul /dd/dl 列表和锚记制作图片切换效果 原理：利用锚记链接来控制图像的显示顺序。 A B C D图片显示区域 E 定义列表 F 列表项 参考7定义列表图像切换.html 三、导航条的制作 1、垂直导航条 a:hover{color:white;background:red;display:block;} display:block； 将对象强制作为块对象显示 强制块显示 没有强制块显示 2、水平导航条 li{background:orange;width:100px;height:40px; text-align:center;borderright:1px solid red;float:left;} a:hover{color:white;background:red;display:block;} float:left; 强制对象左漂