CSS简单设计网站横向导航

In: 简单代码

21 Nov 2008

网站导航作为一个网站中最重要的元素,直接导航着访问者对网站内容的访问的工具。今天要和大家分享一下网站横向导航的设计,当然,只是一种初级的设计样式:

我们都知道css布局的特点就是帮助我们实现表现与内容的分离,异于我们经常在html使用的table属性。那下面先认识一下内容部分的代码如何编写:

<ul id="nav">
  <li><a href="http://www.moneyding.cn"id="current" >首页</a></li>
  <li><a href="http://www.moneyding.cn/tags.asp">tagcloud</a></li>
  <li><a href="http://www.moneyding.cn">留言板</a></li>
  <li><a href="http://www.near360.com">身边网</a></li>
  <li><a href="http://www.moneyding.cn/sitemap.xml">sitemap</a></li>
  <li><a href="http://www.moneyding.cn">联系</a></li>
  </ul>

在代码当中,我们为ul定义了一个id叫nav,同时也为在第一个a标签中,添加了一个新的id叫current,表示当前页。

然后下面继续介绍css部分的编写:

#nav li{
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#ececec;
margin-left:2px;
}
#nav li a:hover{
background-color:#bbbbbb;
color:#ffffff;
}
#nav li a#current{
background-color:#2788da;
color:#ffffff;
}
#nav{
height:26px;
border-bottom:2px solid #2788da;
}

float定义了导航栏自身向左浮动,text-decoration:noe去掉了本身ul属性的黑点,display:block使得1链接对象的显示方式由一段文本改为一个块状对象,使用了display:block之后,a链接对象将能够像div和其他源于一样成为一个块状对象,就可以使用css的外边距、内边距、边框等属性给a链接标签加上一系列的样式了。至于border-bottom就是一条下边看框罢了。然后最后的效果就是下图:

转载请注明来自money的博客www.moneyding.cn以及原文链接

 

Comment Form

About Money

以前追逐的现在发觉都是浮云,一直从事SEM工作,略懂SEO,PPC,WA,SMM等Online Marketing。梦想在电商领域有点建树,并且一直为之付诸努力,欢迎志同道合的朋友相互交流学习。

Photostream

  • 肖然: 我还才起步呢,需多多坚持。 [...]
  • 韩佳伦: 站点:韩佳伦个人网站 - Fighting For Life 网址:http://www.hanjialun.com/ 希望可� [...]
  • 马力: 你好,我是做独立网店建设的,有关电子商务这方面的!认识一下 [...]
  • 跑龙龙: 博主,换链接不??http://www.hctroof.net [...]
  • 牛仔: 赚钱才是王道,呵呵 [...]