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

第四部分，第四小部分

这部分分为三部分，青年典型，左边的四张ul图片，还有右边的盒子里的ul超链接语句

第四部分，先在第三部分后面创建第四部分的“盒子（div）”，并命名为“ahead-copy clearfix”，

在第四部分内部创建一个“盒子”命名为“ahead-colum”，放入图片“青年典型”

并在“ahead-colum”的内部在创建个“盒子”并命名为“ahead-more”，存放超链接“更多>>”然后给了个个红色的样式“#c72722”。

<div class="ahead-colum">
<img src="img/03.png">
    <div class="ahead-more">
    <a href="#" style="color: #c72722;">更多>></a>
    </div>
</div>

青年典型样式 ：边距上35px，右左0，下45px，且文本居中。

更多：将其右浮动，字体大小14px，右边距10px。

.ahead-colum {
	margin: 35px 0 45px;
	text-align: center;
}

.ahead-more a {
	float: right;
	font-size: 14px;
	margin-right: 10px;
}

接下来做左边的四张图片

在ahead-copy clearfix的内部在创建一个ul，命名为ahead-youth，后面我给了一个以做好的左浮动样式的名字“floleft”直接用

在<ul><li>内创建个盒子并命名为“aheadyouths”方便之后的样式的添加

<div class="ahead-colum">
<img src="img/03.png">
    <div class="ahead-more">
    <a href="#" style="color: #c72722;">更多>></a>
    </div>
</div>

<ul class="ahead-youth floleft">
    <li>
        <div class="aheadyouths">
            <img src="img/9.jpg">
        </div>
    </li>
    <li>
        <div class="aheadyouths">
            <img src="img/10.png">
        </div>
    </li>
    <li>
        <div class="aheadyouths">
            <img src="img/11.jpg">
        </div>
    </li>
    <li>
        <div class="aheadyouths">
            <img src="img/12.png">
        </div>
    </li>
</ul>

样式

给.ahead-youth设置一个宽度796，留下右边用来放置上方提到的“右边的盒子里的ul超链接语句”

将里面的图片左浮动且给右边距13px及下边距13px，

设制图片高度285px宽度217px

.ahead-youth {
	width: 796px;
}

.ahead-youth li {
	float: left;
	margin-right: 13px;
	margin-bottom: 13px;
}

.ahead-youth img {
	width: 385px;
	height: 217px;
}

右边的部分命名为“ahead-red”，直接用做好的右浮动样式的名字“floright”直接用

创建ul并命名为“bottom-list3”，li内存放超链接语句，有几个句子创建多少个li，

<div class="ahead-colum">
<img src="img/03.png">
    <div class="ahead-more">
    <a href="#" style="color: #c72722;">更多>></a>
    </div>
</div>

<ul class="ahead-youth floleft">
    <li>
        <div class="aheadyouths">
            <img src="img/9.jpg">
        </div>
    </li>
    <li>
        <div class="aheadyouths">
            <img src="img/10.png">
        </div>
    </li>
    <li>
        <div class="aheadyouths">
            <img src="img/11.jpg">
        </div>
    </li>
    <li>
        <div class="aheadyouths">
            <img src="img/12.png">
        </div>
    </li>
</ul>

<div class="ahead-red floright">
	<ul class="bottom-list3">
		<li>
			<a href="https://qnzz.youth.cn/qckc/202305/t20230525_14540772.htm" target="_blank">
				李芍毅：把大道理讲成小故事
			</a>
		</li>
	
		<li>
			<a href="https://qnzz.youth.cn/qckc/202305/t20230511_14510448.htm" target="_blank">
				吴永卓：将最美青春绽放在雪域高原
			</a>
		</li>
				
		<li>
			<a href="https://qnzz.youth.cn/qckc/202305/t20230511_14510453.htm" target="_blank">
 	     		丛慧敏：两度走进人民大会堂的“女牛倌”
     		</a>
		</li>
				
		<li>
			<a href="https://qnzz.youth.cn/qckc/202304/t20230411_14445815.htm" target="_blank">
				90后回乡创业者：干实业最踏实
			</a>
		</li>
				
		<li>
			<a href="https://qnzz.youth.cn/qckc/202304/t20230411_14445756.htm" target="_blank">
				青年茶艺人扎根乡村守正创新
			</a>
		</li>
				
		<li>
			<a href="https://qnzz.youth.cn/qckc/202304/t20230410_14443055.htm" target="_blank">
				00后制茶师：心静“炒”出一盏好茶
			</a>
		</li>
    </ul>
</div>

样式

右边的盒子给个宽度367px和高度404px，给个背景图片，不重复，给个边距（上42px，右10px，下0，左25px）

内容：行高60px

然后补上之前第四部分的背景图片，不重复且居中放在最下面。

.ahead-red {
	width: 367px;
	height: 404px;
	background: url(../img/biaotibg.jpg) no-repeat;
	padding: 42px 10px 0px 25px;
	;
}

.bottom-list3 li {
	line-height: 60px;
}
.ahead-concent-bottom {
	background: #fff url(../img/001.jpg) no-repeat bottom center;
}

第四小部分结束

第四部分结束