导航栏,设置块对象

来源:互联网 发布:守望先锋录制软件 编辑:程序博客网 时间:2024/05/20 19:33

代码是从其它地方看的,具体地址忘了。

<style type="text/css">

#nav{width:100%;background:#666666;color:#FFFFFF; font-family:黑体;
 text-align:center; font-size:13px; font-weight:bold;}
#nav a{border-left:#CCCCCC 1px solid;/*在文字左边加个竖线*/
       display:inline-block;/*将对象呈递为内联对象,但是对象的内容作为块对象呈递*/
       line-height:40px;/*设置块的高度*/
       padding:0px 10px;
       margin-left:-8px;}
#nav a:link,a:visited,a:active{ text-decoration:none; color:#FFFFFF;}
#nav a:hover { background:#CCCCCC;}

</style></head>
<div id="nav">
<a href="http://www.divcss5.com/">DIVCSS5</a>
<a href="http://www.divcss5.com/">CSS</a>
<a href="http://www.divcss5.com/html/">Html入门基础</a>
<a href="http://www.divcss5.com/rumen/">CSS入门</a>
<a href="http://www.divcss5.com/css-hack/">CSS hack</a>
<a href="http://www.divcss5.com/css-tool/">CSS工具</a>
<a href="http://www.divcss5.com/template/">DIV+CSS模块</a>
<a href="http://www.divcss5.com/shili/">DIV+CSS实例</a>
<a href="http://www.divcss5.com/shouce/">CSS手册</a>  
<a href="http://www.divcss5.com/css-editor.html"
 title="在线CSS编辑器,在线DIV+CSS编辑器">CSS编辑器</a>
<span>&nbsp;</span>

</div>

效果如下:

 



0 0
原创粉丝点击