<!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>
0724 静态购物网页
猜你喜欢
转载自blog.csdn.net/Fern2018/article/details/81261289
今日推荐
周排行