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

学分类旗下网站

浏览量

CSS如何创建经典的博客标签页式导航条

作者:admin 发布时间:2019-08-11
标签页式导航条比较常见,很多博客的模板都是采用的标签页式导航,简洁又清新,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 创建按钮风格的导航条 /title style type= text/css !--body{font-size:14px;}#nav{width:600px;border-bottom:1px solid #000000;}ul{list-style-type:none;margin:0;padding:0;}#nav ul li{float:left;margin-right:1px;background-repeat:no-repeat;padding:0 0 0 8px;background-image:url(image/alink_left.jpg);}#nav ul a{color:#0000CC;padding:0 0 0 10px;text-decoration:none;background-image:url(image/alink_right.jpg);background-position:top right;padding:0 8px 0 0;} #nav li{float:left;margin-right:1px;background-repeat:no-repeat;padding:0 0 0 8px;background-image:url(image/alink_left.jpg);}#nav #index ul li.index,#nav #nav1 ul li.nav1,#nav #nav2 ul li.nav2,#nav #nav2 ul li.tags{float:left;margin-right:1px;background-repeat:no-repeat;padding:0 0 0 8px;background-image:url(image/active_left.jpg);}#nav #index ul li.index a,#nav #nav1 ul li.nav1 a,#nav #nav2 ul li.nav2 a,#nav #nav2 ul li.tsgs a{color:#0000CC;padding:0 0 0 10px;text-decoration:none;background-image:url(image/active_right.jpg);background-position:top right;padding:0 8px 0 0;}-- /style   /head body div id= nav div id= index ul li "CSS创建标签页式导航条" title="" src="http://www.i1766.com/zb_users/upload/201203071244224326.jpg" />CSS创建标签页式导航条。个人觉得这种做法对于动态创建导航很有好处,因为导航条的大小会自动适应,如果能将图片也用CSS做出来就更加完美了。相关:。
网友吐槽

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

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