部分小米商城页面设计

是我的小杨呀
已于 2023-09-08 17:51:12 修改
阅读量153
点赞数
文章标签： css
于 2023-09-08 17:44:48 首次发布
本文链接：https://blog.csdn.net/weixin_56958624/article/details/132730806
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        body{
           margin: 0;
           font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
           color: #333;
        }

        .header{
            width:2560;
            height:65px;
            background-color:#333;
            color: #b0b0b0;
        }

        .header .header-container{
            width:1078px;
            margin:0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position:relative;
            line-height:65px;

        }

        .header .log img{
            width:34px;
            height:34px;
            display:flex;
            align-items:center;
        }

        .menu-list{
            width:665px;
            display:flex;
            text-align:center;
            color:#fff;
            cursor:pointer;
        }

        .menu-list  a{
            color:#b8b8b8;
            font-size: 12px;
            margin-right: 10px;
            display:inline-block;
            text-decoration: none;
        }


        .header .menu-list  a:hover{
            color:#ff6900;
        }

        .account{
            width:110px;
            text-align:center;
            cursor:pointer;
        }

        .account a{
            color:#b8b8b8;
            font-size: 12px;
            margin-right: 10px;
            display:inline-block;
            text-decoration: none;
        }

        .account a:hover{
            color:#ff6900;
        }

        .site-footer .container {
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
        }

        .site-footer .footer-service {
            padding: 27px 0;
            border-bottom: 1px solid #e0e0e0;
        }

        .site-footer .footer-links {
            padding: 40px 0;
        }

        .site-footer .list-service {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .site-footer .list-service li:first-child {
            border-left: 0;
        }

        .site-footer .list-service li {
            float: left;
            width: 19.8%;
            height: 25px;
            border-left: 1px solid #e0e0e0;
            font-size: 16px;
            line-height: 25px;
            text-align: center;
        }

        .site-footer .footer-links .col-links {
            float: left;
            width: 160px;
            margin: 0;
        }

        .site-footer .footer-links .col-links dt {
            margin: -1px 0 26px;
            font-size: 14px;
            line-height: 1.25;
            color: #424242;
        }

        .site-footer .footer-links .col-contact {
            float: right;
            width: 220px;
            border-left: 1px solid #e0e0e0;
            text-align: center;
            color: #616161;
        }

        .site-footer .footer-links .col-contact .phone {
            font-size: 22px;
            line-height: 1;
            color: #ff6700;
        }

        .site-footer .footer-links .col-contact p {
            margin: 0 0 5px 0;
            font-size: 12px;
        }

        .btn-line-primary {
            border-color: #ff6700;
            background: #fff;
            color: #ff6700;
        }

        .btn-small {
            width: 118px;
            height: 28px;
            font-size: 12px;
            line-height: 28px;
        }


        .btn {
            display: inline-block;
            width: 158px;
            height: 38px;
            padding: 0;
            margin: 0;
            border: 1px solid #b0b0b0;
            font-size: 14px;
            line-height: 38px;
            text-align: center;
            color: #ff6700;
            cursor: pointer;
            -webkit-transition: all .4s;
            transition: all .4s;
        }

        .site-footer .container a:hover{
            color:#ff6900;
            text-decoration:none;
        }
    </style>
</head>
<body>

<div class="header">
    <div class=header-container>
        <div class="log">
            <a href="https://www.mi.com/" target="_blank">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UJQB35Eju2-zSsIHGxndfgAAAA?pid=ImgDet&rs=1" alt="">
            </a>
        </div>
        <div class="menu-list">
            <a style="color:#ff6900" href="https://www.mi.com/" target="_blank"><strong>小米官网</strong></a>
            <a href="https://www.mi.com/shop" target="_blank">小米商城</a>
            <a href="https://www.mi.com/visual" target="_blank">小米影像</a>
            <a href="https://home.miui.com/" target="_blank">MIUI</a>
            <a href="https://iot.mi.com/" target="_blank">LOT</a>
            <a href="https://i.mi.com/" target="_blank">云服务</a>
            <a href="https://airstar.com/home" target="_blank">天星数科</a>
            <a href="https://www.xiaomiyoupin.com/" target="_blank">有品</a>
            <a href="https://xiaoai.mi.com/" target="_blank">小爱开放平台</a>
            <a href="https://www.mi.com/a/h/28031.html?sign=16e89fe1079f3f505dfeac5481b7a4d5" target="_blank">Location</a>
        </div>
        <div class="account">
            <a href="https://account.xiaomi.com/fe/service/login/password?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252F%252526sign%25253DNzY3MDk1YzczNmUwMGM4ODAxOWE0NjRiNTU5ZGQyMzFhYjFmOGU0Nw%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%26sign%3DNzY3MDk1YzczNmUwMGM4ODAxOWE0NjRiNTU5ZGQyMzFhYjFmOGU0Nw%2C%2C&_sign=w1RBM6cG8q2xj5JzBPPa65QKs9w%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN" target="_blank">登 录</a>
            <a>|</a>
            <a href="https://cn.account.xiaomi.com/fe/service/register?_qrsize=180&source=&region=CN&sid=mi_eshop&qs=callback%3Dhttp%253A%252F%252Forder.mi.com%252Flogin%252Fcallback%253Ffollowup%253Dhttps%25253A%25252F%25252Fwww.mi.com%25252F%2526sign%253DNzY3MDk1YzczNmUwMGM4ODAxOWE0NjRiNTU5ZGQyMzFhYjFmOGU0Nw%252C%252C%26sid%3Dmi_eshop%26_qrsize%3D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252F%26sign%3DNzY3MDk1YzczNmUwMGM4ODAxOWE0NjRiNTU5ZGQyMzFhYjFmOGU0Nw%2C%2C&_locale=zh_CN&_uRegion=CN" target="_blank">注 册</a>
        </div>
        <div style="clear:both"></div>
    </div>
</div>

<div class="site-footer">
    <div class="container">
        <div class="footer-service">
            <ul class="list-service clearfix">
                <li>
                    <a href="https://www.mi.com/service/aftersale/front" target="_blank">
                        预约维修服务
                    </a>
                </li>
                <li>
                    <a href="https://www.mi.com/service/exchange#back" target="_blank">
                        7天无理由退货
                    </a>
                </li>
                <li>
                    <a href="https://www.mi.com/service/exchange#back" target="_blank">
                        15天免费换货
                    </a>
                </li>
                <li>
                    <a href="https://www.mi.com/service/buy/Postal%20policy" target="_blank">
                        满69元包邮
                    </a>
                </li>
                <li>
                    <a href="https://www.mi.com/service/sitelist" target="_blank">
                        1100余家售后网店
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer-links clearfix">
            <d1 class="col-links col-links-first">
                <dt></dt>
            </d1>
            <d1 class="col-links">
                <dt>选购指南</dt>
                <dd>
                    <a href="https://www.mi.com/search?keyword=%E6%89%8B%E6%9C%BA" target="_blank">手机</a>
                </dd>
                <dd>
                    <a href="https://www.mi.com/search?keyword=%E7%94%B5%E8%A7%86" target="_blank">电视</a>
                </dd>
                <dd>
                    <a href="https://www.mi.com/search?keyword=%E7%AC%94%E8%AE%B0%E6%9C%AC" target="_blank">笔记本</a>
                </dd>
            </d1>
            <d1 class="col-links">
                <dt>
                    服务中心
                </dt>
                <dd>
                    <a href="https://www.mi.com/service/exchange#phone" target="_blank">售后政策</a>
                </dd>
                <dd>
                    <a href="https://www.mi.com/service/aftersale/front" target="_blank">申请售后</a></dd>
                <dd>
                    <a href="https://www.mi.com/service/materialprice" target="_blank">维修服务价格</a></dd>
                <dd>
                    <a href="https://www.mi.com/user/orderList" target="_blank">订单查询</a>
                </dd>
            </d1>
            <d1 class="col-links">
                <dt>线下门店</dt>
                <dd>
                    <a href="https://www.mi.com/service/mihome/list" target="_blank">小米之家</a>
                </dd>
                <dd>
                    <a href="https://www.mi.com/service/sitelist" target="_blank">服务网店</a>
                </dd>
                <dd>
                    <a href="https://www.mi.com/service/family-location" target="_blank">授权体验店/专区</a></dd>
            </d1>
            <d1 class="col-links">
                <dt>关于小米</dt>
                <dd>
                    <a href="https://www.mi.com/about/" target="_blank">了解小米</a></dd>
                <dd>
                    <a href="https://hr.xiaomi.com/" target="_blank">加入小米</a>
                </dd>
                <dd>
                    <a href="https://ir.mi.com/zh-hans" target="_blank">投资者关系</a>
                </dd>
            </d1>
            <d1 class="col-links">
                <dt>关注我们</dt>
                <dd>
                    <a href="https://weibo.com/xiaomishangcheng" target="_blank">新浪微博</a>
                </dd>
                <dd>
                    <a href="javascript:void(0);" target="_blank">官方微信</a>
                </dd>
                <dd>
                    <a href="https://www.mi.com/about/contact/" target="_blank">联系我们</a>
                </dd>
            </d1>
            <div class="col-contact">
                <p class="phone">400-100-5678</p>
                <p>8:00-18:00(仅收市话费)</p>
                <a class="btn btn-line-primary btn-small J_contactBtn">人工客服</a>
            </div>
        </div>
    </div>
</div>

</body>
</html>
完成截图：