汇学府笔记网是汇学府网旗下优秀笔记展示平台! 欢迎优秀读书学习笔记投稿,投稿有奖励!

学分类旗下网站

浏览量

用CSS样式替代基于图片的导航剔除传统模式

作者:admin 发布时间:2019-08-11

在CSS被广泛使用以前,大都用图片来制作导航条,现在也仍然在使用,但是这有一些很大的缺陷:

可维护性差:如果要加入新的导航项,就必须重新建立一个新的图片,并且新图片要和原图片保持一致,才不会显得不协调,但是如果原图片丢失的话,很难再实现无缝的融合。动态建立导航实现麻烦:如果导航项是根据需要动态建立的,就好象ZBLOG里的导航一样,当然ZBLOG默认的不是图片导航条,但是如果要动态建立的话,就必须将图片存放到数据库,再读取显示出来。 利用CSS就不会出现这些问题了。最常用的方法是用列表的方式建立导航条: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head meta http-equiv= Content-Type content= text/html; charset=gb2312 / title 用CSS样式替代基于图片的导航 /title style type= text/css !--body{width:400px;font-size:14px;}ul{list-style-type:none;margin:0;}ul li{width:100px;line-height:20px;background-color:#999999;border-bottom:2px solid #333333;}ul li a:link{border-left:10px solid #000000;border-right:5px solid #999999;color:#0000CC;padding:3px 0 2px 5px;text-decoration:none;display:block;}ul li a:visited{border-left:10px solid #000000;border-right:5px solid #999999;color:#990000;padding:3px 0 2px 5px;text-decoration:none;display:block;}ul li a:hover{border-left:10px solid #000000;border-right:5px solid #999999;color:#FF0000;padding:3px 0 2px 5px;text-decoration:none;background-color:#CCCCCC;display:block;}-- /style /head body ul li a href= # index /a /li li a href= # nav1 /a /li li a href= # nav2 /a /li li a href= # tags /a /li /ul /body /html 显示效果截图:用CSS列表建立导航条当然你可以更具体的设置以达到好的效果,我在学习的时候只是自己动手操作一下,看看效果。相关:。
网友吐槽

读书笔记 学习笔记 名著读书笔记

本站读书学习笔记由网友提供,版权归原作者本人所有,转载请注明出处!如有侵犯您的相关权利,请联系我们客服处理! 豫ICP备18040320号-1