DIVCSS横向菜单实例:简单的思路陷下的风格不错的效果_DIV+CSS实例

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

  我们对CSS菜单的介绍也不算少了,可是今天在群里,依然有朋友提出这方面的问题。我不清楚是因为大家没有认真看我的教程,还是因为我在教程内没有向大家介绍清楚,菜单其实是很轻易实现的。

  在很多时候我们为了追求比较好的页面效果,往往专心的去思考如何编写菜单,怎么样有更好的视觉与用户体验,其实复杂并不见得是一件好事。有时候简单的实现,却能达到很好的效果。我们来看今天的例子:(可点击放大图片)


  这是一个蓝色底子的导航条,链接文字是白色,非常清爽,当鼠标悬停的时候,链接文字的背景作出了一个陷下的效果。非常简单,但很明显直白的提醒了用户,你的鼠标已经激活链接了,点一下就可以进一步看里面的内容。

  我们分析一下如何构建这个菜单:

  XHTML方面:建立一个UL无序列表作为容器,里面的列表项LI作为菜单项目,我们给UL无序列表赋予一个ID,即可通过选择器轻松搞定一切CSS样式编码了。我们无需为每一个LI列表项或A链接再设置任何的ID或CLASS。

  CSS方面:我们对UL设置宽与高并将它居于窗口的中间,给它一个背景色。对列表项LI设置为浮动。并让LI之间产生一定的外边距,拉开菜单项之间的距离。我们对LI内的链接A,设置鼠标悬停时的背景图片。这个实例基本搞定了。

  有了上面的分析我们开始动手编码。XHTML代码如下:

示例代码 [www.mb5u.com]
<ul id="nav">
<li><a href="http://www.mb5u.com/" title="">我爱 CSS</a></li>
<li><a href="http://www.mb5u.com/" title="">DIV—CSS</a></li>
<li><a href="http://www.mb5u.com/" title="">布局实例</a></li>
<li><a href="http://www.mb5u.com/" title="">模板下载</a></li>
<li><a href="http://www.mb5u.com/" title="">酷站欣赏</a></li>
<li><a href="http://www.mb5u.com/" title="">Web 标准</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS 手册</a></li>
<li><a href="http://www.mb5u.com/" title="">在线留言</a></li>
</ul>

  我们用CSS对此菜单进行样式定制:

示例代码 [www.mb5u.com]
* {
font-size:12px;
text-decoration:none;
}
#nav {
height:30px;
width:688px;
margin:60px auto;
list-style-type:none;
background:#0046ad;
}
#nav li {
margin:5px 0 0 16px;
float:left;
display:inline;
}
#nav li a {
display:block;
width:68px;
height:20px;
line-height:20px;
text-align:center;
color:#fffeee;
}
#nav li a:hover {
color:#000;
background:url(nav.jpg) 0 0 no-repeat;
}

  我们首先进行了整体布局声明,文字大小设置以及去除下划线。我们设置UL无序列表的高宽以及边距,去除列表项预设标记list-style-type:none;。设置背景色为深蓝色#0046ad。LI列表项设置距顶、距左分别为5px、16px。向左的浮动,并将它们内联。

  设置菜单链接(#nav li a)为块元素。宽度、高度分别是:68px、20px。我们让链接内的文字垂直居中对齐,所以设置行高为20px。我们设置文字水平居中对齐text-align:center。设置文字颜色为近似于白色的淡黄色#fffeee。

  最终我们设置鼠标悬停时(#nav li a:hover)的链接状态,文字颜色为黑色,增加了背景图片nav.jpg并且定位于0 0即左上角,重复方式为不重复。

来源:无忧整理//所属分类:DIV+CSS实例/更新时间:2007-05-25
相关DIV+CSS实例