CSS导航栏为什么都用 li + a标签

╰+攻爆jí腚メ 2022-12-01 14:25 130阅读 0赞

## 导航菜单为什么都用 li+a 标签 ##

[html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？][html_li_a_a_nav_a_html5]

> `<nav>` 元素表示一个包含多个链接的区域，这些链接指向其他页面或本页面的其他部分

需要注意：

*  并不是所有的链接都要放到 nav 元素里面，该元素内容包含用于构成主要导航区块的部分
 *  如果 nav 元素里面的内容描述的是一个项目列表，那就应该用列表标记（ol、ul等）帮助理解（增强语义）和导航
 *  用户代理（屏幕阅读器）可以通过该元素来确定页面上哪些内容可以直接跳过或者按要求提供选择

通常一个页面导航可以这么写：

<nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    
    
    
    <div id="nav">
       <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

## 水平导航栏 ##

*  先去除默认样式

ul{ 
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    li a{ 
    	text-decoration: none;
    }

两种方式创建水平导航栏

1.  `display:inline-block`
2.  `display:float`

*  `display:inline-block`

ul{ 
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    li{ 
    	display: inline-block;
    	text-align: center;
    	background: #e3e3e3;
    }
    li a{ 
    	text-decoration: none;
    	/* 如果要更改 a 链接的尺寸，需要给它 block 化 */
    	display: inline-block;
    	width: 50px;
    }

*  需要注意： `display:inline-block` ， block 和 block 之间会有一个空格显示

> 浏览器默认行为是吧 inline 元素间的空白字符（空白/换行/tab）渲染成一个空格

*  `display:float`

ul { 
    	list-style: none;
    	padding: 0;
    	margin: 0;
        /* 父级元素 触发BFC */
    	overflow: hidden;
    }
    li { 
    	float: left;
    	text-align: center;
    	background: #e3e3e3;
    }
    li a { 
    	text-decoration: none;
        /* 如果要更改 a 链接的尺寸，需要给它 block 化 */
    	display: inline-block;
    	width: 50px;
    }

*  需要注意：由于有浮动元素，需要清除浮动

## 水平导航栏案例 ##

*  HTML结构

<ul>
    	<li>
    		<input type="radio" id="tab1" name="tab" />
    		<label for="tab1">选项一</label>
    		<div class="content">选项一内容</div>
    	</li>
    	<li>
    		<input type="radio" id="tab2" name="tab" />
    		<label for="tab2">选项二</label>
    		<div class="content">选项二内容</div>
    	</li>
    	<li>
    		<input type="radio" id="tab3" name="tab" />
    		<label for="tab3">选项三</label>
    		<div class="content">选项三内容</div>
    	</li>
    </ul>

*  CSS样式

需要注意：

1.  .content 和 input 都需要先隐藏
2.  `input:checked+label` 表示被选中的单选框后的 label 元素需要做标记
3.  `input:checked~.content` 表示被选中的单选框后的 .content 元素需要显示

效果如下：

![切换][20200828091229904.gif_pic_center]

## 垂直导航 ##

*  和前面不同的是，通过设置 ul 的宽度，使其垂直显示

ul { 
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	width: 50px;
    }
    li { 
    	float: left;
    	text-align: center;
    	background: #e3e3e3;
    }
    li a { 
    	text-decoration: none;
    	display: inline-block;
    	width: 50px;
    }

## 水平导航栏案例 ##

*  HTML 结构

<ol class="tree">
    	<li>
    		<label for="floder1">Folder1</label>
    		
    		<input type="checkbox" id="floder1" checked="checked" />
    		<ol>
    			<li class="file"><a href="#">File1</a></li>
    			<li>
    				<label for="subfloder1">SubFloder1</label>
    				<input type="checkbox" id="subfloder1" checked="checked" />
    				<ol>
    					<li class="file"><a href="#.js">SubFile1</a></li>
    					<li class="file"><a href="#">SubFile2</a></li>
    				</ol>
    			</li>
    		</ol>
    	</li>
    	<li>
    		<label for="floder2">Folder2</label>
    		
    		<input type="checkbox" id="floder2" />
    		<ol>
    			<li class="file"><a href="#">File1</a></li>
    			<li>
    				<label for="subfloder2">SubFloder1</label>
    				<input type="checkbox" id="subfloder2" />
    				<ol>
    					<li class="file"><a href="#.css">SubFile1</a></li>
    					<li class="file"><a href="#">SubFile2</a></li>
    				</ol>
    			</li>
    		</ol>
    	</li>
    	<li>
    		<label for="floder3">Folder3</label>
    		
    		<input type="checkbox" id="floder3" />
    		<ol>
    			<li class="file"><a href="#">File1</a></li>
    			<li>
    				<label for="subfloder3">SubFloder1</label>
    				<input type="checkbox" id="subfloder3" />
    				<ol>
    					<li class="file"><a href="#">SubFile1</a></li>
    					<li class="file"><a href="#">SubFile2</a></li>
    				</ol>
    			</li>
    		</ol>
    	</li>
    </ol>

*  CSS样式

需要注意：

1.  `input+ol>li` 选择紧接在 input 之后的所有 父元素为 ol 的 li
2.  input 需要隐藏

效果如下：

![切换2][2]

[html_li_a_a_nav_a_html5]: https://www.zhihu.com/question/23459855/answer/24781270
[20200828091229904.gif_pic_center]: /images/20221123/be8b7938da1b42ed8b50ece2384ff3fd.png
[2]: /images/20221123/ab39548f757e496e8d3ac1541b40b05b.png