CSS菜单实例：简洁的效果火红的围城CSS布局实例CSS菜单实例：简洁的效果火红的围城-CSS布局实例
『 更新时间：2007-04-09 』『 字体：大 中 小 』『 作者：52CSS | 来源：无忧整理 』
在前面的文章中学习《用列表ul制作CSS横向菜单的基础知识》http://www.mb5u.com/article.asp?id=395。以及《蓝绿色调》http://www.mb5u.com/article.asp?id=396 《会动的小竖条》http://www.mb5u.com/article.asp?id=401 《红蓝炫》http://www.mb5u.com/article.asp?id=404 等等一些CSS横向菜单的制作方法。今天我们继续讨论CSS横向菜单的制作，简洁的效果 火红的围城。www.mb5u.com原创，转载请注明出处。效果图如下：
HTML代码我们就飘过吧，都成了老生常谈了。不清楚大家会不会厌倦。但知道是需要多巩固的，尤其是你认为已经把握了的知识，在实际操作的时候就很可能在这些小问题上出现问题。而且些微的变化往往形成完全不同的视觉效果，我们除了把握编码的知识，更应该熟悉网页制作工作的乐趣，不唠叨了，让我们上路吧，看CSS代码：
Example Source Code [www.mb5u.com]
我们今天换个花样，以代码块的形式向大家介绍各区域字母的意义何在：
1、整体布局声明，文字大小及居中。www.mb5u.com原创，转载请注明出处。
2、声明body的背景色，此例中，好象背景有无颜色并不重要，但我们还是这样设置吧。
3、菜单列表UL的一些设置，宽度为700px，距顶20并左右居中对齐，底部不作声明即设置成零。
背景色为#f60，我们那火红的融炉就是它营造的。设置填充，上下8px、左右12px。
4、菜单列表项LI的设置，内联对象并取消列表项预设标记。
5、设置菜单链接元素、已访问元素的样式。www.mb5u.com原创，转载请注明出处。
向左浮动，右边距为8px，让各“城”之间有一定的距离，不要“城城相连”。
设置填充上下2px、左右5px。取消链接文字的下划线。
文字颜色设置为白色#fff。“砌城墙”外边框1px的实线。
什么？边框的颜色与背景色一样了？确实是一样了！
但这样不会出问题，下面我们有一个小试验，假如去掉这个边框的设置，
菜单会让你有触发“地震”的感觉，我们这样设置是为了占位。
6、菜单链接的激活HOVER效果，文字颜色变了一点儿，“城墙”即外边框成为白色。
7、菜单的当前页效果。文字颜色火红火红的，“城墙”即外边框成为白色，内部背景一片惨白。
看下面的去掉第五代码块边框设置而触发的“地震”！
Source Code to Run [www.mb5u.com]
下面是此例的最终效果，这样的围城，你进不进？www.mb5u.com原创，转载请注明出处。
Source Code to Run [www.mb5u.com]
HTML代码我们就飘过吧，都成了老生常谈了。不清楚大家会不会厌倦。但知道是需要多巩固的，尤其是你认为已经把握了的知识，在实际操作的时候就很可能在这些小问题上出现问题。而且些微的变化往往形成完全不同的视觉效果，我们除了把握编码的知识，更应该熟悉网页制作工作的乐趣，不唠叨了，让我们上路吧，看CSS代码：
模板无忧-MB5u__com
Example Source Code [www.mb5u.com]* {
font-size:12px;
text-align:center;
}
body {
background:#f0f0f0;
}
#nav {
width:700px;
margin:20px auto 0 auto;
background:#f60;
padding:8px 12px;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:8px;
padding:2px 5px;
text-decoration: none;
color:#fff;
border:1px solid #f60;
}
#nav li a:hover {
color:#ff0;
border:1px solid #fff;
}
#nav li a#current {
color:#c00;
border:1px solid #fff;
background:#fff;
}
font-size:12px;
text-align:center;
}
body {
background:#f0f0f0;
}
#nav {
width:700px;
margin:20px auto 0 auto;
background:#f60;
padding:8px 12px;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:8px;
padding:2px 5px;
text-decoration: none;
color:#fff;
border:1px solid #f60;
}
#nav li a:hover {
color:#ff0;
border:1px solid #fff;
}
#nav li a#current {
color:#c00;
border:1px solid #fff;
background:#fff;
}
我们今天换个花样，以代码块的形式向大家介绍各区域字母的意义何在：
模板无忧-Mb5u.com
1、整体布局声明，文字大小及居中。www.mb5u.com原创，转载请注明出处。
2、声明body的背景色，此例中，好象背景有无颜色并不重要，但我们还是这样设置吧。
3、菜单列表UL的一些设置，宽度为700px，距顶20并左右居中对齐，底部不作声明即设置成零。
背景色为#f60，我们那火红的融炉就是它营造的。设置填充，上下8px、左右12px。
4、菜单列表项LI的设置，内联对象并取消列表项预设标记。
5、设置菜单链接元素、已访问元素的样式。www.mb5u.com原创，转载请注明出处。
向左浮动，右边距为8px，让各“城”之间有一定的距离，不要“城城相连”。
设置填充上下2px、左右5px。取消链接文字的下划线。
文字颜色设置为白色#fff。“砌城墙”外边框1px的实线。
什么？边框的颜色与背景色一样了？确实是一样了！
但这样不会出问题，下面我们有一个小试验，假如去掉这个边框的设置，
菜单会让你有触发“地震”的感觉，我们这样设置是为了占位。
6、菜单链接的激活HOVER效果，文字颜色变了一点儿，“城墙”即外边框成为白色。
MB5U_coM
7、菜单的当前页效果。文字颜色火红火红的，“城墙”即外边框成为白色，内部背景一片惨白。
看下面的去掉第五代码块边框设置而触发的“地震”！
Source Code to Run [www.mb5u.com] 模板无忧-Mb5u.com
下面是此例的最终效果，这样的围城，你进不进？www.mb5u.com原创，转载请注明出处。
Source Code to Run [www.mb5u.com] 模板无忧-Mb5u.com
- 1.请勿发表广告及违法言论.
- 2.CSS菜单实例：简洁的效果火红的围城,版权归原作者.
-
昵称:
验证:
评论加载中....