导航栏的建立
*/ -->
导航栏的建立
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