html中关于侧边导航栏和导航栏的编写

creawse

已于 2023-02-06 21:18:39 修改

阅读量7.9k

点赞数 26

分类专栏： html基础文章标签： html css 前端

于 2023-02-04 17:09:32 首次发布

本文链接：https://blog.youkuaiyun.com/xxxmou/article/details/128882658

版权

本文介绍了如何使用HTML和CSS创建侧边导航栏和下拉导航栏。侧边导航栏利用.box的transition属性实现动画效果，通过:hover伪类改变背景和宽度。下拉菜单借助无序列表和div的相对与绝对定位实现，允许自定义背景颜色。文章附带了实际效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

侧边导航栏

<style>
		.box{
     
			width: 50px;
			height: 50px;
			background-color: #483957;
			transition: width .5s,background-color .2s;
		}
		.box:hover{
     
			background-color: #004FCB;
			width: 200px;
			cursor: pointer;
		}
		.a1{
     
			position: fixed;
			right: 40px;
			top: 200px;
			float: right;
		}
	</style>

其中box属性中transition: width .5s,background-color .2s;表示动画效果。.box:hover鼠标移入事件改变背景颜色，宽度，鼠标变成小手。.a1中对其进行绝对定位，使其固定在屏幕的某个地方。

<div class="box a1"></div>

最后只需在在body中使用div即可完成一个简单的侧边导航栏。
请添加图片描述

下拉导航栏的编写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>css侧边菜单</title>
	<style>
		/* css reset */
		* {
     
			margin: 0;
			padding: 0;
		}
		
		.box1 {
     
			/*设置了第一个div的宽度高度和背景色*/
			align-content: center;
			width: 100%;
			height: 50px;
			background-color: rgb(90, 149, 222);
		}
		
		
		.box2 {
     
			/*设置定位为相对定位宽度可以根据内容进行调整，注意在这不要使用百分比，
			最后水平居中*/
			position: relative;
			width: 1200px;
			margin: auto;
		}
		
		.menu ul {
     
			/*nav的属性，在这取消无序列表的标*/
			list-style-type: none;
		}
		
		.menu ul > li {
     
			/*设置li为左浮动，使列表项在一行*/
			float: left;
		}
		
		.menu a {
     
			/*对a标签进行主要的效果设置 display: inline-block取消下划线*/
			text-decoration: none;
			color: #fff;
			background-color: rgb(90, 149, 222);
			width: 160px;
			height: 50px;
			display: inline-block;
			text-align: center;
			line-height: 50px;
		}
		
		.menu a:hover {
     
			/*鼠标移入事件,1s改变背景色*/
			background-color: rgb(26, 102, 196);
			transition: background-color 1s;
		}
		
		.submenu {
     
			/*设置二级菜单隐藏效果*/
			width

最低0.47元/天解锁文章