简单的导航栏

Xiao_野猪

已于 2022-03-03 19:32:16 修改

阅读量182

点赞数 1

分类专栏： html 文章标签： html5 前端

于 2022-03-03 19:24:30 首次发布

本文链接：https://blog.csdn.net/qq_35812301/article/details/123261096

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

怎么实现比较简单的导航栏

导航栏的实现

导航栏的实现

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

比较简单的方法是,可使用有序列表或者无序列表都是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>

在这里插入图片描述

原代码下载

Xiao_野猪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的导航栏

怎么实现比较简单的导航栏导航栏的实现导航栏的实现怎么实现比较简单的导航栏例如想京东那一样比较简单的方法是,可使用有序列表或者无序列表都是OK的 <ul > <li>深圳</li> <li>广州</li> <li>茂名</li> </ul>  <ol>
复制链接

扫一扫

专栏目录