web案例-css制作小米官网产品展示

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

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

👇html代码：

<div class="wrap">
    <div class="left">
        <a href="#">
            <img src="images/left.jpg" alt="">
        </a>
    </div>
    <div class="right">
        <ul>
            <li>
                <a class="img" href="#"><img src="images/1.jpg" alt=""></a>
                <a class="title" href="#">小米路由器3.0</a>
                <span class="dec">四天线设计，更快更强</span>
                <span class="price">149元</span>
                <p class="tip exemption">免邮费</p>
                <div class="comments">
                    <a href="#">
                        <span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
                    </a>
                </div>
            </li>
            <li>
                <a class="img" href="#"><img src="images/2.jpg" alt=""></a>
                <a class="title" href="#">小米手环</a>
                <span class="dec">OLED 显示屏幕，升级计步算法</span>
                <span class="price">149元</span>
                <p class="tip donation">有赠品</p>
                <div class="comments">
                    <a href="#">
                        <span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
                    </a>
                </div>
            </li>
            <li>
                <a class="img" href="#"><img src="images/3.jpg" alt=""></a>
                <a class="title" href="#">小米净水器（厨上式）</a>
                <span class="dec">限量送 TDS 检测笔</span>
                <span class="price">1299元</span>
                <p class="tip exemption">免邮费</p>
                <div class="comments">
                    <a href="#">
                        <span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
                    </a>
                </div>
            </li>
            <li>
                <a class="img" href="#"><img src="images/4.jpg" alt=""></a>
                <a class="title" href="#">小米路由器3.0</a>
                <span class="dec">四天线设计，更快更强</span>
                <span class="price">149元</span>
                <p class="tip exemption">免邮费</p>
                <div class="comments">
                    <a href="#">
                        <span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
                    </a>
                </div>
            </li>
            <li>
                <a class="img" href="#"><img src="images/5.jpg" alt=""></a>
                <a class="title" href="#">小米路由器3.0</a>
                <span class="dec">四天线设计，更快更强</span>
                <span class="price">149元</span>
                <p class="tip new_product">新品</p>
                <div class="comments">
                    <a href="#">
                        <span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
                    </a>
                </div>
            </li>
            <li>
                <a class="img" href="#"><img src="images/6.jpg" alt=""></a>
                <a class="title" href="#">九号平衡车</a>
                <span class="dec">年轻人的酷玩具，骑行遥控两种玩法</span>
                <span class="price">1999元</span>
                <p class="tip exemption">免邮费</p>
                <div class="comments">
                    <a href="#">
                        <span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
                    </a>
                </div>
            </li>
            <li>
                <a class="img" href="#"><img src="images/7.jpg" alt=""></a>
                <a class="title" href="#">小米路由器3.0</a>
                <span class="dec">四天线设计，更快更强</span>
                <span class="price">149元</span>
                <p class="tip donation">有赠品</p>
                <div class="comments">
                    <a href="#">
                        <span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
                    </a>
                </div>

            </li>
            <li>
                <a class="img" href="#"><img src="images/8.jpg" alt=""></a>
                <a class="title" href="#">小米路由器3.0</a>
                <span class="dec">四天线设计，更快更强</span>
                <span class="price">149元</span>
                <p class="tip new_product">新品</p>
                <div class="comments">
                    <a href="#">
                        <span>很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还...</span>
                    </a>
                </div>
            </li>

        </ul>
    </div>
</div>

👇css代码：

    <style type='text/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;}
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>