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

抢购模块设计

使用浮动属性进行抢购模块的设计。制作过程遵循从外到内,先整体后细节的顺序。
先进行分析:抢购模块分为图片部分(img)和详情部分(info)。其中详情部分又分为标题(title)、补充信息(info-detail)、进度条(progress)、售出信息(sold)和价格(price)五个小部分。
如下图所示:
HTML网页入门练习——淘宝抢购模块设计_第1张图片
经过从整体到细节的分析,设计思路也会更加清晰,相应的代码编写起来也会更加得心应手。
完整代码如下:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>D5-2title>
		<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.8span>
					<span class="price">¥56.1span>
				p>
			div>
		div>
	body>
html>

效果图:
HTML网页入门练习——淘宝抢购模块设计_第2张图片

你可能感兴趣的:(网页制作,html,css,css3)