简单设置一个哔哩哔哩的导航栏

最新推荐文章于 2025-01-25 22:45:25 发布

薇鹅酱。

最新推荐文章于 2025-01-25 22:45:25 发布

阅读量2.5k

点赞数 6

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

本文链接：https://blog.csdn.net/qq_51309939/article/details/124060296

版权

Web 专栏收录该内容

1 篇文章

订阅专栏

本文展示了如何使用HTML和CSS创建一个包含多种功能的导航栏，包括左侧logo、中间搜索框（未实现）和右侧菜单项。CSS代码详细定义了各个元素的样式，如布局、尺寸、颜色、阴影和悬停效果。通过这段代码，读者可以了解到前端开发中导航栏设计的基本原理和技巧。

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

不说废话直接上代码块

这是导航栏的css

/* 网页主体*/
body{
	min-width: 1100px;
	margin: 0px;
}
.ice-cream{
	max-width: 2560px;
	box-sizing: border-box;
	display: block;
	min-width: 1100px;
	margin: 0 auto;
	padding: 0px;

}
/*网页的大头(上半部分)*/
.anime-large-header{
	height:600px;
}
/* 头*/
.anime-header{
	display: flex;
	height: 72px;
	justify-content: space-between;
}
/*头的左部分*/
.anime-header-left-entry{
	margin: 0px;
	width: 600px;
	height: 72px;
}
/*头的右部分*/
.anime-header-right-entry{
	margin: 0px;
	width: 600px;
	height: 72px;
}
/*头的列表*/
.anime-header-list{
	height: 72px;
	margin:0 10px ;
	padding: 0px;
	display: flex;
	list-style-type: none;
}
/*头的列表的元素*/
.anime-header-list .anime-header-logo {
	margin: 0 15px;
	display: flex;
	align-items: center;
}
.anime-header-list .anime-header-list-element{
	margin: 20px 15px;
	display: flex;
	font-size: 15px;
	background-color: rgba(200,200,200,0.5);
	border-radius: 10px;
	align-items: center;
	box-shadow: 0px 0px 15px aliceblue;
}
.anime-header-logo:hover{
	margin-top: 5px ;
}
.anime-header-list-element:hover{
	margin-top: 22px;
}
/*大头的背景贴图*/
.anime-header-background{
	display: flex;
	height: 200px;
	background-image: url(../img/073.png);
	background-position: 50% 25%;
	margin-top: -72px;
}
/*超链接*/
a:link{
	color: aliceblue;
	text-decoration: none;
}
a:visited{
	color: aliceblue;
	text-decoration: none;
}

这是HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../css/导航首页.css"/>
		<title></title>
		
	</head>
	<body>
	<div class="ice-cream">
		<div class="anime-large-header">
				<div class="anime-header">
					<div class="anime-header-left-entry">
						
							<ul class="anime-header-list">
								<div class="anime-header-logo">
									<a href="#" target="_self">
										<img src="../img/haha.png" alt="首页贴图" width="30px" height="28px"/></a></div>
								<li class="anime-header-list-element"><a href="#">首页</a></li>
								<li class="anime-header-list-element"><a href="#">番剧</a></li>
								<li class="anime-header-list-element"><a href="#">直播</a></li>
								<li class="anime-header-list-element"><a href="#">游戏中心</a></li>
								<li class="anime-header-list-element"><a href="#">会员购</a></li>
								<li class="anime-header-list-element"><a href="#">漫画</a></li>
								<li class="anime-header-list-element"><a href="#">赛事</a></li>
							</ul>
						</a>
					</div>
					<div class="anime-header-center-Search"></div>
					<div class="anime-header-right-entry">
					<ul class="anime-header-list">
						<li class="anime-header-list-element"><a href="#">登录</a></li>
						<li class="anime-header-list-element"><a href="#">大会员</a></li>
						<li class="anime-header-list-element"><a href="#">消息</a></li>
						<li class="anime-header-list-element"><a href="#">动态</a></li>
						<li class="anime-header-list-element"><a href="#">收藏</a></li>
						<li class="anime-header-list-element"><a href="#">历史记录</a></li>
						<li class="anime-header-list-element"><a href="#">创作</a></li>
					</ul>
					</div>
				</div>
				<div class="anime-header-background"></div>
				</div>
			</div>
	</div>
	</body>
</html>

效果如图：