论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: 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,表格,视频教程

DIVCSS实例教程:蔚蓝色的海洋漂亮的CSS纵向菜单

文章类别:div+css布局 | 发表日期:2008-10-5 15:32:50



  一个具有良好视觉网站的建立,离不开几大要素,头部的设计,菜单导航的设计,内容区块的组织,底部的设计等等。可见菜单在网页设计中有着举足轻重的作用,一个漂亮的菜单会为整个网页添加靓丽,也或者一个菜单就“撑”起了整个网页的视觉,成为访客视线的中心。



  今天我们共同来完成一个漂亮的CSS纵向菜单的制作,我给它起了一个名字:蔚蓝色的海洋。我们看最终完成时的效果:


  下面我们开始制作这款菜单,假如你有爱好,我们一起动手吧,光说不练是不能很快的提高编码技巧的,只有勤于练习、多动力,会有意想不到的收获。看下面的XHTML代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<ul id="menu">
<li><a href="#" title="">21shipin.com首页</a></li>
<li><a href="#" title="">Div CSS教程</a></li>
<li><a href="#" title="">CSS布局实例</a></li>
<li><a href="#" title="">CSS2.0教程</a></li>
<li><a href="#" title="">CSS酷站欣赏</a></li>
<li><a href="#" title="">CSS模板下载</a></li>
</ul>

  上面的XHTML代码没啥好说的了,一个基本的UL无序列表,及若干列表项作为菜单的内容。我们看下面的CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
* {
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
background:#fff;
}

  整体布局声明:文字大小,加粗,去除装饰线,边距及填充,背景色。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#menu {
list-style-type: none;
margin:50px auto;
width:200px;
}

  设置UL无序列表#menu的样式:去除列表项预设标记,上下边距为50px,左右边距为auto,实现水平居中对齐。宽度为200px。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#menu li a {
display:block;
width:200px;
height:36px;
line-height:36px;
text-indent:36px;
text-align:left;
color:#fff;
background:#fff url(21shipin.com_a.jpg) 0 0 no-repeat;
}
#menu li a:hover {
text-indent:46px;
background:#fff url(21shipin.com_b.jpg) 0 0 no-repeat;
}

  设置链接a的样式:块元素,宽度与高度分别是200px、36px,为了实现文字垂直居中于菜单区域我们定义行高为36px,文字缩进36px,文字对齐方式为居左对齐,文字颜色为白色#fff。背景设置为白色,背景图片为“21shipin.com_a.jpg” 位于 0 0。不重复。

  设置链接悬停时a:hover的样式,文字缩进增加到46px,背景图片发生了变化,图片变成了“21shipin.com_b.jpg”。
  至此,我们的这款菜单就制作完成了。点击这里查看效果!
  或许你认为在鼠标悬停时文字缩进的改变效果并不好,我们可以去除这一改变,点击这里查看效果!
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058