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

第四部分

第一小部分 

先搞一个div用来存放第四部分并命名为ahead-concent-bottom，写在第三部分后面，

在第四部分的div内再写个div用来存放第一小部分的内容，命名为ahead-copy，

第一部分创建div命名为ahead-pic用来做左侧部分，先用背景颜色代替轮播图（Swiper轮播图后期单独发布）

右侧也创建一个div并命名为ahead-list，用来做右边部分

<!-- 第四部分部分 -->
<div class="ahead-concent-bottom">
	<!-- 小一部分 -->
	<div class="ahead-copy ">
		<!-- 图 -->
		<div class="ahead-pic "></div>
		<!-- 右侧 -->
		<div class="ahead-list">
        </div>
    </div>
</div>

第四部分需要离第三部分有10px的外边距

给第小一部分设置宽度1200px，并居中

左侧部分先用背景颜色粉色代替轮播图（Swiper轮播图后期单独发布），设置宽度600px高度365px，左浮动。 

右侧部分也需要容器（div），并命名为ahead-list 给予右浮动，宽度48%。

.ahead-concent-bottom {
	margin-top: 30px;
}

.ahead-copy {
	width: 1200px;
	margin: 0 auto;
}

.ahead-pic {
	width: 600px;
	height: 365px;
	background: pink;
	float: left;
}
.ahead-list {
	float: right;
	width: 48%;
}

右侧为列表（ul li），span标签内写a标签，并在span下面并列写p标签,并写上各自的内容

	<!-- 第四部分 -->
			<div class="ahead-concent-bottom">
				<!-- 小一部分 -->
				<div class="ahead-copy ">
					<!-- 图 -->
					<div class="ahead-pic "></div>
					<!-- 右侧 -->
					<div class="ahead-list">
						<ul class="top_text">
							<li>
								<span>
									<a href="">
										深入学习宣传贯彻二十大精神 团结引领广大壮乡青年挺膺担当以奋斗姿态激扬青春
									</a>
								</span>
								<p>
									二十大是在全国各族人民迈上全面建设社会主义现代化国家新征程、向第二个百年奋斗目标进军的关键时刻召开的一次十分重要的大会。
									<a href="#" class="more"> [详细]</a>
								</p>
							</li>
							<li>
								<span>
									<a href="https://qnzz.youth.cn/qckc/202305/t20230512_14512946.htm" target="_blank">
										用二十大精神统一思想指引行动 自觉担当起助手和后备军的光荣责任
									</a>
								</span>
								<p>
									二十大报告着眼事业薪火相传、红色江山永不变色，鲜明提出“要把青年工作作为战略性工作来抓”。
									<a href="https://qnzz.youth.cn/qckc/202305/t20230512_14512946.htm" target="_blank" class="more">
										[详细]
									</a>
								</p>
							</li>
						</ul>
						<ul class="bottom-list">
							<li>
								<div>
									<a href="">
										凝聚青春力量 奋进民航高质量发展新征程
									</a>
								</div>
							</li>
							<li>
								<div>
									<a href="https://qnzz.youth.cn/qckc/202305/t20230504_14494875.htm" target="_blank">
										全国各地团组织五四青年节主题活动唱响主旋律
									</a>
								</div>
							</li>
							<li>
								<div>
									<a href="https://qnzz.youth.cn/qckc/202305/t20230509_14505415.htm" target="_blank">
										广东团组织：走在前列建新功 展新时代青年风貌
									</a>
								</div>
							</li>
						</ul>
					</div>
			    <!-- 一小部分,结束 -->
                </div>
            <!-- 第四部分，结束 -->
			</div>
			

css样式

将li的底部做一个2像素，点线，#c72722的颜色，行高32像素，外下边距10px

将li下的span下的a标签颜色为#ca090b，字体字号18px

【详细】那个a标签命名为more，颜色#c72722

将li下的p标签设置颜色#4f4f4f，外下边距15px 行高32px

.top_text li {
	border-bottom: 2px dotted #c72722;
	line-height: 32px;
	margin-bottom: 10px;
}

.top_text li span a {
	color: #ca090b;
	font-size: 18px;
}
.more {
	color: #c72722;
}


.top_text li p {
	color: #4f4f4f;
	margin-bottom: 15px;
	line-height: 32px;
}

接下来是右侧下边（第二个ul）， 使他距离上边12px，

给li做个行高36px，给个图片并让图片不重复，居中

对li中的div做一个外左边距18px（别和背景图片重合）

将li中a标签文字颜色变成#454545的颜色

.bottom-list{
	margin-top: 12px;
}
.bottom-list li {
	line-height: 36px;
	/* 背景图片 */
	background-image: url(../img/dian_icon.png);
	/* 背景图片不重复 */
	background-repeat: no-repeat;
	/* 背景图片位置 ： x 轴方向【水平方向】 y 轴方向【垂直方向】*/
	background-position: 0 center;
}
.bottom-list li div {
	margin-left: 18px;
}

.bottom-list li a {
	color: #454545;
}

第四部分，一小部分结束