运用UL及LI构建菜单,不但速度上比较快,而且语义更明确,对搜索引擎也非常友好,但很多朋友认为制作起来比较烦,其实不然,CSS菜单的制作其实是非常简单的,今天的这款菜单思路非常简单,但效果还算不错,看下面的效果图:
这与前面所介绍的一些菜单有相似之处,我们不难看出,些微的改变就可以制作出不同的效果,你也可以学习前面我们的一些案例,进一步加深菜单制作的有关知识。
我们看今天这款菜单的制作过程,首先看看XHTML代码:
Example Source Code
[www.52css.com]
<ul id="menu">
<li><a href="http://www.52css.com/" title="">52CSS.com首页</a></li>
<li class="current"><a href="http://www.52css.com/" title="">Div+CSS教程</a></li>
<li><a href="http://www.52css.com/" title="">CSS布局实例</a></li>
<li><a href="http://www.52css.com/" title="">CSS2.0教程</a></li>
<li><a href="http://www.52css.com/" title="">CSS酷站欣赏</a></li>
<li><a href="http://www.52css.com/" title="">CSS模板下载</a></li>
</ul>
没有什么特别之处,需要注意的是我们为第二个列表项“Div+CSS教程”指定了一个类class="current"。这是我们用来让CSS精确的选择到当前页效果的钩子。下面我们逐一看CSS编码:
Example Source Code
[www.52css.com]
* {
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body {
background:#ccc;
}
整体布局声明:文字大小为13px,加粗,去除装饰线,边距与填充均为零。
设置body的背景色为灰色#ccc。
Example Source Code
[www.52css.com]
#menu {
list-style-type: none;
border:1px solid #fff;
margin:50px auto;
width:770px;
height:30px;
overflow:hidden;
background:#000 url(52css.com_b.png) 0 0 repeat-x;
}
设置Ul即#menu的样式,去除列表项预设标记,设置边框为一象素的白色实线,上下边距为50px,左右边距为自动,实现了菜单的水平居中对齐,设置宽与高分别是:770px、30px。溢出为隐藏,设置背景色为黑色,背景图片为52css.com_b.png,位于0 0,水平方向重复。
Example Source Code
[www.52css.com]
#menu li {
border-right:1px solid #fff;
float:left;
}
#menu li a {
display:block;
text-align:center;
color:#fff;
line-height:30px;
padding:0 10px;
}
列表项li的样式设置,右边框一象素的白色实线,向左浮动。这样设置即实现了菜单有了一个闭合的白线区域,而且浮动让菜单水平方向排列。
菜单链接A的样式,设置为块元素,文字居中对齐,文字颜色为白色,行高为30px,实现了文字的垂直居中对齐,填充设置为上下0,左右10px,使得文字与左右边线有一定的距离。
Example Source Code
[www.52css.com]
#menu li a:hover,#menu li.current {
background:#fff url(52css.com_a.png) 0 0 repeat-x;
}
设置链接A的悬停样式,以及当前页的样式。请注意,这两种状态下它们的表现是一样的,所以我们用群组选择器:“#menu li a:hover,#menu li.current”一次性设置。背景色为白色,背景图片为“52css.com_a.png”,位于0 0,水平方向重复。
好了,致此我们这款菜单的制作就结束了,我们看看最终的效果:点此查看
分享到:
相关推荐
DIVCSS网页布局实例:十步学会用CSS建站.pdf
DIV CSS布局教程:应用ul、li实现表格形式DIV CSS布局教程:应用ul、li实现表格形式DIV CSS布局教程:应用ul、li实现表格形式
div css实例div css实例div css实例
XHTML代码很简单,就是一个无序列表,不过我们对标题和时间设置了不同的CLASS以方便控制。 Example Source Code
非常不错的页面制作方法,Div CSS,推荐给喜欢网页制作的朋友.
《DIV+CSS 3.0:网页布局案例精粹》系统地介绍了CSS样式的基础理论和实际应用技术,并结合实例来介绍使用Div+CSS布局制作网页的方法和技巧。在介绍使用CSS样式进行设计的同时,还结合实际网页制作中可能遇到的问题,...
DIVCSS网页布局实例:十步学会用CSS建站[整理].pdf
DIV+CSS布局:CSS浮动float属性详解 不解释
CSS+DIV设计实例:实现让多个DIV排列时居中.txt
DivCSS布局中表单的美化一直是CSSer头疼的问题,特别是Select样式的美化,更是头痛。今天向大家展示实例,希望对大家的学习工作有所帮助。 演示:http://www.websjy.com/club/websjy_index/select/
13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 ...
div css导航菜单用CSS样式表处理斜角导航条 div css导航菜单用CSS样式表处理斜角导航条 div css导航菜单用CSS样式表处理斜角导航条
简单的网页制作案例(DIV+CSS完成):留学网
div+css 网站实例 教程 css布局
24个DIV+CSS 超级经典实例 源代码 几乎包含了DIV+CSS技术的所有知识点
淘宝菜单,div+css菜单,菜单,淘宝菜单,div+css菜单,菜单
div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例div+css 切图实例
几个漂亮网站首页的源码(全),学习css和自己设计网页的一大助力。
13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础...
红色多级下拉菜单,是学习Div CSS jquery制作菜单的一个好实例,可以显示5级子菜单,关于本菜单中的JS封装,作者其实是想利用一些私有方法和变量,但是这么包装,感觉有些不伦不类,既然还是要搞了半天,还是返回的...