仿华为商城VMALL（HTML+CSS）——主页
前言
这个月刚学完HTML和CSS，用华为商城VMALL官网来练习盒子模型Div+CSS、导航栏效果、Banner、表单、二级三级页面等知识点。
一、项目内容
按照2023年九月华为商城官网（https://www.vmall.com/index.html）的设计，基本实现华为商城官网的页面效果。所需技术为HTML和CSS。
华为官网如下图所示：
二、项目目标
目标一：商城首页的页面布局设置
目标二：商城首页中的鼠标滑过特效
目标三：完成登录界面和注册界面的设置
三、项目成果
主页头部
主页导航栏
主页banner
主页图标菜单栏
主页商品区域
主页底部区域
四、代码
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为商城VMALL</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="../iconfont/iconfont.css">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<!-- 头部区域 -->
<header>
<div class="wrapper">
<div class="left">
<ul class=" dingbu_ul">
<li><a href="../html/index.html">首页</a></li>
<li><a href="../html/index.html">消费者业务网站</a></li>
<li><a href="../html/index.html">V码(优购码)</a></li>
<li><a href="../html/index.html">企业购</a></li>
<li><a href="../html/index.html">Select Region</a></li>
<li class="top_hover"><a href="../html/index.html">更多精彩 <span class="iconfont icon-xiangxiajiantou"></span></a></li>
</ul>
</div>
<div class="right">
<ul class=" dingbu_ul">
<li><a href="#">请登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">我的订单</a></li>
<li class="top_hover"><a href="#">客服 <span class="iconfont icon-xiangxiajiantou"></span></a></li>
<li class="top_hover"><a href="#">网站导航 <span class="iconfont icon-xiangxiajiantou"></span></a></li>
<li class="top_hover"><a href="#">手机版 <span class="iconfont icon-xiangxiajiantou"></span></a></li>
</ul>
<div class="cart top_hover">
<a href="#"><span class="iconfont icon-gouwuche"></span> 购物车<i>(0)</i></a>
</div>
</div>
</div>
</header>
<!-- 顶部导航栏区域 -->
<div class="top_nav">
<div class="wrapper">
<div class="logo">
<h1>华为商城</h1>
</div>
<div class="nav_of_huawei">
<ul>
<li><a href="#">华为</a></li>
<li><a href="#">问界汽车</a></li>
<li><a href="#">华为智选</a></li>
<li><a href="#">生态周边</a></li>
</ul>
</div>
<div class="search"><a href="#"><span class="iconfont icon-sousuo"></span></a></div>
</div>
</div>
<!-- banner区域 -->
<div class="banner">
<ul class="pic">
<li><a href="#"><img src="../uploads/banner01.webp" alt=""></a></li>
<li><a href="#"><img src="../uploads/banner02.webp" alt=""></a></li>
<li><a href="#"><img src="../uploads/banner03.webp" alt=""></a></li>
<li><a href="#"><img src="../uploads/banner04.webp" alt=""></a></li>
<li><a href="#"><img src="../uploads/banner05.webp" alt=""></a></li>
<li><a href="#"><img src="../uploads/banner06.webp" alt=""></a></li>
<li><a href="#"><img src="../uploads/banner07.webp" alt=""></a></li>
</ul>
<div class="subnav">
<ul>
<li><a href="#">
<div class="left">手机</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">穿戴</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">平板</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">电脑</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">耳机音箱</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">智慧屏</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">门锁路由</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">出行车品</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">数码配件</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">增值服务</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">商用终端</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
<li><a href="#">
<div class="left">生态周边</div>
<div class="right"><span class="iconfont icon-arrow-right"></span></div>
</a></li>
</ul>
</div>
<div class="ball">
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<!-- 图标菜单栏区域 -->
<div class="menu wrapper">
<ul>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu01.webp" alt="">
</div>
<div class="text">智慧办公</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu02.webp" alt="">
</div>
<div class="text">智能家居</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu03.webp" alt="">
</div>
<div class="text">问界汽车</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu04.webp" alt="">
</div>
<div class="text">华为手机</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu05.webp" alt="">
</div>
<div class="text">影音娱乐</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu06.webp" alt="">
</div>
<div class="text">运动健康</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu07.webp" alt="">
</div>
<div class="text">企业商业</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu08.webp" alt="">
</div>
<div class="text">秒杀</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu09.webp" alt="">
</div>
<div class="text">超新计划</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu10.webp" alt="">
</div>
<div class="text">以旧换新</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu11.webp" alt="">
</div>
<div class="text">众测</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/menu12.webp" alt="">
</div>
<div class="text">教育购</div>
</a></li>
</ul>
</div>
<!-- 商品区域 -->
<!-- 甄选推荐 -->
<div class="recommend wrapper">
<div class="title">
<div class="left">
<h2>甄选推荐</h2>
</div>
<div class="right"><a href="#">更多<span class="iconfont icon-arrow-right"></span></a></div>
</div>
<div class="content">
<ul>
<li><a href="#">
<div class="pic">
<img src="../uploads/recommend01.webp" alt="">
</div>
<div class="text">
<div class="desc">
<span>新品</span>问界 新M7
<p>新车上市</p>
<p class="discount"></p>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>249800</i>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/recommend02.webp" alt="">
</div>
<div class="text">
<div class="desc">
HUAWEI P60 PRO
<p>超聚光夜视长焦 | 双向北斗卫星消息</p>
<div class="discount">
<div class="box red">限时直降800元</div>
<div class="box">限时赠</div>
<div class="box">24期0分期利息</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>6188</i>
<div class="pass">
<span class="iconfont icon-renminbi"></span><i>6988</i>
</div>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/recommend03.webp" alt="">
</div>
<div class="text">
<div class="desc">
HUAWEI nova 11
<p>6.88毫米超薄臻彩直屏</p>
<div class="discount">
<div class="box red">限时直降100元</div>
<div class="box">限时赠</div>
<div class="box">12期0分期利息</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>2399</i>
<div class="pass">
<span class="iconfont icon-renminbi"></span><i>2499</i>
</div>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/recommend04.webp" alt="">
</div>
<div class="text">
<div class="desc">
HUAWEI MatePad 11 2023款
<p>120Hz纸感柔光屏</p>
<div class="discount">
<div class="box red">限时直降300元</div>
<div class="box">3期0分期利息</div>
<div class="box">赠积分</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>1999</i>
<div class="pass">
<span class="iconfont icon-renminbi"></span><i>2299</i>
</div>
</div>
</div>
</a></li>
</ul>
</div>
</div>
<!-- 手机专区 -->
<div class="phone wrapper">
<div class="title">
<div class="left">
<h2>手机专区</h2>
</div>
<div class="right"><a href="#">更多<span class="iconfont icon-arrow-right"></span></a></div>
</div>
<div class="content">
<ul>
<li><a href="#">
<div class="pic">
<img src="../uploads/phone01.webp" alt="">
</div>
<div class="text">
<div class="desc">
<span>新品</span>Mate 60 RS 非凡大师
<p>双卫星通信|玄武钢化昆仑玻璃</p>
<div class="discount">
<div class="box">赠积分</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>11999</i>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/phone02.webp" alt="">
</div>
<div class="text">
<div class="desc">
<span>新品</span>Mate 60 PRO+
<p>双卫星通信|超可靠玄武架构</p>
<div class="discount">
<div class="box">赠积分</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>8999</i>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/phone03.webp" alt="">
</div>
<div class="text">
<div class="desc">
<span>新品</span>Mate 60 RS 非凡大师
<p>超可靠玄武架构|全焦段超清影像</p>
<div class="discount">
<div class="box">赠积分</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>5999</i>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/phone04.webp" alt="">
</div>
<div class="text">
<div class="desc">
<span>新品</span>Mate X5 同心套装
<p>同心套装：内含Mate X5 12GB+512GB...</p>
<div class="discount">
<div class="box">赠积分</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>18899</i>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/phone05.webp" alt="">
</div>
<div class="text">
<div class="desc">
<span>新品</span>Mate 60 Pro 同心套装
<p>同心套装：内含Mate 60 Pro 12GB+51...</p>
<div class="discount">
<div class="box">赠积分</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>11399</i>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/phone06.webp" alt="">
</div>
<div class="text">
<div class="desc">
<span>新品</span>Mate 60 Pro
<p>卫星通话|超可靠玄武架构</p>
<div class="discount">
<div class="box">赠积分</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>6999</i>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/phone07.webp" alt="">
</div>
<div class="text">
<div class="desc">
HUAWEI P60 PRO
<p>超聚光夜视长焦|双向北斗卫星消息</p>
<div class="discount">
<div class="box red">限时直降800元</div>
<div class="box">限时赠</div>
<div class="box">24期0分期利息</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>6188</i>
<div class="pass">
<span class="iconfont icon-renminbi"></span><i>6988</i>
</div>
</div>
</div>
</a></li>
<li><a href="#">
<div class="pic">
<img src="../uploads/phone08.webp" alt="">
</div>
<div class="text">
<div class="desc">
HUAWEI P60 Art
<p>形随心动 海岛设计|超聚光夜视长焦</p>
<div class="discount">
<div class="box red">限时直降800元</div>
<div class="box">24期0分期利息</div>
<div class="box">赠积分</div>
</div>
</div>
<div class="price">
<span class="iconfont icon-renminbi"></span><i>7988</i>
<div class="pass">
<span class="iconfont icon-renminbi"></span><i>8988</i>
</div>
</div>
</div>
</a></li>
</ul>
</div>
</div>
<!-- 底部区域 -->
<footer>
<div class="wrapper">
<div class="top">
<ul>
<li><a href="#">
<div class="pic"><img src="../images/bottom_01.webp" alt=""></div>
<p>百强企业，品质保证</p>
</a></li>
<li><a href="#">
<div class="pic"><img src="../images/bottom_02.webp" alt=""></div>
<p>7天退货 15天换货</p>
</a></li>
<li><a href="#">
<div class="pic"><img src="../images/bottom_03.webp" alt=""></div>
<p>48元起免运费</p>
</a></li>
<li><a href="#">
<div class="pic"><img src="../images/bottom_04.webp" alt=""></div>
<p>2000家服务店 全国联保</p>
</a></li>
</ul>
</div>
<div class="middle">
<div class="left">
<dl>
<dt>购物指南</dt>
<dd><a href="#">免息分期</a></dd>
<dd><a href="#">以旧换新</a></dd>
<dd><a href="#">众测活动</a></dd>
<dd><a href="#">企业购</a></dd>
<dd><a href="#">O2O采购</a></dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd><a href="#">门店维修</a></dd>
<dd><a href="#">保修政策</a></dd>
<dd><a href="#">防伪查询</a></dd>
<dd><a href="#">退换货政策</a></dd>
<dd><a href="#">手机寄修服务</a></dd>
</dl>
<dl>
<dt>维修与技术支持</dt>
<dd><a href="#">服务店</a></dd>
<dd><a href="#">预约维修</a></dd>
<dd><a href="#">手机寄修</a></dd>
<dd><a href="#">备件价格查询</a></dd>
<dd><a href="#">上门服务</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="#">防伪查询</a></dd>
<dd><a href="#">补购保障</a></dd>
<dd><a href="#">以旧换新</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">公司介绍</a></dd>
<dd><a href="#">华为零售店</a></dd>
<dd><a href="#">商家中心</a></dd>
<dd><a href="#">意见反馈</a></dd>
<dd><a href="#">规则中心</a></dd>
</dl>
<dl>
<dt>友情链接</dt>
<dd><a href="#">华为集团</a></dd>
<dd><a href="#">华为消费者业务</a></dd>
<dd><a href="#">华为云</a></dd>
<dd><a href="#">华为应用市场</a></dd>
<dd><a href="#">华为心声社区</a></dd>
</dl>
</div>
<div class="right">
<div class="line"></div>
<div class="right_content">
<div class="call box">950805</div>
<div class="desc box">7 x 24 小时客服热线 (仅收市话费)</div>
<div class="btn box">
<a href="#"><span class="iconfont icon-kefudianhua"></span>在线客服</a>
</div>
<div class="focus box">
<h2>关注VMALL：</h2>
<ul>
<li><a href="#"><span class="iconfont icon-weixin"></span></a></li>
<li><a href="#"><span class="iconfont icon-toutiao"></span></a></li>
<li><a href="#"><span class="iconfont icon-xinlangweibo"></span></a></li>
<li><a href="#"><span class="iconfont icon-baidu"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="left">
<img src="../images/logo_app.png" alt="">
</div>
<div class="middle1">
<ul class="first">
<li><a href="#" class="shuline red">华为集团</a></li>
<li><a href="#" class="shuline red">华为CBG官网</a></li>
<li><a href="#" class="shuline red">华为应用市场</a></li>
<li><a href="#" class="shuline red">HarmonyOS</a></li>
<li><a href="#" class="shuline red">华为终端云空间</a></li>
<li><a href="#" class="shuline red">开发者联盟</a></li>
<li><a href="#">华为商城手机版</a></li>
</ul>
<ul>
<li><a href="#" class="red">隐私声明</a></li>
<li><a href="#" class="red">服务协议</a></li>
<li><a href="#" class="red">COOKIES</a></li>
<li><span> Copyright © 2012-2023 华为终端有限公司 版权所有</span></li>
<li><a href="#" class="red">| 经营资质 |</a></li>
<li><a href="#" class="red">粤ICP备19015064号</a></li>
<li><div class="line"></div></li>
<li><a href="#" class="red">粤公网安备 44190002003939号</a></li>
</ul>
<ul>
<li><a href="#" class="red">增值电信业务经营许可证：粤B2-20190762</a></li>
<li><a href="#" class="red">备案主体编号：44201919072182</a></li>
<li><div class="line"></div></li>
<li><a href="#" class="red">粤新出网备（2021）2号</a></li>
<li><div class="line"></div></li>
<li><a href="#" class="red">（粤）网械平台备字[2022]第00005号</a></li>
</ul>
<ul>
<li><a href="#" class="red">互联网药品信息服务资格证（粤）-非经营性-2020-0102</a></li>
<li><div class="line"></div></li>
<li><a href="#" class="red">广东省网络食品交易第三方平台备案：GDWS10168</a></li>
</ul>
</div>
<div class="right">
<a href="#"><img src="../images/bottom_zhizhao.png" alt=""></a>
</div>
</div>
</div>
</footer>
<!-- 右侧固定板块 -->
<div class="right_fixed">
<div class="top">
<a href="#">
<span class="iconfont icon-kefudianhua"></span>
<p>在线客服</p>
</a>
</div>
<div class="bottom">
<a href="#">
<span class="iconfont icon-fanhuidingbu"></span>
<p>返回顶部</p>
</a>
</div>
</div>
</body>
</html>
五、总结
仿华为商城的网页基本是用盒子模型来做的，通过这次华为商城的网页设计，也算是对列表ul嵌套li嵌套a的写法更加熟练，也能更理解盒子模型内外边距的设置以及flex布局。华为商城的设计有很多细节的部分没办法只用CSS来实现，希望之后学习了java之后能把这些细节补上。
2088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
