用html和css制作静态小米网页（二）

目录

一、成果展示

二、html部分

三、css部分

3.1使用动画效果代替轮播图

3.2运用雪碧图对轮播图中的左右箭头进行设置

3.3使用伪类为页面底部左侧盒子添加竖线与横线

3.4使用固定定位将导航栏固定在右侧

---

一、成果展示

二、html部分

接上一部分这里制作了小米首页部分的中间轮播图部分以及底部和右边固定导航栏的制作。

 <main>
            <div class="main-left">
                <ul>
                    <li><a href="#"><span class="s1">手机</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#"><span class="s1">电视</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>

                    <li><a href="#"><span class="s1">笔记本 平板</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#"><span class="s1">出行 穿戴</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#"><span class="s1">耳机 音箱</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#"><span class="s1">家电</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#"><span class="s1">智能 路由器</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#"><span class="s1">电源 配件</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#"><span class="s1">健康 儿童</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#"><span class="s1">生活 箱包</span><span class="s2">&gt;</span></a>
                        <div class="phone3">
                            <ul>
                                <li><img src="./img/手机3.webp" alt=""><span>Note 11TPro+</span></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="dot" >
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
            </main>
        <footer>
            <div class="footer-left">
                <ul>
                    <li><a href="#"><img src="./img/图片1.png" alt="保障服务">保障服务</a></li>
                    <li><a href="#"><img src="./img/图片2.png" alt="企业团购">企业团购</a></li>
                    <li><a href="#"><img src="./img/图片3.png" alt="F码通道">F码通道</a></li>
                    <li><a href="#"><img src="./img/图片4.png" alt="米粉卡">米粉卡</a></li>
                    <li><a href="#"><img src="./img/图片5.png" alt="以旧换新">以旧换新</a></li>
                    <li><a href="#"><img src="./img/图片6.png" alt="话费充值">话费充值</a></li>
                </ul>
            </div>
            <div class="footer-right">
                <ul>
                    <li><a href="#"><img src="./img/底部图片1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/底部图片2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/底部图片3.jpg" alt=""></a></li>
                </ul>
            </div>
        </footer>
        <div class="right">
            <ul>
                <li class="ex"><a href=""><i class="iconfont icon-shouji xxx"></i><p>手机app</p></a>
                    <div class="ex1">
                        <div class="ex2"></div>
                        <div class="ex3"><img src="./img/手机app二维码.png" alt="二维码图片"><p>扫码领取新人百元礼包</p></div>
                    </div>
                </li>
                <li><a href=""><i class="iconfont icon-gerenzhongxin"></i><p>个人中心</p></a></li>
                <li><a href=""><i class="iconfont icon-editor2"></i><p>售后服务</p></a></li>
                <li><a href=""><i class="iconfont icon-htmal5icon31"></i><p>人工客服</p></a></li>
                <li><a href=""><i class="iconfont icon-gouwuche1"></i><p>购物车</p></a></li>
            </ul>
        </div>
        <div class="test"></div>
    </div>

三、css部分

对其中一些主要样式进行讲解

3.1使用动画效果代替轮播图

main{
    width: 1226px;
    height: 460px;
    margin: 0 auto;
    background-image: url(./img/背景1.jpg);
    background-size: cover;
    animation: banner 9s ease-out infinite;
    position: relative;
}
@keyframes banner{
    0%{
        background-image: url(./img/背景1.jpg);
        background-size: cover;
    }
    50%{
        background-image: url(./img/背景2.webp);
        background-size: cover;
    }
    100%{
        background-image: url(./img/背景3.webp);
        background-size: cover;
    }
}

3.2运用雪碧图对轮播图中的左右箭头进行设置

.arrow-left{
    background-image: url(./img/icon-slides.png);
    background-position: -83px 0;
    position: absolute;
    top: 210px;
    left: 236px;
    width: 41px;
    height: 69px;
    z-index: 1;
}
.arrow-right{
    background-image: url(./img/icon-slides.png);
    background-position: -125px 0;
    position: absolute;
    top: 210px;
    right: 0px;
    width: 41px;
    height: 69px;
    z-index: 1;
}
.arrow-left:hover{
    background-position: 0px 0;
}
.arrow-right:hover{
    background-position: -43px 0;
}

3.3使用伪类为页面底部左侧盒子添加竖线与横线

.footer-left>ul>li::after{
    position: absolute;
    content: " ";
    width: 1px;
    height: 68px;
    top: 6px;
    left: 0;
    background: #665e57;
}
.footer-left>ul>li::before{
    position: absolute;
    content: " ";
    width: 62px;
    height: 1px;
    left: 6px;
    top: 0px;
    background: #665e57;
}

3.4使用固定定位将导航栏固定在右侧

.right{
    width: 82px;
    height: 460px;
    position: fixed;
    right: 0px;
    top: 180px;
    background-color: white;
    z-index: 5;
}
.right>ul>li{
    width: 82px;
    height: 90px;
    border: 1px solid #f5f5f5;
    text-align: center;
    position: relative;
    z-index: 4;
}
.right>ul>li>a{
    display: block;
    width: 82px;
    height: 90px;
    text-align: center;
    padding-top: 16px;
}