首页 > 开发 > CSS > 正文

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

2024-07-11 08:40:34
字体:
来源:转载
供稿:网友

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

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


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

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

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

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

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

示例代码 [www.CuoXIn.com]
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表