导航栏的实现

怎么实现比较简单的导航栏
例如想京东那一样
图片一

比较简单的方法是,可使用有序列表或者无序列表都是OK的

<!-- 无序列表 -->
		<ul  > 
		    <li>深圳</li>
			<li>广州</li>
			<li>茂名</li> 
		</ul>
		
		<!-- 有序列表 -->
		<ol> 
	    <li>深圳</li>
		<li>广州</li>
		<li>茂名</li>
		</ol>

在这里插入图片描述
实现导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
	</head>
	<body>
		<!-- 我使用ul 来实现 -->

		<ul>
			<li>深圳</li>
			<li>广州</li>
			<li>茂名</li>
			<li>吴川</li>
			<li>汕头</li>
			 
		</ul>

		<!-- style它的位置其实是可以任意放在,
			不一定要放在head里面的 -->
		<style>
			/* 去掉ul自带的点/或者数字的方法
			 list-style-type:none - 移除列表前小标志(或者数字)。
			 */

			/* 切记 style标签里面只能放入注释或者选择器 */

			/* 选择器很多种的,我现在使用标签选择器 标签的选择器的语法是  标签名称{} */

			ul {
				
				list-style-type:none;
				/*padding主要是去掉内边距
								  因为 li 与ul 之间实际还有一段距离*/
				
				padding:0;
				
				/* 背景给个棕色*/
			 background-color:burlywood;
			  
			  /* 长宽高我都设置100 */
			  height: 100px;width: 100px;
			  
			  /* 字体居中 */
			  text-align: center;
			 
			}
			
			/* 现在开始要准备鼠标移动过去分别里变色了
			 有一个行为 叫做 hover 表示鼠标移动过去的状态
			这个需要伪类选择器组合    看见一个冒号的表示伪类选择器
			 */
			ul li:hover{
				/* 鼠标移动过去变绿色 */
				background-color: #3CB371;
			}
		</style>
	</body>
</html>

0 条评论