0724 静态购物网页

最新推荐文章于 2024-07-08 16:01:05 发布

青衣-白扇

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量551

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/Fern2018/article/details/81261289

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<style type="text/css">
		a{
			font-size:25px;
		}

		/* 伪类选择器 */
		a:link {
			text-decoration:none;
			color: black;
		}
		a:visited {
			text-decoration:none;
			color: #OOFFOO;
		}
		a:hover {
			text-decoration:none;
			color: #FFOOFF;
		}
		a:active {
			text-decoration:none;
			color: #0000FF;
		}

		/* 盒子 */
		.main{
			position:relative;
			width: 1160px;
			margin:0 auto;
		}
		.left{			
			float:left;
		}
		.right{			
			float:left;
		}
		.top,.fotter{
			position:absolute;
			float:left;
			margin-left:5px;
		}
		.top{		/* 右上部分 */
		}
		.fotter{	/* 右下部分 */
			top:375px;
		}
		
		.back{			/* 8个小的商品对应的盒子 */
			width: 220px;
			height: 302px;
			background: white;
			float: left;
			margin-left:10px;
		}

		/* 字体 */
		.z1{		/* 免邮费 */
			font-size: 18px;
			background-color: orange;
			color: white;
			display: block;
			width: 75px;
		}
		.z2{		/* 商品的名称 */
			font-size: 18px;
			font-weight: 800;
		}
		.z3{		/* 商品的特性 */
			font-size: 18px;
		}
		.z4{		/* 标价 */
			font-size: 18px;
			color: orange;
		}
		.z5{		/* 有赠品 */
			font-size: 18px;
			background-color: blue;
			color: white;
			display: block;
			width: 75px;
		}
		
		
	</style>
</head>
<body style="background-color:#eee";>
	<div class="main">
		<a href = "#" style="float:right">查看全部</a>
		<h1 style='coler: black'>智能硬件</h1>
		
		<!-- 左大图 -->
		<div class="left">
			<img src="image/row2Img.jpg" height="618" width="234">
		</div>	

		<!-- 右大图 -->
		<div class="right">
			<!-- 右上部分 -->
			<div class="top">

				<div class="back" align="center">
					<span class="z1">免邮件</span>
					<img src="image/znyj1.jpg" height="180" 	width="180"><br/>
					<span class="z2">米家小白智能摄像机</span><br/>
					<span class="z3">360度全方位高清摄像</span><br/>
					<p class="z4">300元</p>
				</div>

				<div class="back" align="center">
					<span class="z1">免邮件</span>
					<img src="image/znyj3.jpg" height="180" 	width="180"><br/>
					<span class="z2">米家智能故事机</span><br/>
					<span class="z3">海量好故事</span><br/>
					<p class="z4">98元</p>
				</div>

				<div class="back" align="center">
					<span class="z1">免邮件</span>
					<img src="image/znyj5.jpg" height="180" 	width="180" ><br/>
					<span class="z2">小米米家电动滑板车</span><br/>
					<span class="z3">持久续航，携带方便</span><br/>
					<p class="z4">888元</p>
				</div>

				<div class="back" align="center">
					<span class="z1">免邮件</span>
					<img src="image/znyj7.jpg" height="180" 	width="180"><br/>
					<span class="z2">防尘口罩</span><br/>
					<span class="z3">有效防止PM2.5</span><br/>
					<p class="z4">66元</p>
				</div>

			</div>

			<!-- 右下部分 -->
			<div class="fotter">

				<div class="back" align="center">
					<span class="z5">有赠品</span>
					<img src="image/znyj2.jpg" height="180" 	width="180"><br/>
					<span class="z2">小米手表</span><br/>
					<span class="z3">全国联保</span><br/>
					<p class="z4">138元</p>
				</div>

				<div class="back" align="center">
					<span class="z5">有赠品</span>
					<img src="image/znyj6.jpg" height="180" 	width="180"><br/>
					<span class="z2">米家飞利浦智睿台灯</span><br/>
					<span class="z3">内置环境光传感器</span><br/>
					<p class="z4">300元</p>					
				</div>

				<div class="back" align="center">
					<span class="z5">有赠品</span>
					<img src="image/znyj4.jpg" height="180" 	width="180"><br/>
					<span class="z2">米家压力IH电饭煲</span><br/>
					<span class="z3">IH 电磁环绕加热</span><br/>
					<p class="z4">59元</p>
				</div>

				<div class="back" align="center">
					<span class="z5">有赠品</span>
					<img src="image/znyj8.png" height="180" 	width="180"><br/>
					<span class="z2">我也不知道是啥</span><br/>
					<span class="z3">中间带一个按钮</span><br/>
					<p class="z4">200元</p>
				</div>
				
			</div>		
		</div>	
	</body>
	</html>

青衣-白扇

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
0724 静态购物网页

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt; a{ font-size:25px; } /* 伪类选择器 */ a:link { text-de
复制链接

扫一扫