小米官网首页代码示例

意巷浓

于 2023-10-23 10:21:32 发布

阅读量1.4k

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/weixin_56534351/article/details/133983527

版权

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4281795_nisx7bx4dlp.css">
    <link rel="stylesheet" href="./CSS/reset.CSS">
    <link rel="stylesheet" href="./CSS/index.css">
</head>


<body><div class="mi">
    
</div>

    <div class="top">
        <div class="box">
            <div class="box1">
                <a href="##" class="box1-a1">小米官网</a>
                <a href="##" class="box1-a2">小米商城</a>
                <a href="##" class="box1-a3">MIUI</a>
                <a href="##" class="box1-a4">loT</a>
                <a href="##" class="box1-a5">云服务</a>
                <a href="##" class="box1-a6">天星数科</a>
                <a href="##" class="box1-a7">有品</a>
                <a href="##" class="box1-a8">小爱开放平台</a>
                <a href="##" class="box1-a9">资质证照</a>
                <a href="##" class="box1-a10">协议规则</a>
                <a href="##" class="app">下载app
                    <div class="qr">
                        <div class="qr-app"><img src="./images/download.png" ><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小米商城APP</div>
                    </div>
                </a>
                <a href="##">Select Location</a>
            </div>
            <div>
                <div class="box2">
                    <a href="##" class="box2-a1">登录</a>
                    <a href="##" class="box2-a2">注册</a>
                    <a href="##" class="box2-a3">消息通知</a>
                    <a href="##" class="nav"><span class="iconfont icon-gouwuchekong"></span>购物车（0）<div class="shopping">
                        <div class="shopping-box">购物车中还没有商品，赶紧选购吧！</div>
                    </div></a>
                </div>
            </div>

        </div>
    </div>
    <div class="top1">
                <div>
                    <img src="./images/logo-mi2.png">
                </div>
                <div class="box3">
                    <a href="##">Xiaomi手机</a>
                    <a href="##">Redmi手机</a>
                    <a href="##">电视</a>
                    <a href="##">笔记本</a>
                    <a href="##">平板</a>
                    <a href="##">家电</a>
                    <a href="##">路由器</a>
                    <a href="##">服务中心</a>
                    <a href="##">社区</a>
                </div>
                <div class="nav-search">
                    <form action="https://www.mi.com/shop/search" method="get">
                        <input type="text" name="keyword">
                        <button><span class="iconfont icon-31sousuo"></span></button>
                        <div class="form-box"></div>
                    </form>
                </div>
    </div>
    <div class="banner">
        <div class="banner-one">      
              <div class="banner-box">
                <img src="./images/afec7c28eaa95a6126f33af275b04164.png">
                </div>
            <div class="banner-box1">
                <img src="./images/lunbo.jpeg" >
            </div>
            <div class="banner-box2">
                <img src="./images/lunbo1.webp" >
            </div>
            <div class="banner-box3">
                <img src="./images/lunbo2.webp" >
            </div>
            <div class="banner-box">
                <img src="./images/afec7c28eaa95a6126f33af275b04164.png" >
            </div>
        </div>

            <div class="banner-left">
                <div>
                    <div>手机</div>
                    <div>电视</div>
                    <div>家电</div>
                    <div>笔记本&nbsp;平板</div>
                    <div>出行&nbsp;穿戴</div>
                    <div>耳机&nbsp;音箱</div>
                    <div>健康&nbsp;儿童</div>
                    <div>生活&nbsp;箱包</div>
                    <div>智能路由器&nbsp;</div>
                    <div>电源&nbsp;配件</div>
                </div>

            </div>
        </div>
    </div>
    <div class="ad">
        <div class="ad-one">
            <div class="ad-one-box"><img src="./images/ad-left1.png" ><br>保障服务</div>
            <div class="ad-one-box1"><img src="./images/ad-left2.png" ><br>企业团购</div>
            <div class="ad-one-box2"><img src="./images/ad-left3.png" ><br>F码通道</div>
            <div class="ad-one-box3"><img src="./images/ad-left4.png" ><br>米粉卡</div>
            <div class="ad-one-box4"><img src="./images/ad-left5.png" ><br>以旧换新</div>
            <div class="ad-one-box5"><img src="./images/ad-left6.png" ><br>话费充值</div>
        </div>
        <div class="ad-two"><img src="./images/ad1.jpeg" alt=""></div>
        <div class="ad-three"><img src="./images/ad2.jpg" alt=""></div>
        <div class="ad-four"><img src="./images/ad3.png" alt=""></div>
    </div>
    <div class="top-box">
        <img src="./images/1a7f2dc81ede03fdb143e84e11eb550e.webp" alt="">
    </div>
    <div class="top-box1">
        <h2 class="title">手机</h2>
        <div class="more">
            <a href="##">查看更多</a>
            <i class="iconfont icon-xiangyou3"></i>
        </div>
    </div>
    <div class="phone">
        <div class="k60 phone-box1-img">
            <img src="./images/k60.webp">
        </div>
            <div class="phone-box1">
                <div class="phone-box1-img"><img src="./images/note13Pro.webp" alt=""><h3>Redmi Note 13 Pro</h3><a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小金刚品质</a><p><br>1499元起</p></div>
                <div class="phone-box1-img"><img src="./images/note13Pro+.webp" alt=""><h3>Redmi Note 13 Pro+</h3><a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天玑 7200-Ultra 处理器</a><p><br>1999元起</p></div>
                <div class="phone-box1-img"><img src="./images/note13.webp" alt=""><h3>Redmi Note 13 Pro 5G</h3><a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1 亿像素 更快更清晰</a><p><br>1099元起</p></div>
                <div class="phone-box1-img"><img src="./images/MIX Fold 3.webp" alt=""><h3>Xiaomi MIX Fold 3</h3><a>轻薄折叠屏丨徕卡光学丨全焦段四摄</a><p><br>8999元起</p></div>
                <div class="phone-box1-img"><img src="./images/K60Ultra.webp" alt=""><h3>Redmi K60 至尊版</h3><a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旗舰体验全面超预期</a><p><br>2599元起</p></div>
                <div class="phone-box1-img"><img src="./images/12.webp"><h3>&nbsp;&nbsp;&nbsp;&nbsp;Redmi 12 5G</h3><a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5G 骁龙芯，大屏大电量 </a><p><br>&nbsp;&nbsp;949元起</p></div>
                <div class="phone-box1-img"><img src="./images/note 12T Pro.webp" alt=""><h3>Redmi Note 12T Pro</h3><a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年度 LCD 屏幕之光</a><p><br>&nbsp;&nbsp;1499元起</p></div>
                <div class="phone-box1-img"><img src="./images/civi3.webp" alt=""><h3>&nbsp;&nbsp;&nbsp;&nbsp;Xiaomi Civi 3</h3><a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;仿生双眸 天生出色</a><p><br>2499元起</p></div>
            </div>
        </div>
    </div>
    <div class="bottom-ad">
        <img src="./images/Bottom.webp" alt="">
    </div>
    <div class="bottom">
        <div class="bottom-box1">
            <span class="iconfont icon-banshou"></span>
        预约维修服务
            <span class="iconfont icon-7tianwuliyoutuihuo"></span>七天无理由退货
            <span class="iconfont icon-15tianwuliyoutuihuo"></span>15天免费换货
            <span class="iconfont icon-liwuhuodong"></span>满69元包邮
            <span class="iconfont icon-weizhi"></span>1100余家售后网点
        </div>
        <div class="bottom-box2">
            <div class="bottom-left">选购指南
                <p>手机</p>
                <p>电视</p>
                <p>笔记本</p>
                <p>平板</p>
                <p>穿戴</p>
                <p>耳机</p>
                <p>家电</p>
                <p>路由器</p>
                <p>音箱</p>
                <p>配件</p>
            </div>
            <div class="bottom-left1">服务中心
                <p>申请售后</p>
                <p>售后政策</p>
                <p>维修服务价格</p>
                <p>订单查询</p>
                <p>以旧换新</p>
                <p>保障服务</p>
                <p>防伪查询</p>
                <p>F码通道</p>
            </div>
            <div class="bottom-left2">线下门店
                <p>小米之家</p>
                <p>服务网点</p>
                <p>笔授权体验店/专区</p>
            </div>
            <div class="bottom-left3">关于小米
                <p>了解小米</p>
                <p>加入小米</p>
                <p>投资者关系</p>
                <p>可持续发展</p>
                <p>廉洁举报</p>
            </div>
            <div class="bottom-left4">关注我们
                <p>新浪微博</p>
                <p>官方微信</p>
                <p>联系我们</p>
                <p>公益基金会</p>
            </div>
            <div class="bottom-right">
            <span>400-100-5678</span>
            <div>8:00-18:00（仅收市话费）</div>
            <button><ul class="iconfont icon-duihuakuang4">人工客服</ul></button>
            </div >
        </div>
        <div class="Xiaomi"><img src="./images/bottom.png" alt=""></div>
    </div>
    <div class="position-right">
        <img src="./images/phone.png"><br>&nbsp;&nbsp;手机APP
    </div>
    <div class="position-right1">
        <img src="./images/geren.png"><br>&nbsp;&nbsp;个人中心
    </div>
    <div class="position-right2">
        <img src="./images/banshou.png"><br>&nbsp;&nbsp;售后服务
    </div>
    <div class="position-right3">
        <img src="./images/kefu.png"><br>&nbsp;&nbsp;人工客服
    </div>
    <div class="position-right4">
        <img src="./images/gouwuche.png"><br>&nbsp;&nbsp;&nbsp;&nbsp;购物车
    </div>
    <div class="position-right5">
        
        <a href="#top"><img src="./images/dingbu.png" ><br>&nbsp;&nbsp;&nbsp;&nbsp;回顶部</a>
    </div>
</body>

</html>

CSS代码

body {
    margin: 0px;
    width: 100%;
    background-color: #f5f5f5;

}

.top {
    width: 100%;
    height: 40px;
    background-size: cover;
    margin: 0 auto;
    background-color: #333333;
}

.box {
    width: 1226px;
    height: 40px;
    background-color: #333333;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    line-height: 40px;
}

.box1 a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 12px;
    margin: 10px;
    line-height: 40px;

}

.box1 a:hover {
    color: cornflowerblue;
}

.box2 a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 12px;
    margin: 0 7px;
    line-height: 40px;
}

.box2 a:hover {
    color: cornflowerblue;
}

.app {
    position: relative;
    z-index: 999;
}

.nav-search {
    z-index: 999;
}

.qr {
    width: 124px;
    height: 148px;
    position: absolute;
    left: -40px;
    background-color: #fff;
    line-height: 40px;
    box-shadow: 0 1px 5px #aaa;
    display: none;
}

.qr img {
    width: 90px;
    height: 90px;
    text-align: center;
    margin-left: 15px;
    margin-top: 10px;
    position: relative;
    font-size: 14px;
}

.app:hover .qr {
    display: block;
    color: #b0b0b0;
}

.top1 {
    width: 1226px;
    height: 100px;
    background-size: cover;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
}

.top1 img {
    width: 56px;
    height: 56px;
    margin-top: 20px;
    margin-left: -60px;
}

.top1 a {
    font-size: 16px;
    color: #333333;
    width: 800px;
    height: 0px;
    margin: 5px;
    line-height: 100px;
    text-decoration: none;
}

.top1 a:hover {
    color: rgb(255, 103, 0);
}

.top1 .box3 {
    margin-left: 50px;
}

.shopping {
    position: relative;
    padding-left: 20px;
    z-index: 1000;
    right: 75px;
    top: -1px;

}

.shopping-box {
    width: 316px;
    height: 100px;
    color: #333333;
    background-color: #fff;
    box-shadow: 0 1px 5px #aaa;
    position: absolute;
    left: 3px;
    top: 0px;
    line-height: 100px;
    text-align: center;
    display: none;
}

.nav:hover .shopping-box {
    display: block;
}

.nav-search form {
    display: flex;
    margin-top: 26px;
    margin-right: -117px;
    position: relative;
}

.nav-search input {
    border: 1px solid #e0e0e0;
    height: 48px;
    width: 245px;
    text-indent: 1em;
    border-right: 0;
}

.nav-search {
    margin-right: 55px;
}

.nav-search button {
    width: 50px;
    height: 50px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    color: #616161;
    font-weight: bold;
    border: left 0;
}

.nav-search form:hover input {
    border: 1px solid #515151;
    border-bottom: none;
    border-right: none;
}

.nav-search form input:focus {
    border-color: #ff7600;
}

.nav-search form input:focus+button {
    border-color: #ff7600;
}

.nav-search form:hover button {
    border: 1px solid #515151;
}

.nav-search form button:hover {
    background-color: #ff7600;
    color: #fff;
    border-color: #ff7600;
}

.form-box {
    width: 245px;
    height: 300px;
    background-color: #fff;
    border: 1px solid #000000;
    position: absolute;
    top: 49px;
    left: 0;
    display: none;
}

.banner-one {
    width: 4904px;
    display: flex;
    animation: run 20s linear infinite;
}

@keyframes run {
    0% {
        transform: translateX(0);
    }

    12.5% {
        transform: translateX(-1226px);
    }

    25% {
        transform: translateX(-1226px);
    }

    37.5% {
        transform: translateX(-2452px);
    }

    50% {
        transform: translateX(-2452px);
    }

    62.5% {
        transform: translateX(-3678px);
    }

    75% {
        transform: translateX(-3678px);
    }

    87.5% {
        transform: translateX(-4904px);
    }

    100% {
        transform: translateX(-4904px);

    }
}

.banner-one:hover {
    animation-play-state: paused;
}

.banner-one img {
    width: 1226px;
    height: 460px;
}

.nav-search:hover .form-box {
    display: block;
}

.banner {
    width: 1226px;
    height: 460px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.banner-box img {
    width: 1226px;
    height: 460px;
}

.banner-left {
    width: 234px;
    height: 460px;
    background-color: rgb(155, 154, 158);
    position: absolute;
    top: 0;
}

.banner-left div {
    color: #fff;
    font-size: 14px;
    margin-top: 25px;
    margin-left: 15px;
}

.ad {
    width: 1226px;
    height: 170px;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    position: relative;
}

.ad-one-box::after {
    content: "";
    background-color: #665e57;
    width: 1px;
    height: 64px;
    position: absolute;
    top: 5px;
    left: 75px;
}

.ad-one-box1::after {
    content: "";
    background-color: #665e57;
    width: 1px;
    height: 64px;
    position: absolute;
    bottom: 5px;
    left: 75px;
}

.ad-one-box3::after {
    content: "";
    background-color: #665e57;
    width: 1px;
    height: 64px;
    position: absolute;
    top: 5px;
    left: 150px;
}

.ad-one-box4::after {
    content: "";
    background-color: #665e57;
    width: 1px;
    height: 64px;
    position: absolute;
    bottom: 5px;
    left: 150px;
}

.ad-one-box::before {
    content: "";
    background-color: #665e57;
    width: 64px;
    height: 1px;
    position: absolute;
    top: 85px;
    left: 81px;
}

.ad-one-box1::before {
    content: "";
    background-color: #665e57;
    width: 64px;
    height: 1px;
    position: absolute;
    top: 85px;
    left: 5px;
}

.ad-one-box2::before {
    content: "";
    background-color: #665e57;
    width: 64px;
    height: 1px;
    position: absolute;
    top: 85px;
    left: 160px;
}

.ad .ad-one {
    width: 234px;
    height: 170px;
    background-color: rgb(95, 87, 80);
    display: flex;
    flex-wrap: wrap;
}

.ad .ad-one div {
    width: 76px;
    height: 82px;
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
    color: rgb(207, 205, 203);
}

.ad .ad-two {
    width: 316px;
    height: 170px;
    margin-left: 18px;
}

.ad .ad-three {
    width: 316px;
    height: 170px;
    margin-left: 13px;
}

.ad .ad-four {
    width: 316px;
    height: 170px;
    margin-left: 13px;
}

.ad .ad-one img {
    width: 24px;
    height: 24px;
}

.ad .ad-two img {
    width: 316px;
    height: 170px;
}

.ad-two {
    transition: all 500ms;
}

.ad .ad-two:hover {
    box-shadow: 0 0px 20px #aaa;
}

.ad-three {
    transition: all 500ms;
}

.ad .ad-three:hover {
    box-shadow: 0 0px 20px #aaa;
}

.ad-four {
    transition: all 500ms;
}

.ad .ad-four:hover {
    box-shadow: 0 0px 20px #aaa;
}

.ad .ad-three img {
    width: 316px;
    height: 170px;
}

.ad .ad-four img {
    width: 316px;
    height: 170px;
}

.top-box {
    width: 1226px;
    height: 120px;
    margin: 0 auto;
    margin-top: 30px;
}

.top-box img {
    width: 1226px;
    height: 120px;
}

.top-box1 {
    width: 1226px;
    height: 58px;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.title {
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
}

.more {
    width: 92px;
    height: 17.6px;
}

.more .a,
.i {
    color: #424242;
    font-size: 16px;
    text-decoration: none;
}

.top-box1 div:hover {
    color: #ff7600;
}

.top-box1 a:hover {
    color: #ff7600;
    text-decoration: none;
}

.phone {
    width: 1226px;
    height: 614px;
    margin: 5px auto;
    display: flex;
    background-color: #f5f5f5;
    padding: 0;
}

.k60 img {
    width: 234px;
    height: 614px;
}

.phone-box1 {
    width: 992px;
    height: 614px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 6px;
    padding: 0;
}

.phone-box1-img {
    transition: all 500ms;
    padding: 0;
}

.phone-box1-img:hover {
    transform: translate(0px, -4px);
    box-shadow: 0 1px 20px #aaa;
}

.phone-box1 img {

    width: 160px;
    height: 160px;
    margin-top: 20px;
    margin-left: 35px;
}

.phone-box1 h3 {
    margin-left: 50px;
    font-size: 14px;
}

.phone-box1 a {
    color: #b0b0b0;
    font-size: 12px;
    margin-left: 20px;
    text-decoration: none;
}

.phone-box1 div {
    width: 234px;
    height: 300px;
    background-color: #fff;
    margin: 13px 6px;
    margin-top: 0px;
}

.phone-box1 p {
    color: #ff6700;
    margin-left: 70px;
}

.bottom-ad {
    width: 1226px;
    height: 120px;
    margin: 0 auto;
    margin-top: 30px;
}

.bottom-ad img {
    width: 1226px;
    height: 120px;
}

.bottom {
    width: 1226px;
    height: 100vh;
    margin: 0 auto;
    margin-top: 30px;
}

.bottom-box1 {
    width: 1226px;
    height: 79.8px;
    font-size: 16px;
    color: #616161;
    position: relative;
    ;
}

.bottom-box1 .icon-banshou {
    font-size: 24px;
    line-height: 80px;
    margin-left: 35px;
}

.bottom-box1 .icon-7tianwuliyoutuihuo {
    font-size: 24px;
    line-height: 80px;
    margin-left: 70px;
}

.bottom-box1 .icon-15tianwuliyoutuihuo {
    font-size: 24px;
    line-height: 80px;
    margin-left: 105px;
}

.bottom-box1 .icon-liwuhuodong {
    font-size: 24px;
    line-height: 80px;
    margin-left: 140px;
}

.bottom-box1 .icon-weizhi {
    font-size: 24px;
    line-height: 80px;
    margin-left: 150px;
}

.bottom-box2 {}

.bottom-box1::before {
    content: "";
    background-color: #e0e0e0;
    width: 1226px;
    height: 1px;
    position: absolute;
    bottom: 0;
}

.icon-banshou::after {
    content: "";
    background-color: #e0e0e0;
    width: 1px;
    height: 25px;
    position: absolute;
    left: 200px;
    top: 30px;
}

.icon-7tianwuliyoutuihuo::after {
    content: "";
    background-color: #e0e0e0;
    width: 1px;
    height: 25px;
    position: absolute;
    left: 425px;
    top: 30px;
}

.icon-15tianwuliyoutuihuo::after {
    content: "";
    background-color: #e0e0e0;
    width: 1px;
    height: 25px;
    position: absolute;
    left: 675px;
    top: 30px;
}

.icon-weizhi::after {
    content: "";
    background-color: #e0e0e0;
    width: 1px;
    height: 25px;
    position: absolute;
    left: 940px;
    top: 30px;
}

.bottom-box2 {
    margin-left: 100px;
    position: relative;
    width: 1226px;
    height: 392.5px;
}

.bottom-left {
    width: 160px;
    height: 312.5px;
    margin-top: 38px;
    margin-left: 30px;
    font-size: 14px;
}

.bottom-left1 {
    width: 160px;
    height: 312.5px;
    margin-top: -314px;
    margin-left: 200px;
    font-size: 14px;
}

.bottom-left2 {
    width: 160px;
    height: 312.5px;
    margin-top: -314px;
    margin-left: 370px;
    font-size: 14px;
}

.bottom-left3 {
    width: 160px;
    height: 312.5px;
    margin-top: -314px;
    margin-left: 540px;
    font-size: 14px;
}

.bottom-left4 {
    width: 160px;
    height: 312.5px;
    margin-top: -314px;
    margin-left: 710px;
    font-size: 14px;
    position: relative;
}

.bottom-right {
    width: 251.8px;
    height: 79.6px;
    margin-top: -314px;
    margin-left: 973px;
}

.bottom-box2 p {
    font-size: 12px;
    margin-top: 10px;
    color: #757575;
    margin-top: 13px;
}

.bottom-box2 p:hover {
    color: #ff6700;
}

.bottom-left4::after {
    content: "";
    background-color: #e0e0e0;
    width: 1px;
    height: 79.6px;
    position: absolute;
    top: 0;
    right: 30px;
}

.bottom-right {
    width: 251.8px;
    height: 79.6px;
    position: absolute;
    right: 50px;
}

.bottom-right span {
    font-size: 22px;
    color: #ff6700;
}

.bottom-right div {
    font-size: 12px;
    color: #616161;
    margin-top: 10px;

}

.bottom-right button {
    margin-top: 10px;
    width: 118px;
    height: 28px;
    border: 1px solid #ff6700;
}

.icon-duihuakuang4 {
    color: #ff6700;
}

.bottom-right button:hover {
    background-color: #ff6700;
}

.bottom-right ul:hover {
    color: #fff;
}

.Xiaomi {
    height: 19px;
    margin-left: 400px;
    margin-top: 30px;
}

.Xiaomi img {
    width: 368px;
    height: 21px;
}

.position-right {
    position: fixed;
    top: 128px;
    right: 0px;
    width: 83.6px;
    height: 91.6px;
    background-color: #fff;
    color: #999999;
}

.position-right img {
    width: 30px;
    height: 30px;
    margin-top: 20px;
    margin-left: 25px;
}

.position-right1 {
    position: fixed;
    top: 220px;
    right: 0px;
    width: 83.6px;
    height: 91.6px;
    background-color: #fff;
    color: #999999;
}

.position-right1 img {
    width: 30px;
    height: 30px;
    margin-left: 25px;
    margin-top: 20px;
}

.position-right2 {
    position: fixed;
    top: 310px;
    right: 0px;
    width: 83.6px;
    height: 91.6px;
    background-color: #fff;
    color: #999999;
}

.position-right2 img {
    width: 30px;
    height: 30px;
    margin-left: 25px;
    margin-top: 20px;
}

.position-right3 {
    position: fixed;
    top: 380px;
    right: 0px;
    width: 83.6px;
    height: 91.6px;
    background-color: #fff;
    color: #999999;
}

.position-right3 img {
    width: 30px;
    height: 30px;
    margin-left: 25px;
    margin-top: 20px;
}

.position-right4 {
    position: fixed;
    top: 460px;
    right: 0px;
    width: 83.6px;
    height: 91.6px;
    background-color: #fff;
    color: #999999;
}

.position-right4 img {
    width: 30px;
    height: 30px;
    margin-left: 25px;
    margin-top: 20px;
}

.position-right5 {
    position: fixed;
    top: 580px;
    right: 0px;
    width: 83.6px;
    height: 91.6px;
    background-color: #fff;
    color: #999999;
}

.position-right5 img {
    width: 30px;
    height: 30px;
    margin-left: 25px;
    margin-top: 20px;
}

.position-right5 a {
    text-decoration: none;
    color: #999999;
}