HTML网页入门练习——淘宝抢购模块设计

最新推荐文章于 2024-03-03 12:19:59 发布

蔺WIT

最新推荐文章于 2024-03-03 12:19:59 发布

阅读量1.3k

点赞数 1

分类专栏：网页制作文章标签： html css css3

本文链接：https://blog.csdn.net/m0_53156691/article/details/122737716

版权

网页制作专栏收录该内容

13 篇文章 9 订阅

订阅专栏

抢购模块设计

使用浮动属性进行抢购模块的设计。制作过程遵循从外到内，先整体后细节的顺序。
先进行分析：抢购模块分为图片部分（img）和详情部分（info）。其中详情部分又分为标题（title）、补充信息（info-detail）、进度条（progress）、售出信息（sold）和价格（price）五个小部分。
如下图所示：
在这里插入图片描述
经过从整体到细节的分析，设计思路也会更加清晰，相应的代码编写起来也会更加得心应手。
完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>D5-2</title>
		<link rel="stylesheet" href="css/reset.css" />
		<style>
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		.clearfix:after{
			clear: both;
			display: block;
			content: "";
		}
		.page{
			width: 395px;
			height: 180px;
			border: 1px solid #000000;
		}
		.img{
			width: 180px;
			height: 180px;
			background-color: #dcc6b9;
		}
		.info{
			width: 180px;
			height: 180px;
			margin-left: 35px;
			/* background-color: #f5dd87; */
		}
		img{
			width: 180px;
			height: 180px;
		}
		.title{
			width: 161px;
			font-size: 16px;
			line-height: 22px;
			margin-top: 11px;
		}
		.info-detail{
			margin-top: 12px;
			line-height: 28px;
			font-size: 12px;
			color: #989898;
		}
		.progress{
			background-color: #FFE4Dc;
			width: 159px;
			height: 6px;
			border-radius: 3px;
			overflow: hidden;
		}
		.progress .sold{
			width: 20%;
			height: 6px;
			background-color: red;
		}
		.sold{
			color: #FE3338;
			line-height: 28px;
			height: 28px;
			font-size: 12px;
		}
		.price span:nth-of-type(1){
			font-size: 12px;
			color: red;
		}
		.price span:nth-of-type(2){
			font-size: 19px;
			color: #ff6113;
		}
		.price span:nth-of-type(3){
			font-size: 12px;
			color: #989898;
			text-decoration: line-through;
			margin-left: 6px;
		}
		</style>
	</head>
	<body>
		<div class="page clearfix">
			<div class="img fl">
				<img src="./img/goods.jpg" />
			</div>
			<div class="info fl">
				<p class="title">[正版书籍] 浪漫地理学：追寻崇高景观</p>
				<p class="info-detail"> 春节不打烊，新年更优惠</p>
				<div class="progress">
					<div class="sold"></div>
				</div>
				<p class="sold clearfix">
					<span class="fl">20%</span>
					<span class="fr">已抢288件</span>
				</p>
				<p class="price">
					<span> ￥</span>
					<span>34.8</span>
					<span class="price">￥56.1</span>
				</p>
			</div>
		</div>
	</body>
</html>