网页开发之仿华为商城案例（内附压缩包下载链接）

最新推荐文章于 2024-06-22 15:23:28 发布

崇志广勤

最新推荐文章于 2024-06-22 15:23:28 发布

阅读量4.2k

点赞数 12

分类专栏：网页开发文章标签： html css

本文链接：https://blog.csdn.net/weixin_47062907/article/details/114027888

版权

网页开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

大家好，我是崇志广勤。今天使用了HTML和CSS，模仿华为商城制作了一个静态的仿华为商城首页。希望大家不吝赐教，互相学习，共同进步！
最终效果图：
在这里插入图片描述
HTML部分的代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="华为官网">
    <meta name="description" content="华为手机、P系列手机、官网正品保障">
    <title>华为商城(VMALL.COM)华为手机、荣耀手机、官网正品保障</title>
    <link rel="icon" href="../img/favicon.ico" type="image/x-icon" /><!-- 华为商标 -->
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1070463_hxqc2v94jij.css" />
    <link type="text/css" rel="stylesheet" href="../navcss/navigation.css" />
    <link type="text/css" rel="stylesheet" href="../navcss/dropDown.css" />
    <link type="text/css" rel="stylesheet" href="../navcss/appdropDown.css" />
    <link type="text/css" rel="stylesheet" href="../navcss/shoppingCart.css" />
    <link rel="stylesheet" href="../rotationcss/rotation.css" />
    <link rel="stylesheet" href="../headercss/header.css" />
    <link rel="stylesheet" href="../rotationcss/leftNav.css" />
    <link rel="stylesheet" href="../rotationcss/lastNav.css" />
</head>
<body>
    <hr color="red"/>
    <div id="container">
 <!--header首行导航栏 -->
        <div class="header">
            <div class="layout">
                <div class="left">
                    <div class="headImg">
                        <a href="https://www.vmall.com/index.html" target="_blank"><!--打开官网链接新窗口 -->
                            <div class="tooltip">
                                <img src="../img/SXppnESYv4K11DBxDFc2.png" alt="华为商城" />
                                <span class="tipText">Vmall.com-华为商城</span>
                            </div>
                        </a>
                        <div class="wordimg">
                            <a href="https://www.vmall.com/huawei" target="_blank">
                                <img src="../img/GrguiqzHENWVYHYWyHBM.png" alt="华为专区" />
                            </a>
                        </div>
                    </div>
                    <div class="headWord">
                        <div class="headerWord">
                            <a href="https://sale.vmall.com/hwmate.html">Mate 20系列</a>
                            <a href="https://www.vmall.com/product/10086785341226.html">华为P系列</a>
                            <a href="https://sale.vmall.com/huawei.html">热销区</a>
                            <a href="https://sale.vmall.com/huawei.html">年货节特惠区</a>
                            <a href="https://sale.vmall.com/huawei.html">登录</a>
                            <a href="https://sale.vmall.com/huawei.html">注册</a>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="form">
                        <form>
                            <input class="input" type="text" placeholder="华为V20 nova4" />
                            <input class="submit" type="submit" value="" /><i class="iconfont icon-sousuo"></i>
                        </form>
                    </div>
                </div>
            </div>
        </div>
<!-- leftNav导航栏的右侧静态图 -->
        <div class="rotation">
            <ul class="list">
                <li class="item"> <a href="https://www.vmall.com/list-36" target="_blank"><img class="imgindex active" src="../img/11.jpg"
                        alt="图片" title="HUAWEI Mate20系列 ￥3999起 立即购买"></a>
                </li>
            </ul>
<!-- leftNav左侧导航栏 -->
            <div class="leftNav">
                <ul>
                    <li>
                        <div class="leftDropdown">
                            <div class="leftContainer">
                                <div class="leftContent">
                                    <div class="leftWord">
                                        <a href="https://www.vmall.com/list-36" target="_blank">手机</a>
                                        <div class="leftWords">
                                            <a href="https://www.vmall.com/list-36" target="_blank">Mate</a>
                                            <a href="https://www.vmall.com/list-36" target="_blank">HUAWEI P系列</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="leftDropdown">
                            <div class="leftContainer">
                                <div class="leftContent">
                                    <div class="leftWord">
                                        <a href="https://www.vmall.com/list-36" target="_blank">笔记本 & 平板</a>
                                        <div class="leftWords">
                                            <a href="https://www.vmall.com/list-36" target="_blank">平板电脑</a>
                                            <a href="https://www.vmall.com/list-36" target="_blank">笔记本电脑</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="leftDropdown">
                            <div class="leftContainer">
                                <div class="leftContent">
                                    <div class="leftWord">
                                        <a href="https://www.vmall.com/list-36" target="_blank">智能穿戴</a>
                                        <div class="leftWords">
                                            <a href="https://www.vmall.com/list-36" target="_blank">手环</a>
                                            <a href="https://www.vmall.com/list-36" target="_blank">手表</a>
                                            <a href="https://www.vmall.com/list-36" target="_blank">VR</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="leftDropdown">
                            <div class="leftContainer">
                                <div class="leftContent">
                                    <div class="leftWord">
                                        <a href="https://www.vmall.com/list-36" target="_blank">智能家居</a>
                                        <div class="leftWords">
                                            <a href="https://www.vmall.com/list-36" target="_blank">路由器</a>
                                            <a href="https://www.vmall.com/list-36" target="_blank">电视盒子</a>
                                            <a href="https://www.vmall.com/list-36" target="_blank">照明</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="leftDropdown">
                            <div class="leftContainer">
                                <div class="leftContent">
                                    <div class="leftWord">
                                        <a href="https://www.vmall.com/list-36" target="_blank">移动设备</a>
                                        <div class="leftWords">
                                            <a href="https://www.vmall.com/list-36" target="_blank">移动充电</a>
                                            <a href="https://www.vmall.com/list-36" target="_blank">移动电视</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="leftDropdown">
                            <div class="leftContainer">
                                <div class="leftContent">
                                    <div class="leftWord">
                                        <a href="https://www.vmall.com/list-36" target="_blank">增值服务&其他</a>
                                        <div class="leftWords">
                                            <a href="https://www.vmall.com/list-36" target="_blank">智能计算</a>
                                            <a href="https://www.vmall.com/list-36" target="_blank">增值卡</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>    
        <hr />
<!-- 第三个导航栏 -->
             <div class="goods w">
                    <h3><a href="#">精品推荐</a></h3>
                    <ul>
                         <li><a href="#">新年好礼</a></li>
                         <li><a href="#">智能手机</a></li>
                         <li><a href="#">穿戴运动</a></li>
                         <li><a href="#">潮酷数码</a></li>
                         <li><a href="#">智能家居</a></li>
                         <li><a href="#">热销专区</a></li>
                         <li><a href="#">年货特区</a></li>
                    </ul>
                        <a href="#" class="mod">更多</a>
            </div>
<!-- 提示标题 -->
            <div class="box w">
                    <div class="box-hd">
                        <h3><a href="#">精品推荐</a></h3>
                            <a href="#">查看全部</a>
                    </div>
<!-- 商品图片链接 -->
             <div class="box-bd">
                <ul class="clearfix">
                    <li>
                        <a href="https://www.vmall.com" target="_blank"> <img src="../img/B1.jpg" height="160" title="HUAWEI 智慧屏 ￥4799起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank"> HUAWEI 智慧屏 ￥4799起</a>
                        </h4>
                        <div class="info">
                             <span>正在热销</span> •  目前已有1925人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                               
                            </span>
                            <span class="origin">原价¥5650</span>
                        </div>
                    </li>
                    <li>
                        <a href="https://www.vmall.com" target="_blank"><img src="../img/B2.jpg" height="160" title="HUAWEI 4A屏 ￥4299起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank">HUAWEI 4A屏 ￥4299起</a>
                        </h4>
                        <div class="info">
                            <span>正在热销</span>  •  目前已有8125人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                            </span>
                            <span class="origin">原价¥5650</span>
                        </div>
                    </li>
                    <li>
                        <a href="https://www.vmall.com" target="_blank"><img src="../img/016.jpg" title="HUAWEI 2020版 ￥4599起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank">HUAWEI 2020版 ￥4599起 </a>
                        </h4>
                        <div class="info">
                            <span>正在热销</span> •  目前已有7125人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                            </span>
                            <span class="origin">原价¥5650</span>
                        </div>
                    </li>
                    <li>
                        <a href="https://www.vmall.com" target="_blank"><img src="../img/08.jpg" title="HUAWEI Mate10 ￥4299起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank">HUAWEI Mate10 ￥4299起</a>
                        </h4>
                        <div class="info">
                        <span>正在热销</span> •  目前已有5125人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                            </span>
                            <span class="origin">原价¥5650</span>
                        </div>
                    </li>
                    <li>
                        <a href="https://www.vmall.com" target="_blank"> <img src="../img/09.jpg" title="HUAWEI K系列 ￥5299起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank">HUAWEI K系列 ￥5299起</a>
                        </h4>
                        <div class="info">
                        <span>正在热销</span> •  目前已有3125人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                            </span>
                            <span class="origin">原价¥5650</span>
                        </div>
                    </li>
                    <li>
                        <a href="https://www.vmall.com" target="_blank"> <img src="../img/010.jpg" title="HUAWEI Q系列 ￥4299起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank"> HUAWEI Q系列 ￥4299起</a>
                        </h4>
                        <div class="info">
                        <span>正在热销</span> •  目前已有9125人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                            </span>
                            <span class="origin">原价¥5650</span>
                        </div>
                    </li>
                    <li>
                        <a href="https://www.vmall.com" target="_blank"> <img src="../img/011.jpg" title="HUAWEI P20 ￥4299起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank">HUAWEI P20 ￥4299起</a>
                        </h4>
                        <div class="info">
                        <span>正在热销</span> •  目前已有8125人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                            </span>
                            <span class="origin">原价¥5650</span>
                        </div>
                    </li>
                    <li>
                        <a href="https://www.vmall.com" target="_blank"><img src="../img/B3.jpg" height="155" title="HUAWEI Note9 ￥5299起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank">HUAWEI Note9 ￥5299起</a>
                        </h4>
                        <div class="info">
                            <span>正在热销</span> •  目前已有2125人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                            </span>
                            <span class="origin">原价¥5650</span>
                        </div>
                    </li>
                    <li>
                        <a href="https://www.vmall.com" target="_blank"><img src="../img/014.jpg" title="HUAWEI R30S ￥7299起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank"> HUAWEI R30S ￥7299起</a>
                        </h4>
                        <div class="info">
                            <span>正在热销</span> •  目前已有1125人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                            </span>
                            <span class="origin">原价¥8650</span>
                        </div>
                    </li>
                    <li>
                        <a href="https://www.vmall.com" target="_blank"><img src="../img/015.jpg" title="HUAWEI K30系列 ￥6299起 立即购买"></a>
                        <h4>
                            <a href="https://www.vmall.com" target="_blank">HUAWEI K30系列 ￥6299起</a>
                        </h4>
                        <div class="info">
                        <span>正在热销</span> •  目前已有4125人购买
                        </div>
                        <br>
                        <div class="price">
                            <span class="miaosha">
                                立即抢购
                            </span>
                            <span class="origin">原价¥7350</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <br>
        <!-- 底部宣传 -->
        <div class="footer">
            <ul class="slogan">
                <li> <img src="../img/lastNavimg/icon.png" alt="icon"><span><a href="#">百强企业 品质保证</a></span></li>
                <li> <img src="../img/lastNavimg/icon2.png" alt="icon"><span><a href="#">7天退货 15天换货</a></span></li>
                <li> <img src="../img/lastNavimg/icon3.png" alt="icon"><span><a href="#">48元起免运费</a></span></li>
                <li> <img src="../img/lastNavimg/icon4.png" alt="icon"><span><a href="#">万家维修网点 全国联保</a></span></li>
            </ul>
        </div>
        <div class="serviceContainer">
            <div class="service">
                <div class="leftserv">
                    <ul class="ul">
                        <li><span><a href="#">购物相关</a></span></li>
                        <li>
                            <p><a href="#">购物指南</a></p>
                        </li>
                        <li>
                            <p><a href="#">配送方式</a></p>
                        </li>
                        <li>
                            <p><a href="#">支付方式</a></p>
                        </li>
                        <li>
                            <p><a href="#">常见问题</a></p>
                        </li>
                    </ul>
                    <ul class="ul">
                        <li><span><a href="#">保修与退换货</a></span></li>
                        <li>
                            <p><a href="#">保修政策</a></p>
                        </li>
                        <li>
                            <p><a href="#">退换货政策</a></p>
                        </li>
                        <li>
                            <p><a href="#">退换货流程</a></p>
                        </li>
                        <li>
                            <p><a href="#">保修状态查询</a></p>
                        </li>
                        <li>
                            <p><a href="#">配件防伪查询</a></p>
                        </li>
                    </ul>
                    <ul class="ul">
                        <li><span><a href="#">维修与技术支持</a></span></li>
                        <li>
                            <p><a href="#">售后网点</a></p>
                        </li>
                        <li>
                            <p><a href="#">预约维修</a></p>
                        </li>
                        <li>
                            <p><a href="#">手机寄修</a></p>
                        </li>
                        <li>
                            <p><a href="#">备件价格查询</a></p>
                        </li>
                        <li>
                            <p><a href="#">上门服务</a></p>
                        </li>
                    </ul>
                    <ul class="ul">
                        <li><span><a href="#">特色服务</a></span></li>
                        <li>
                            <p><a href="#">防伪查询</a></p>
                        </li>
                        <li>
                            <p><a href="#">补购保障</a></p>
                        </li>
                        <li>
                            <p><a href="#">以旧换新</a></p>
                        </li>
                        <li>
                            <p><a href="#">礼品包装</a></p>
                        </li>
                    </ul>
                    <ul class="ul">
                        <li><span><a href="#">关于我们</a></span></li>
                        <li>
                            <p><a href="#">公司介绍</a></p>
                        </li>
                        <li>
                            <p><a href="#">华为商城简介</a></p>
                        </li>
                        <li>
                            <p><a href="#">华为线下门店</a></p>
                        </li>
                        <li>
                            <p><a href="#">华为线下旗舰店</a></p>
                        </li>
                        <li>
                            <p><a href="#">诚征英才</a></p>
                        </li>
                    </ul>
                    <ul class="ul">
                        <li><span><a href="#">在线帮助</a></span></li>
                        <li>
                            <p><a href="#">何时发货</a></p>
                        </li>
                        <li>
                            <p><a href="#">查询发货地</a></p>
                        </li>
                        <li>
                            <p><a href="#">华为实体店地图</a></p>
                        </li>
                        <li>
                            <p><a href="#">三包详情</a></p>
                        </li>
                    </ul>
                </div>
                <div class="rightserv">
                    <div class="rightContent">
                        <dl class="dl">
                            <dt>
                                <h2>400-088-6888</h2>
                            </dt>
                            <dd>
                                <p>24小时客服热线</p>
                            </dd>
                            <dd class="dd"><i class="iconfont icon-zaixiankefu">在线客服</i></dd>
                        </dl>
                        <dl class="dlicon">
                            <span>关注Vmall:</span><i class="iconfont icon-wechat"></i>
                            <i class="iconfont icon-icon-test"></i><i class="iconfont icon-xinlangweibo"></i>
                            <i class="iconfont icon-huawei"></i>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <p style="text-align:center"><small>@华为致力于引领科技潮流 以改变世界为宗旨 © 2021年XTCG Inc.保留所有权利。-沪ICP备15025210号</small></p>
    
</body>

</html>

CSS部分代码之header.css：

.header{
    min-width: 1200px;
    height: 41px;
    padding: 18px 0 15px 0;
    background: #fff;
    position: relative;
    font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
    line-height: 1.5;
    box-shadow: 0 0 46px rgba(0,0,0,0.03);
    z-index: 39;
}
.header .layout{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}
.header .layout .left{
    float: left;
}
.header .layout .left .headImg{
    display: flex;
    justify-content: flex-start;
    float: left;
}
.header .layout .left img{
    height: 36px;
    display:block;
    padding-left: 77px; 
}
.tooltip{
    position: relative;
    display: inline-block;
}
.tipText{
    height: 10px;
    font-size: 10px;
    opacity: 0;
    background-color: honeydew;
    color:black;
    border: 1px solid black;
    padding: 5px 0;
    position: absolute;
    top: 43px;
    left: 172px;
}
.tooltip:hover .tipText{
    opacity: 1;
    transition: all 1s;
}

.header .layout .left .wordimg{
    margin-left: 8px;
}
.header .layout .left .wordimg img{
    display: block;
    height: 24px;
    float: left;
    padding-top: 8px;
    padding-left: 25px;   
}
.header .layout .left .headWord{
    float: left;
}
.header .layout .left .headWord .headerWord a{
    text-decoration: none;
    display: inline-block;
    position: relative;
    left: 8px;
    top: 8px;
    font-size: 16px;
    color: #333;
    padding-left: 19px;
}
.header .layout .left .headWord .headerWord a:hover{
    color: red;
}
.header .layout .right .form{
    width: 320px;
    height: 30px;
    background: #f0f0f0;
    border-radius: 15px;
    position: relative;
    margin-right: 92px;
    margin-top: 5px;
}
.header .layout .right .form .input{
    border: none;
    outline: none;
    display: block;
    padding-left: 10px;
    width: 285px;
    height: 30px;
    line-height: 30px;
    background: transparent;
    float: left;
}
.header .layout .right .form .submit{
    width: 35px;
    height: 30px;
    border: none;
    cursor: pointer;
    position: absolute;
    background: transparent;
}
.header .layout .right .form i{
    color: #353535;
    font-size: 16px;
    font-weight: bolder;
    position: relative;
    top: 3px;
    right: 3px;
}
.header .layout .right .form i:hover{
    color: #a4a4a4;
}

CSS部分代码之leftNav.css：

.leftNav{
    width: 200px;
    height: 440px;
    background-color: rgba(255,255,255,0.95);
    margin: 0;
    padding: 0;
    border-radius: 10px;
    position: relative;
    top: -531px;
    left: 74px;
    z-index: 100;
}
.leftNav ul{
    list-style: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.leftContainer{
    width: 200px;
    height: 74px;
    margin: 0;
    padding: 0;
}
.leftContent{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 25px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.leftWord a{
    font-size: 16px;
    color: #747373;
    text-decoration: none;
}
.leftWord a:hover{
    color: red;
}
.leftWords{
    margin-top: 3px;
}
.leftWords a{
    color:#747373;
    font-size: 14px;
    padding-left: 7px;
}
.leftWords a:first-child{
    padding-left: 0;
}


/* 侧边栏下拉菜单 */
.leftDropdown{
    margin: 0;
    position: relative;
    display: inline-block;
}
.leftDropdownContent ul{
    list-style: none;;
}
.leftDropdownContent{
    width: 662px;
    height: 440px;
    position: absolute;
    display: none;
    top: 129px;
    left: 274px;
    background: #fff;
    box-shadow: 0 2px 36px 0 rgba(0,0,0,0.07);
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 10000000;
}
.firstImg{
    width: 200px;
    height: 80px;;
    float: left;
    margin-left: 30px;
    margin-top:30px;
}
.secondImg{
    width: 200px;
    height: 80px;;
    float: left;
    margin-left: 30px;
    margin-top:30px;
}
.leftDropdownContent img{
    width: 56px;
    height: 56px;
    /* display: inline-block;
    margin-left: 50px;
    padding-left: 51px;
    margin-top: 44px; */
}
/* .leftDropdownContent img:first-child{
    padding: 0;
} */
.leftDropdownContent a{
    text-decoration: none;
    display: block;
}
.leftDropdownContent span a{
    color: #777;
    font-size: 13px;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 10px;
    white-space: nowrap;
}
/* .leftDropdown:hover .leftContainer{
    background-color: #ffffff;
    border-top-left-radius: 10px;
}
.leftDropdown:last-child:hover .leftContainer{
    border-bottom-left-radius: 10px;
    background-color: #ffffff;
} */
.leftDropdown:hover .leftContainer{
    border-top-right-radius:0;
    background-color: #ffffff;
    border-bottom-right-radius: 0;
}

CSS部分代码之rotation.css：

.rotation{
    /* width: 1200px; */
    height: 550px;
    position: relative;
}
.list{
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;      
}
.item  .imgindex{
    width: 100%;
    height: 100%;
    /* display: inline-block; */
    margin: 0;
    position: absolute;
    opacity: 0;
    transition: all 1s;
}
.btn{
    outline: none;
    width: 56px;
    font-size: 28px;
    height: 56px;
    color: white;
    border: none;
    border-radius: 28px;
    background-color: #86838356;
    position: absolute;
    top: 211px;
    z-index: 99;
}
.btn:hover{
    background-color: #868383be;
}
#goPre{
    left: 286px;
}
#goNext{
    right: 100px;
}
.imgindex.active{      
    position: absolute;
    z-index: 12;
    opacity: 1;
}


/* 按钮 */
.pointlist{
    list-style: none;
    padding: 0;
    position: absolute;
    bottom: 91px;
    right: 35px;
    z-index: 1000;
}
.point{
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-radius: 100%;
    border: 1px solid #fff;
    cursor: pointer;
    float: left;
    margin-left:8px; 
}
.point:hover{
    background-color: #fff;
}
.point.active{
    background-color: #fff;
}

CSS部分代码之lastNav.css：

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #f3f5f7;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.w {
    width: 1200px;
    margin: auto;
}
.goods {
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);
    /* 行高会继承， 会继承给3个孩子 */
    line-height: 60px;
}
.goods h3 a {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color:  #050505;
}
.goods ul {
    float: left;
    margin-left: 30px;
}
.goods ul li {
    float: left;
}
.goods ul li a {
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}
.mod {
    float: right;
    margin-right: 30px;
    font-size: 16px;
    color: #98a2a3;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }  
  .price {
    width: 160px;
    height: 24px;
    line-height: 24px;
    border: 1px solid red;
    margin: 0 auto;
}
.miaosha{
    position: relative;
    float: left;
    width: 90px;
    height: 100%;
    background-color:red;
    text-align: center;
    color: #fff;
    font-weight: 700;
    margin-right: 8px;

}
.miaosha i {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    border-width: 24px 10px 0 0;
}
.origin {
    font-size: 12px;
    color: gray;
    text-decoration: line-through;
}

.box {
    margin-top: 30px;
}
.box-hd {
    height: 45px;
}
.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a {
    float: right;
    font-size: 16px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了*/
.box-bd ul {
    width: 1225px;
}
.box-bd ul li {
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
   
}
.box-bd ul li img {
    width: 100%;
}
.box-bd ul li h4 a{
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: rgb(53, 52, 46);
}
.box-bd .info span {
    color: #ec6510;
}
/* footer */
.footer{
    width: 1200px;
}
.slogan{
    overflow: hidden;
    width: 100%;
    padding: 22px 0;
    list-style: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.slogan li {
    float: left;
    margin-left:82px;
    padding-left: 54px;  
}
.slogan li:first-child{
    padding: 0;
}
.slogan span a{
    position: relative;
    bottom: 15px;
    left: 18px;
    color: black;
}
.service{
    padding: 35px 0 24px 0;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #e5e5e5;
}
.leftserv{
    width: 1000px;
    height: 155px;
    padding-top: 5px;
    border-right: 1px solid #e5e5e5;
}
.ul{
   list-style: none;
   float: left; 
   margin-left: 86px;
}
.ul span a{
    font-size: 14px;
    color: #333;
    display: block;
    padding-bottom:7px; 
}
.ul p a{
    font-size: 12px;
    color: #777;
    display: block;
    padding-top: 6px;
}
.rightserv{
    width: 279px;
    min-height: 160px;
    margin-top: 2px;
    text-align: center;
}
dd{
    margin-top: 3px;
}
.dd{
    display: block;
    width: 170px;
    height: 34px;
    padding: 0;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 14px;
    line-height: 34px;
    background: #333;
    cursor: pointer;
    border-radius: 17px;
}
.dd i{
    font-size: 14px;
    color: #fff;
    
}
.dl p{
    font-size: 14px;
}
.dlicon{
    margin-top: 29px;
}

.dlicon span{
    font-size: 14px;
    display: inline-block;
    margin-left: -30px;
}
.dlicon i{
    display: inline-block;
    font-size: 24px;
    padding-left:9px;
}

小结：
本文中的“仿华为商城首页”使用了一个HTML+4个CSS。为了更加清晰可辨别，所以使用了4个CSS。感谢大家！

源码压缩包下载:
网盘链接：https://pan.baidu.com/s/1yjNXQpL18ll6jMZ5tncOXQ
提取码：dxp2

崇志广勤

关注

12
点赞
踩
70

收藏

觉得还不错? 一键收藏
0
评论
网页开发之仿华为商城案例（内附压缩包下载链接）

大家好，我是崇志广勤。今天使用了HTML和CSS，模仿华为商城制作了一个静态的仿华为商城首页。希望大家不吝赐教，互相学习，共同进步！最终效果图：HTML部分的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
复制链接

扫一扫