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

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

在第二部分后面在创建一个div，并命名为ahead-title，在ahead-title这个div中创建a标签并命名ahead-titlek写入内容扎实抓好主题教育为奋进新征程凝心聚力。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 页面 -->
		<title>“学习二十大 永远跟党走 奋进新征程”主题教育实践活动”</title>
		<link rel="stylesheet" type="text/css" href="css/new_file.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 class="ahead-title">
				<a class="ahead-titlek" href="https://news.youth.cn/sz/202304/t20230403_14430671.htm" target="_blank">
					扎实抓好主题教育 为奋进新征程凝心聚力
				</a>
			</div>
			<!-- 第三部分，扎实抓好主题教育结束 -->
		</div>
	</body>
</html>

接下来咱们写c3样式

先设置第三部分背景颜色以及边距上15px，右左0，下20px

设置a标签：行转换块、宽度、文字：字号、颜色并水平居中

设置a标签使鼠标放置其上层时出现下划线

.ahead-title {
	/* 背景颜色 */
	background-color: #fffae8;
	/* 内边距：padding */
	padding: 15px 0px 20px 0px;
}
.ahead-titlek {
	color: #d41703;
	font-size: 30px;
	width: 1200px;
	display: block;

	margin: 0 auto;
	text-align: center;
}

/* 当我们鼠标放到a标签上的时候，让a显示下划线 */
.ahead-titlek:hover {
	/* 显示文本装饰【也就是我们说的下划线】 */
	text-decoration: underline;
}

第三部分结束