H5 基础实战练习（5）“学习二十大永远跟党走奋进新征程”主题教育实践活动网页（第二部分）-CSDN博客

本文链接：https://blog.csdn.net/2301_81948351/article/details/140094420

第二部分

我们可以理解为我们需要放入的第二件物品，

所以我们在swiper-container这个div中，第一部分结束的后面，再放置一个div，并命名ahead-nav

第二部分，就决定写在里面了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 页面 -->
		<title>“学习二十大 永远跟党走 奋进新征程”主题教育实践活动”</title>
		<link rel="stylesheet" type="text/css" href="css/111.css" />
	</head>
	<body>
		<div class="swiper-container">
			<!-- 第一部分 大图片-->
			<div class="ahead-banner-new" style="width: 100% ;margin: 0 auto;">
				<img src="img/1.png" style="width: 100%;display: block;">
			</div>
			<!-- 第一部分 大图片结束-->
			<!-- 第二部分 导航栏-->
			<div class="ahead-nav">
				
			</div>
			<!-- 第二部分 导航栏-->
		</div>
	</body>
</html>

在 ahead-nav中，我们大体分为三部分，下方两种不同的红色背景

我们命名为ahead-nav-left、ahead-nav-right，中间有一个绝对定位的导航栏我们命名为ahead-nav-box。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 页面 -->
		<title>“学习二十大 永远跟党走 奋进新征程”主题教育实践活动”</title>
		<link rel="stylesheet" type="text/css" href="css/111.css" />
	</head>
	<body>
		<div class="swiper-container">
			<!-- 第一部分 大图片-->
			<div class="ahead-banner-new" style="width: 100% ;margin: 0 auto;">
				<img src="img/1.png" style="width: 100%;display: block;">
			</div>
			<!-- 第一部分 大图片结束-->
			<!-- 第二部分 导航栏-->
			<div class="ahead-nav">
				<div class="ahead-nav-left"></div>
				<div class="ahead-nav-box"></div>
				<div class="ahead-nav-right"></div>
			</div>
			<!-- 第二部分 导航栏-->
		</div>
	</body>
</html>

ahead-nav-box这个导航栏又分为三部分，左右两张片命名为ahead-nav-box01、ahead-nav-box03，中间则是内容命名为ahead-nav-box02并写入内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 页面 -->
		<title>“学习二十大 永远跟党走 奋进新征程”主题教育实践活动”</title>
		<link rel="stylesheet" type="text/css" href="css/111.css" />
	</head>
	<body>
		<div class="swiper-container">
			<!-- 第一部分 大图片-->
			<div class="ahead-banner-new" style="width: 100% ;margin: 0 auto;">
				<img src="img/1.png" style="width: 100%;display: block;">
			</div>
			<!-- 第一部分 大图片结束-->
			<!-- 第二部分 导航栏-->
			<div class="ahead-nav">
				<div class="ahead-nav-left"></div>
				<div class="ahead-nav-box">
					<div class="ahead-nav-box01"></div>
					<div class="ahead-nav-box02">
						<ul class="ahead-menu">
							<li>
								<a href="">要闻动态</a>
							</li>
							<li>
								<a href="">最新报道</a>
							</li>
							<li>
								<a href="">主题产品</a>
							</li>
							<li>
								<a href="">青年典型</a>
							</li>
						</ul>
						<a href="#">
							<div class="ahead-logo">
								<img src="img/4.png" alt="">
								<img src="img/5.png" alt="">
							</div>
						</a>
					</div>
					<div class="ahead-nav-box03"></div>
				</div>
				<div class="ahead-nav-right"></div>
			</div>
			<!-- 第二部分 导航栏-->
		</div>
	</body>
</html>

制定：

第二部分的div：ahead-nav 宽度为页面宽度且左右居中高度为58px，然后给个相对定位供.ahead-nav-box参考。

ahead-nav-left这个底层左侧背景颜色为 #cb2219红，高度为58像素，宽度与右侧平分，各占整个div的一半，左浮动

ahead-nav-right这个底层右侧背景颜色为 #ad140d红，高度为58像素，宽度与左侧平分，各占整个div的一半，右浮动

ahead-nav-box设高度58px，宽度1200px，设一个绝对定位参考相对定位ahead-nav，从左侧、0右侧0、下侧0为参考点水平居中然后让它上升10px的高度。

.ahead-nav {
	width: 100%;
	margin: 0 auto;
	height: 58px;
	/* 定位：相对定位 */
	position: relative;
}
.ahead-nav-left {
	width: 50%;
	height: 58px;
	background-color: #cb2219;
	/* 左浮动 */
	float: left;
}

.ahead-nav-right {
	width: 50%;
	height: 58px;
	background-color: #ad140d;
	/* 右浮动 */
	float: right;
}

.ahead-nav-box {
	width: 1200px;
	height: 68px;
	/* 定位:绝对定位; */
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}

然后我们写：ahead-nav-box里面的内容左右01，03放入背景图设置不重复，设置01，03高度为68px，宽度为25px，设置01左浮动，03右浮动。02宽度1150px，高度68px，左浮动，且也放入背景图。


.ahead-nav-box01 {
	width: 25px;
	height: 68px;
	/* 背景图片 */
	/* background-image: url(img/2.png); */
	background: url(../img/2.png) no-repeat;
	/* 左浮动 */
	float: left;
}

.ahead-nav-box02 {
	width: 1150px;
	height: 68px;
	/* 左浮动 */
	float: left;
	/* 背景图片 */
	background-image: url(../img/1.gif);
}

.ahead-nav-box03 {
	width: 25px;
	height: 68px;
	/* 背景图片 */
	background-image: url(img/3.png);
	background: url(../img/3.png) no-repeat;
	/* 右浮动 */
	float: right;
}

现在代码所完成的示例图

由于ul li有默认样式所以我们把样式取消掉

ul li{
list-style: none;
}

我们给li一个左浮动，让他们横着排列，给出宽度118px，高度36px；左右边距59px。

给a标签中的字体一个颜色，字号，并文本居中，转化为块标签，并垂直居中。

ul整体向下10px，让其左浮动，并设宽度980px，高度36px。

.ahead-menu li {
	float: left;
	width: 118px;
	height: 36px;
	margin: 0 59px;
}

.ahead-menu li a {
	/*字体颜色*/
	color: #fff;
	/*字体大小*/
	font-size: 18px;
	/* 文本内容水平居中 */
	text-align: center;
	/* 将行标签 转化为 块标签 */
	display: block;
	/* 文本内容垂直居中：height = line-height */
	height: 36px;
    /*行高*/
	line-height: 36px;
}
.ahead-menu {
	width: 980px;
	height: 36px;
	/* 内边距 */
	padding-top: 10px;
	float: left;
}

取消文字下划线

/*去除a标签的文字下边的默认横线*/
a {
	/* 文本装饰 */
	text-decoration: none;
	color: #fff;
}

给logo右浮动，使他在ul的右边然后给它设置宽度为130px，并使logo距离上边距130px，左右边距20px，下边距为0。

.ahead-logo {
	width: 130px;
	float: right;
	padding: 15px 20px 0;
}

内容文字取消下划线并设置为白色

a {
	/* 文本装饰 */
	text-decoration: none;
	color: #fff;
}

第二部分结束

H5 基础实战练习（5）“学习二十大 永远跟党走 奋进新征程”主题教育实践活动网页 （第二部分）

H5 基础实战练习（5）“学习二十大永远跟党走奋进新征程”主题教育实践活动网页（第二部分）