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

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

首先咱们先把页面标题写在head标签中的title标签内，然后写页面。

body标签中写一个div标签并以swiper-container命名,

咱们在div标签中放入所需要的内容第一部分。

<!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>
	</body>
</html>

咱们在swiper-container这个div中再套一个div，并命名为ahead-banner-new，

然后在ahead-banner-new这个div中放入图片。

<!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" ">
				<img src="img/1.png" ">
			</div>
			<!-- 第一部分 大图片结束-->
		</div>
	</body>
</html>

最后咱们添加css样式，让ahead-banner-new这个盒子居中宽度为页面最大宽度，

图片样式宽度为最大且从内联标签（行标签）转换为块标签

<!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>
	</body>
</html>

完成到这里会发现图片外面有一个白边框，然后我们将边框设置成零

/* 通配符选择器 */
* {
	margin: 0;
	padding: 0;
}

第一部分结束

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

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