<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米</title>
<style type="text/css">
body,div,p,input,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
body{
background: #aaaaaa;
}
img{
border: 0;
}
.pro{
width: 1226px;
/*有高度不用清除浮动*/
height: 653px;
/*盒子居中*/
margin: 0 auto;
}
.pro-ai {
height: 38px;
}
.fl{
float: left;
}
.fr{
float: right;
}
.pro-ai-left{
font-size: 18px;
}
.pro-ai-right{
font: 14px 微软雅黑;
}
.pro-pic{
/*设置高度不用清除浮动*/
height: 614px;
font: 12px 微软雅黑;
/*文字居中*/
text-align: center;
}
.pro-pic-1{
width: 234px;
height: 614px;
}
.pro-pic-2{
width: 234px;
height: 300px;
position: relative;
/*这一个以小米路由器的盒子的背景是白色，不加就算只显示img以外的body的颜色*/
background: #ffffff;
/*长图片1和图片2之间的距离，盒子盒子之间距离*/
/*margin-left: 14px;*/
margin: 0 0 14px 14px;
}
.free{
position: absolute;
background: orange;
color: white;
width: 64px;
height: 20px;
left: 85px;
top: 0;
}
.free1{
position: absolute;
background: red;
color: white;
width: 64px;
height: 20px;
left: 85px;
top: 0;
}
.pro-pic-2 img{
margin-top: 40px;
}
.pro-pic-2 p.one{
/*设置上下是10px左右0*/
margin: 10px 0;
}
.pro-pic-2 p.two{
margin-bottom: 18px;
color: #aaaaaa;
}
.pro-pic-2 p.three{
font-size: 14px;
color: orange;
font-weight: 700;
}
</style>
</head>
<body>
<div class="pro">
<div class="pro-ai">
<div class="pro-ai-left fl">智能硬件</div>
<div class="pro-ai-right fr">查看全部</div>
</div>
<div class="pro-pic">
<div class="pro-pic-1 fl"><img src="img/1.jpg" alt=""></div>
<div class="pro-pic-2 fl"><img src="img/2.jpg" alt="">
<p class="one">小米路由器3</p>
<p class="two">四天线设计，更安全更稳定</p>
<p class="three">149元</p>
<div class="free">免邮费</div>
</div>
<div class="pro-pic-2 fl" ><img src="img/3.jpg" alt="" style="margin-top: 0px;height: 200px">
<p class="one" >米家 LED 智能台灯</p>
<p class="two">无可视频闪，亮度色温无级调节</p>
<p class="three">169元</p>
</div>
<div class="pro-pic-2 fl"><img src="img/4.jpg" alt="" style="height: 180px;margin-top: 20px">
<p class="one">小米净水器 厨下式</p>
<p class="two">RO反渗透直出纯净水，包邮包安装</p>
<p class="three">1999元</p>
<div class="free">免邮费</div>
</div>
<div class="pro-pic-2 fl"><img src="img/5.jpg" alt="" style="height: 180px;margin-top: 20px">
<p class="one">小蚁智能摄像机 夜视版</p>
<p class="two">能看能听能说，手机远程观看</p>
<p class="three">149元</p>
</div>
<div class="pro-pic-2 fl"><img src="img/6.jpg" alt="">
<p class="one">Yeelight床头灯</p>
<p class="two">触摸式操作，给卧室1600万种颜色</p>
<p class="three">249元</p>
</div>
<div class="pro-pic-2 fl"><img src="img/7.jpg" alt="" style="height: 180px;margin-top: 20px">
<p class="one">小米空气净化器2</p>
<p class="two">10分钟，房间空气焕然一新</p>
<p class="three">699元</p>
</div>
<div class="pro-pic-2 fl"><img src="img/8.jpg" alt="">
<p class="one">小米智能安防套装</p>
<p class="two">智能警戒，为您的家增添一份安心</p>
<p class="three">149元</p>
<div class="free1">享9折</div>
</div>
<div class="pro-pic-2 fl"><img src="img/9.jpg" alt="" >
<p class="one">米家iHealth血压计</p>
<p class="two">爸妈上手就会用的智能血压计</p>
<p class="three">399元</p>
</div>
</div>
</div>
</body>
</html>效果：
