讲重点。展示页面效果。代码编译。

?看页面效果：

今天的重点在最后一个页面。

看代码：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>电商平台网站</title>
		
	</head>
	<!-- 外链式 -->
	<link rel="stylesheet" href="./css/电商平台网站1.css" type="text/css" />
	</head>
	<body>

		<!-- 头部 -->
		<header id="top">
			<div class="brand">电商网站</div>
			<form action="" method="get">
				<input type="search" placeholder="搜索" />
			</form>
			<a href="注册.html">注册信息</a>
		</header>
		<!-- 中部 -->
		<div class="content">
			<div class="pic_info">
				<div class="pic_box">
					<img src="img/bng/kp1%20(2).jpg" />
				</div>
				<!-- 商品展示 1-->
				<ul>
					<li>商品名称：XXXXX</li>
					<li>商品价格：XXXXX</li>
					<li>商品数量：XXXXX</li>
				</ul>
			</div>
		</div>

		<!-- 中部 -->
		<div class="content">
			<div class="pic_info">
				<div class="pic_box">
					<img src="img/bng/kp1%20(4).jpg" />
				</div>
				<!-- 商品展示 1-->
				<ul>
					<li>商品名称：XXXXX</li>
					<li>商品价格：XXXXX</li>
					<li>商品数量：XXXXX</li>
				</ul>
			</div>
		</div>



		<!-- 中部 -->
		<div class="content">
			<div class="pic_info">
				<div class="pic_box">
					<img src="img/bng/kp1%20(3).jpg" />
				</div>
				<!-- 商品展示 1-->
				<ul>
					<li>商品名称：XXXXX</li>
					<li>商品价格：XXXXX</li>
					<li>商品数量：XXXXX</li>
				</ul>
			</div>
		</div>


<footer style="text-align: center;"> 2022/3/21版权所有/课时作业三</footer>

	</body>
</html>

* {
	font-size: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	background-color: lavenderblush;
	text-shadow: 1px 1px 2px red;
}

#top {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.brand {
	font-size: 22px;
}

#top input[type=search] {
	width: 200px;
}

.content {
	width: 60%;
	margin: 10px auto;
	padding: 5px;
	border: 1px #AFEEEE solid;
	border-radius: 0.9375rem;
	box-shadow: 0px 0px 10px 0px #EEEEEE;

}


.pic_info img {
	border-radius: 0.9375rem;
	width: 60%;
	border-radius: 10px;
	box-shadow: 1px 4px 2px black;
}


/* 布局 */
.pic_info {
	display: flex;
	align-items: center;
}

.pic_box {
	flex: 0.8;
}

.pic_info ul {
	flex: 1;
}

/* 定义字体 */

@font-face {
	/* 自定义字体的名字 随便取 不需要加引号 */
	font-family: font;
	/* 字体所在的路径 */
	src: url('fzld.TTF');
}

* {
	/* 使用自定义字体 不需要加引号 */
	font-family: font;
	color: cornflowerblue;
	font-weight: 800;
}

前端网页设计内容一2022/3/14_@Live@And@Learn@#的博客-CSDN博客本项目运用Html Css Javascript.https://blog.csdn.net/qq_56248592/article/details/123490619?spm=1001.2014.3001.5502