静态小米官网主页html5设计,web案例-css制作小米官网产品展示

web前端群，189394454，有视频、源码、学习方法等大量干货分享

效果知识点: 企业布局思维的巧妙运用, DIV加CSS，css样式拆解与归类，css3过度与阴影，定位与动，常用如何搭配，开发标准。

👇html代码：

• 

  小米路由器3.0

  四天线设计，更快更强

  149元

  免邮费

  很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...

• 

  小米手环

  OLED 显示屏幕，升级计步算法

  149元

  有赠品

  很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...

• 

  小米净水器(厨上式)

  限量送 TDS 检测笔

  1299元

  免邮费

  很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...

• 

  小米路由器3.0

  四天线设计，更快更强

  149元

  免邮费

  很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...

• 

  小米路由器3.0

  四天线设计，更快更强

  149元

  新品

  很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...

• 

  九号平衡车

  年轻人的酷玩具，骑行遥控两种玩法

  1999元

  免邮费

  很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...

• 

  小米路由器3.0

  四天线设计，更快更强

  149元

  有赠品

  很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...

• 

  小米路由器3.0

  四天线设计，更快更强

  149元

  新品

  很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...

👇css代码：

* { margin: 0; padding: 0; }

li { list-style: none }

a { text-decoration: none; color: #434343; }

.new_product { background-color: #31d747; letter-spacing: 5px; }

.exemption { background-color: #ffac37; }

.donation { background-color: #5fb0ff; }

body { background-color: #f5f5f5 }

.wrap { width: 1226px; height: 614px; margin: 100px auto; padding: 10px; box-shadow: 0 0 8px #222222; }

.wrap .left { width: 234px; height: 100%; float: left; }

.wrap .right { width: 992px; height: 100%; float: right; }

.wrap .right ul li { position: relative; top: 0;overflow:hidden; width: 234px; height: 300px; float: left; margin: 0 0 14px 14px; background-color: #ffffff;transition:0.3s; }

.wrap .right ul li:hover{top:-5px;box-shadow:0 10px 10px #bbb;}

.wrap .right ul li a,.wrap .right ul li span{ display:block;text-align: center;font-size:12px;}

.wrap .right ul li a.img { display: block; width: 160px; height: 160px; margin: 0 auto; padding-top: 20px; }

.wrap .right ul li a.img img { width: 100%; height: 100%; display: block; }

.wrap .right ul li a.title { font-size: 14px; color: #333333; }

.wrap .right ul li span.dec { margin-top: 6px; color: #bbbbbb; }

.wrap .right ul li span.price { margin-top: 15px; color: #ff6600; }

.wrap .right ul li p.tip { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 65px; height: 20px; color: #ffffff; text-align: center; font-size: 12px; line-height: 20px; }

.wrap .right ul li div.comments{ position: absolute;bottom:-75px; width: 170px; height: 75px; padding:0 32px; background-color: #f60;transition:0.3s}

.wrap .right ul li div.comments span{ margin-top:10px; height: 30px;text-align:left;line-height:15px;text-indent:1.8em; color:#fff;}

.wrap .right ul li:hover div.comments{bottom:0;}