本文介绍如何使用HTML和CSS创建基本及较复杂的导航栏。包括去除列表符号、设置链接样式、实现鼠标悬停效果以及文本居中等技巧。
导航栏的建立
*/ -->
导航栏的建立
Table of Contents
1 最基本的导航栏。
1.1 不添加任何css
1.1.1 代码：
<body> <div id="header"> <ul id="menu"> <li><a href="http://www.sevem.cn">sevem.cn</a></li> <li><a href="http://www.sevem.cn">sevem</a></li> <li><a href="http://www.yahoo.com">Yahoo.com</a></li> <li><a class="last" href="http://www.google.com">Google.com</a></li> </ul> </div>
</body>
1.1.2 表现
表现1 无css
1.3 添加css，设置a标签样式。设置a标签为块状，内边距（避免重叠在一起）
1.3.1 代码
display: block; padding: 8px 50px;
1.3.2 表现
表现3 设块状a标签，内边距
2 较复杂的导航栏
2.2 对a标签的更复杂设置，背景色、文字颜色、去下划线、加分割线
2.2.1 代码
background:#3A4953; * 设置背景色 * color:#fff; * 设置文字颜色 * text-decoration:none; * 去掉下划线 * border-right:1px solid #000; * 在左侧加上分隔线 *
2.2.2 表现
表现5 复杂css
2.3 鼠标悬停效果
2.3.1 代码
background:#146C9C; * 变换背景色 * color:#fff; * 变换文字颜色 * }
2.3.2 表现（鼠标选中"sevem"的效果）
表现6 鼠标悬停a:hover属性
2.4 居中对齐文字，将行高（line-height）和高度(height)设为同一值，可使当行文本垂直居中
2.4.1 代码
width:150px; * 设置宽度 * height:30px; * 设置高度 * line-height:30px; * 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 * text-align:center; * 居中对齐文字 *
2.4.2 表现
表现7 文本对齐
Date: 2011-06-28 23:45:14
HTML generated by org-mode 6.33x in emacs 23
扫一扫
751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
