商品demo一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>mi.com</title>
<style type="text/css">
body{
background:rgb(245,245,245);
}
#main{
240px;
height: 300px;
text-align: center;
background:white;
transition: 1s ease;
}
#main:hover{
box-shadow: 0 0 5px 5px #ddd;
transform:translateY(-10px);
}
#main #info{
65px;
height: 20px;
background: rgb(255, 172, 19);
color:white;
font-weight: bold;
text-align: center;
font-size: 10px;
line-height: 20px;
margin:0 auto;
}
#main img{
150px;
height: 130px;
margin-bottom: 30px;
}
#pro-name,#pro-info,#price{
font-family: '微软雅黑';
line-height: 28px;
}
#pro-info{
color:#bbb;
}
#price{
line-height: 40px;
color:orange;
}
</style>
</head>
<body>
<div id="main">
<div id="info">免邮费</div>
<img src="http://i3.mifile.cn/a4/376f5f19-d1f5-4f87-8ef9-38e86891bc87" alt="" />
<div id="pro-name">小米路由器3</div>
<div id="pro-info">四天线设计，更快更强</div>
<div id="price">149元</div>
</div>
</body>
<ml>