论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS菜单实例:简洁的效果火红的围城

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:52

效果图如下:


  HTML代码我们就飘过吧,都成了老生常谈了。不清楚大家会不会厌倦。但知道是需要多巩固的,尤其是你认为已经把握了的知识,在实际操作的时候就很可能在这些小问题上出现问题。而且些微的变化往往形成完全不同的视觉效果,我们除了把握编码的知识,更应该熟悉网页制作工作的乐趣,不唠叨了,让我们上路吧,看CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.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;
}

  我们今天换个花样,以代码块的形式向大家介绍各区域字母的意义何在:
  1、整体布局声明,文字大小及居中。www.21shipin.com原创,转载请注明出处。
  2、声明body的背景色,此例中,好象背景有无颜色并不重要,但我们还是这样设置吧。
  3、菜单列表UL的一些设置,宽度为700px,距顶20并左右居中对齐,底部不作声明即设置成零。
    背景色为#f60,我们那火红的融炉就是它营造的。设置填充,上下8px、左右12px。
  4、菜单列表项LI的设置,内联对象并取消列表项预设标记。
  5、设置菜单链接元素、已访问元素的样式。www.21shipin.com原创,转载请注明出处。
    向左浮动,右边距为8px,让各“城”之间有一定的距离,不要“城城相连”。
    设置填充上下2px、左右5px。取消链接文字的下划线。
    文字颜色设置为白色#fff。“砌城墙”外边框1px的实线。
    什么?边框的颜色与背景色一样了?确实是一样了!
    但这样不会出问题,下面我们有一个小试验,假如去掉这个边框的设置,
    菜单会让你有触发“地震”的感觉,我们这样设置是为了占位。
  6、菜单链接的激活HOVER效果,文字颜色变了一点儿,“城墙”即外边框成为白色。
  7、菜单的当前页效果。文字颜色火红火红的,“城墙”即外边框成为白色,内部背景一片惨白。

  看下面的去掉第五代码块边框设置而触发的“地震”!

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  下面是此例的最终效果,这样的围城,你进不进?
div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058