前端人必做网页————小米官网

页面的话一共是三部分，所以这一期我分三期完成，这一期我们先来做首页。

先来看一下实现效果

这是一部分的页面，因为代码较多，所以主要讲一些难点操作

1、小米商城二维码实现

当鼠标移上去时，二维码显示出来，具体代码

/*下载app二维码的样式*/

.site-topbar a.topbar-download {
    position: relative;
}

.site-topbar a.topbar-download .appcode {
    position: absolute;
    top: 40px;
    left: 50%;
    width: 124px;
    height: 0px;
    background: #fff;
    margin-left: -55px;
    -webkit-box-shadow: #aaa 0 1px 5px;
    box-shadow: 0 1px 5px #aaa;
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 1;
    overflow: hidden;
    -webkit-transition: height .3s;
    transition: height .3s;
    z-index: 999;
}

.site-topbar a.topbar-download:hover .appcode {
    height: 148px;
}


/*上三角效果*/

.site-topbar .topbar-download:hover:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
}

.site-topbar a.topbar-download .appcode img {
    display: block;
    margin: 18px auto 12px;
}

2、图片动画效果

           

这个是动态效果，具体表现为在鼠标移上去时变化成第二张图片效果，具体看代码

.site-header {
    height: 100px;
}

.site-header .header-logo {
    width: 55px;
    height: 55px;
    background-image: url(../images/mi-home.png), url(../images/mi-logo.png);
    background-repeat: no-repeat, no-repeat;
    background-position: -52px 3px, 3px 3px;
    background-color: #ff6700;
    margin-top: 22px;
    transition: background-position .2s;
}

.site-header .header-logo:hover {
    background-position: 3px 3px, 58px 3px;
}

这其实本身是一张图片，里面有“两个不同”的图片，通过利用图片定位这个属性实现动画效果，transition属性是动画效果的变化时间，我们设置的为0.2s

3、具体模块实现

HTML代码：

        <div class="promo container">
            <div class="row">
                <div class="span4">

                    <ul class="home-channel-list chearfix">
                        <li>
                            <a href="#">
                                <span class="icon"></span> <br>小米秒杀
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon"></span> <br>企业团购
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon"></span> <br>F码通道
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon"></span> <br>米粉卡
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon"></span> <br>以旧换新
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="icon"></span> <br>话费充值
                            </a>
                        </li>
                    </ul>

                </div>
                <div class="span16">
                    <img src="./images/home-promo1.jpg" alt="">
                    <img src="./images/home-promo2.jpg" alt="">
                    <img src="./images/home-promo3.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

CSS代码：

//图标引入
@font-face {
    font-family: 'icomoon';
    src: url('./fonts/icomoon.woff') format('woff');
}

.icon {
    font-size: 15px;
    font-family: "icomoon";
}


/* 导航条 */

.home-channel-list {
    float: left;
    background-color: #5f5750;
    padding: 3px;
    display: block;
    text-align: center;
    list-style-type: none;
}

.clearfix:after,
.clearfix:before {
    content: " ";
    display: table;
}

.home-channel-list li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 82px;
    width: 76px;
    position: relative;
    float: left;
}

.home-channel-list li:before {
    position: absolute;
    content: '';
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: #665e57;
}

.home-channel-list li:after {
    position: absolute;
    content: '';
    top: 0;
    left: 5px;
    right: 5px;
    height: 1px;
    background: #665e57;
}

.home-channel-list a {
    opacity: .7;
    color: white;
    display: block;
    text-decoration: none;
    transition: all .2s;
}

a:hover {
    text-decoration: none;
    opacity: 1;
}

.promo .span16 {
    display: flex;
    justify-content: space-between;
}

.promo .span16 img {
    width: 316px;
    height: 170px;
}

display：flex弹性盒子这个非常好用，具体使用方法http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

以及图标的使用，我用的是这个网站https://www.iconfont.cn/

这一期就这样结束啦，静态页面实现起来也不是很难，但是大家还是要多动手才行，加油！