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

学分类旗下网站

浏览量

CSS创建水平风格和按钮风格的导航条

作者:admin 发布时间:2019-08-11
1.创建水平风格的导航条要创建水平风格的导航条之需要将列表属性display:inline;即可。这和 不一样。ul{list-style-type:none;margin:0;padding:0;}ul li{line-height:20px;border-bottom:2px solid #333333;display:inline;}列表就会在一行显示了。 2.创建按钮风格的导航条创建按钮风格的导航条只是要设置border属性就可以了,一般情况下先将右边和下方的边框设置为深色,鼠标覆盖时将左边和上方设置为深色,这样就显示出了反转的效果。 !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;}ul{list-style-type:none;margin:0;padding:0;}#nav ul li{float:left;margin-right:2px;}#nav ul a:link,#nav ul a:visited{border-left:1px solid #FFFFFF;border-top:1px solid #FFFFFF;border-right:1px solid #999999;border-right:1px solid #999999;color:#0000CC;background-color:#CCCCCC;padding:0 0 0 10px;text-decoration:none;display:block;}#nav ul a:hover{border-left:1px solid #999999;border-top:1px solid #999999;border-right:1px solid #FFFFFF;border-right:1px solid #FFFFFF;color:#FF0000;background-color:#CCCCCC;text-decoration:none;display:block;}-- /style   /head body div id= nav 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 /div /body /html 效果截图如下:CSS创建按钮风格的导航条CSS创建按钮风格的导航条相关:。
网友吐槽

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

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