Web页面的导航菜单一般用列表项实现，根据导航的位置划分：纵向导航和横向导航。我们先从最简单的纵向导航开始
纵向导航
下面是仿照百度新闻页面的导航菜单，HTML标记如下
1 <!DOCTYPE html> 2 <html lang="zh_ch"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>HTML 5 Nav</title> 6 <style> 7 </style> 8 </head> 9 <body> 10 <nav class="nav-list"> 11 <ul> 12 <li><a href="http://news.baidu.com/view.html">首页</a></li> 13 <li><a href="http://baijia.baidu.com/" id="nav-hot-link" target="_blank">百家</a></li> 14 <li><a href="http://jian.news.baidu.com/" target="_blank"><div class="icon-new"></div>个性推荐</a></li> 15 <li><a href="http://sh.news.baidu.com/">上海</a></li> 16 <li><a href="http://internet.baidu.com/">互联网</a></li> 17 <li><a href="http://media.baidu.com/">传媒</a></li> 18 <li><a href="http://auto.baidu.com/">汽车</a></li> 19 <li><a href="http://yule.baidu.com/">娱乐</a></li> 20 <li><a href="http://mil.news.baidu.com/">军事</a></li> 21 <li><a href="http://finance.baidu.com/">财经</a></li> 22 <li><a href="http://sports.baidu.com/">体育</a></li> 23 <li><a href="http://guonei.news.baidu.com/">国内</a></li> 24 <li><a href="http://shehui.news.baidu.com/">社会</a></li> 25 <li><a href="http://tech.baidu.com/">科技</a></li> 26 <li><a href="http://guoji.news.baidu.com/">国际</a></li> 27 <li><a href="http://lady.baidu.com/">女人</a></li> 28 <li><a href="http://fangchan.news.baidu.com/">房产</a></li> 29 <li><a href="http://youxi.news.baidu.com/">游戏</a></li> 30 <li><a href="http://shipin.news.baidu.com/">视频</a></li> 31 </ul> 32 </nav> 33 </body> 34 </html>
HTML 5新标签nav在语义上适合做页面导航，因此我们选择它作为页面导航的容器
预览之后，在页面中显示的是一个纵向上下排列的无序列表项目，因为<li>标签是块级元素，所以列表显示为上下排列
美化导航
默认的纵向导航毫无美感，现在我们需要用CSS来美化导航样式
首先清楚默认的盒子内外边距
* {margin:0; padding:0;}
这样的话，页面中所有元素的内外边距，都被重置为0 ，这样做的好处是为了后面添加自己的内外边距
导航位置
导航菜单放置在页面中什么位置呢？上、下、左、右？这取决于你项目需要，默认情况下，导航菜单是放置在页面左上角的，因为这是HTML盒模型的默认定位方式。下面我们将纵向导航调整到页面的左侧
nav {margin:20px; width:120px;}
先将nav标签的外边距设置为20px，并设置了盒子的宽度为120px
采用绝对定位的方式，将导航设置到页面的左侧
nav{position:absolute;right:1px;top:1px;}
添加样式
下面CSS样式，设置了ul边框、样式、颜色、圆角、内边距
.nav-list ul {border:1px solid #f00; border-radius:20px;padding:6px;}
去掉列表项的下划线
.nav-list li {list-style-type:none; padding:6px 10px;}
默认情况下<li>列表项是带有下划线的，这里通过CSS样式清楚了这种效果
为每个列表项，添加自己的下划线，以下代码利用了“非首位子选择符”，它是紧邻同胞选择符的升级版，它实现了为除了列表的第一项外，其他的每个列表项目顶部都添加一条下划线效果，这里的下划线是利用盒子的边框显示的
.nav-list li + li {border-top:1px solid green;}
为链接添加样式
/*为链接添加样式*/
.nav-list a {text-decoration:none;font-size:20px;font-weight:400; color:#000;;}
/*悬停高亮*/
.nav-list a:hover {color:green;}
时间： 2024-10-05 05:08:22