html+css+js网页设计 华为商城9个页面 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
+ 本项目包括9个页面：官网，商城，登录，注册，4个详情页，购物车
+ 官网页面包含轮播图，下拉菜单，搜索框弹出，返回顶部，购物车下二级菜单滑动时的定位切换以及一些C3效果
+ 商城页制作了三种轮播图：背景图的透明度切换，公告处的向上跳动，各详细商品下的左右滑条。背景图处的侧边栏鼠标滑入使用Ajax渲染数据
+ 注册登录成功后各页面原本的登录注册处会变成显示登录的用户名
+ 背景图下四个商品详情页可点击跳转进去详情页
+ 详情页中包括开售倒计时，放大镜，图片导航滑条。未登录是显示的是“提前登录”可跳转登录页，登陆后显示“加入购物车”，添加后弹出添加成功模态框，可拖动。可选择继续浏览或去往购物车
+ 进入购物车页面时判断是否登录，未登录时显示购物车为空，登陆后会渲染该账户上添加的商品的数据
+ 可在购物车页面编辑数量，勾选商品，以及删除商品，时刻更新总价
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/89638601
2，点击上方下载
目录1
目录2
项目视频
html+css+js网页设计 华为商城9个页面
页面1
页面2
页面3
页面4
页面5
页面6
代码展示
<body>
<div class="top">
<div class="t_inner">
<a href="./login.html"><i class="iconfont icon-yonghu"></i>登录</a>
<a href="#"><i class="iconfont icon-diqiu01"></i>选择区域/语言<i class="iconfont icon-jiantou_down"></i></a>
<a href="#"><i class="iconfont icon-ziyuan"></i>集团网站<span class="align"></span><i class="iconfont icon-jiantou_down"></i></a>
</div>
</div>
<div class="slide_f">
<div class="slf_inner">
<dl class="dl_first">
<dt>
<i class="iconfont icon-jiantou"></i>
<span>集团网站</span>
</dt>
<dd>公司介绍、新闻动态、展会活动等信息</dd>
</dl>
<dl>
<dt>
<a href="#">
<span>消费者业务网站</span>
<i class="iconfont icon-jiantou"></i>
</a>
</dt>
<dd>手机，PC和平板等智慧生活产品</dd>
</dl>
<dl>
<dt>
<a href="#">
<span>企业业务网站</span>
<i class="iconfont icon-jiantou"></i>
</a>
</dt>
<dd>企业商用产品、解决方案和云服务</dd>
</dl>
<dl>
<dt>
<a href="#">
<span>运营商网络业务网站</span>
<i class="iconfont icon-jiantou"></i>
</a>
</dt>
<dd>运营商网络解决方案、产品及服务</dd>
</dl>
<dl>
<dt>
<a href="#">
<span>华为云网站</span>
<i class="iconfont icon-jiantou"></i>
</a>
</dt>
<dd>华为云服务及解决方案</dd>
</dl>
</div>
</div>
<div class="slide_s">
<div class="sls_inner">
<h3>选择区域/语言</h3>
<ul>
<li>
<span>Australia</span> -
<a href="#">English</a>
</li>
<li>
<span>Belarus</span> -
<a href="#">Pусский</a>
</li>
<li>
<span>Brazil</span> -
<a href="#">Portuguese</a>
</li>
<li>
<span>Canada</span> -
<a href="#">English</a>
</li>
<li class="imp">
<i class="iconfont icon-jiantou"></i>
<span>China</span> -
<a href="#">简体中文</a>
</li>
<li>
<span>France</span> -
<a href="#">Français</a>
</li>
<li>
<span>Germany</span> -
<a href="#">Deutsch</a>
</li>
<li>
<span>Italy</span> -
<a href="#">Italiano</a>
</li>
<li>
<span>Japan</span> -
<a href="#">日本語</a>
</li>
<li>
<span>Kazakstan </span>-
<a href="#">Pусский</a>
</li>
<li>
<span>Kenya</span> -
<a href="#">English</a>
</li>
<li>
<span>Malaysia </span>-
<a href="#">English</a>
</li>
<li>
<span>Mexico</span> -
<a href="#">Español</a>
</li>
<li>
<span>Myanmar</span> -
<a href="#">ျမန္မာ</a>
</li>
<li>
<span>New Zealand</span> -
<a href="#">English</a>
</li>
<li>
<span>Netherlands</span> -
<a href="#">Dutch</a>
</li>
<li>
<span>Romania</span> -
<a href="#">Română</a>
</li>
<li>
<span>Russia</span> -
<a href="#">Pусский</a>
</li>
<li>
<span>South Africa</span> -
<a href="#">English</a>
</li>
<li>
<span>Spain</span> -
<a href="#">Español</a>
</li>
<li>
<span>Switzerland</span> -
<a href="#">English</a>
</li>
<li>
<span>Thailand</span> -
<a href="#">ภาษาไทย</a>
</li>
<li>
<span>Turkey</span> -
<a href="#">Türkiye</a>
</li>
<li>
<span>Ukraine</span> -
<a href="#">Українська</a>
</li>
<li>
<span>United Kingdom</span> -
<a href="#">English</a>
</li>
<li>
<span>United States</span> -
<a href="#">English</a>
</li>
<li>
<span>Uzbekistan</span> -
<a href="#">Pусский</a>
</li>
<li>
<span>Uzbekistan</span> -
<a href="#">O’zbek</a>
</li>
<li>
<span>Vietnam</span> -
<a href="#">Tiếng Việt</a>
</li>
<li>
<span>Global</span>-
<a href="#">English</a>
</li>
</ul>
</div>
</div>
<div id="header">
<div class="container h_nav">
<a href="#" class="logo"></a>
<ul class="nav">
<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>
<div class="h_right">
<div class="search">
<input type="text" name="" id="inp_s" placeholder="请输入关键字">
<i class="iconfont icon-sousuo1"></i>
<i class="iconfont icon-cuo"></i>
<div class="tan">
<h3>热门搜索:</h3>
<ul>
<li>Mate 40系列手机</li>
<li>手机</li>
<li>P40</li>
<li>5G</li>
<li>华为认证</li>
<li>手机助手</li>
<li>耳机</li>
</ul>
</div>
</div>
<div class="buycar">
<a href="javascript:;">
<i class="iconfont icon-gouwu"></i>
在线购买
<i class="iconfont icon-jiantou_down"></i>
<span class="algin"></span>
</a>
<div class="carbottom">
<a href="./mall.html">
<i class="iconfont icon-gouwuche"></i>
华为商城
</a>
<a href="#">
<i class="iconfont icon-gouwuche"></i>
华为云
</a>
</div>
</div>
<i class="iconfont icon-sousuo h_sousuo"></i>
</div>
</div>
</div>
<div class="banner">
<ul>
<li>
<img src="https://www-file.huawei.com/-/media/corp2020/home/banner/3/vmall-mate40-selling.jpg" alt="">
<a href="#" class="a1">了解更多</a>
</li>
<li>
<img src="https://www-file.huawei.com/-/media/corp2020/home/banner/3/hwcloud_cloudnative_p2.jpg" alt="">
<a href="#" class="a2">了解更多</a>
</li>
<li>
<img src="https://www-file.huawei.com/-/media/corp2020/home/banner/3/tommorrow-today-cn.jpg" alt="">
<a href="#">了解更多</a>
</li>
</ul>
<i class="iconfont icon-youjiantou next"></i>
<i class="iconfont icon-zuojiantou prev"></i>
<ol>
<li><span><em></em></span></li>
<li><span><em></em></span></li>
<li><span><em></em></span></li>
</ol>
</div>
<!-- 主体内容 -->
<div id="main">
<h2>推荐信息</h2>
<span class="h2_bottom"></span>
<div class="products container">
<div class="mate40">
<a href="#" class="all"></a>
<img src="https://www-file.huawei.com/-/media/corp2020/home/box/2/1230/mate40_pro_p.jpg" alt="">
<div class="mask"></div>
<div class="bottom">
<p class="p1">产品</p>
<p class="p2">HUAWEI Mate 40 Pro</p>
<a href="#">了解更多<i class="iconfont icon-jiantou"></i></a>
</div>
</div>
<div class="watch">
<a href="#" class="all"></a>
<img src="https://www-file.huawei.com/-/media/corp2020/home/box/2/1230/watch_gt_2_p.jpg" alt="">
<div class="mask"></div>
<div class="bottom">
<p class="p1">产品</p>
<p class="p2">HUAWEI WATCH GT 2 保时捷设计</p>
<a href="#">了解更多<i class="iconfont icon-jiantou"></i></a>
</div>
</div>
<div class="matebook">
<a href="#" class="all"></a>
<img src="https://www-file.huawei.com/-/media/corp2020/home/box/2/1230/matebook_x_p.jpg" alt="">
<div class="mask"></div>
<div class="bottom">
<p class="p1">产品</p>
<p class="p2">HUAWEI MateBook X 轻启灵感</p>
<a href="#">了解更多<i class="iconfont icon-jiantou"></i></a>
</div>
</div>
<div class="freebuds">
<a href="#" class="all"></a>
<img src="https://www-file.huawei.com/-/media/corp2020/home/box/2/1230/freebuds_studio_p.jpg" alt="">
<div class="mask"></div>
<div class="bottom">
<p class="p1">产品</p>
<p class="p2">HUAWEI FreeBuds Studio 无线头戴耳机</p>
<a href="#">了解更多<i class="iconfont icon-jiantou"></i></a>
</div>
</div>
<div class="actives">
<a href="#" class="all"></a>
<img src="https://www-file.huawei.com/-/media/corp2020/home/box/2/huyanglin.jpg" alt="">
<div class="mask"></div>
<div class="bottom">
<p class="p1">公益活动</p>
<p class="p2">我有一片胡杨林</p>
<a href="#">了解更多<i class="iconfont icon-jiantou"></i></a>
</div>
</div>
<div class="smart">
<a href="#" class="all"></a>
<img src="https://www-file.huawei.com/-/media/corp2020/home/box/2/intelligent-twins.jpg" alt="">
<div class="mask"></div>
<div class="bottom">
<p class="p1">智能体</p>
<p class="p2">打造行业智能体，共建全场景智慧</p>
<a href="#">了解更多<i class="iconfont icon-jiantou"></i></a>
</div>
</div>
<div class="huaweiNews">
<a href="#" class="all"></a>
<img src="https://www-file.huawei.com/-/media/corp2020/home/box/2/dbs-3.jpg" alt="">
<div class="mask"></div>
<div class="bottom">
<p class="p1">新闻</p>
<p class="p2">华为荣获新加坡星展银行DBS<br>
2020年度最有价值科技合作伙伴奖
</p>
<a href="#">了解更多<i class="iconfont icon-jiantou"></i></a>
</div>
</div>
</div>
<div class="video-box">
<video src="https://www-file.huawei.com/-/media/corp2020/home/sbanner/1/t4a-changting3.mp4" autoplay muted loop></video>
<img src="https://www-file.huawei.com/-/media/corp2020/home/sbanner/1/bg-logo.png?la=zh" alt="">
<div>
<p class="p_first">畅听无碍，让听障人士沟通更容易</p>
<span></span>
<p class="p_then">通过科技辅助，为听障朋友们“代言”，让他们的出行和生活不再障碍重重。</p>
<a href="#">了解更多</a>
</div>
</div>
<h2>新闻与活动</h2>
<span class="h2_bottom"></span>
<div class="news container">
<div class="n_left">
<a href="#"></a>
<span>展会活动</span>
<div class="img-box">
<img src="https://www-file.huawei.com/-/media/corp2020/home/event/1/citysummit_shanghai.jpg" alt="">
</div>
<div class="bottom">
<h3>上海城市峰会2020</h3>
<p class="p-middle"><i class="iconfont icon-ditu"></i>中国， 上海<i class="iconfont icon-weimingmingwenjianjia_rili"></i>2020年12月15日</p>
<p class="p-end">智慧上海·进而有为</p>
</div>
</div>
<div class="n_center">
<a href="#"></a>
<span>展会活动</span>
<div class="img-box">
<img src="https://www-file.huawei.com/-/media/corp2020/home/event/1/event-bws-adn-cn.jpg" alt="">
</div>
<div class="bottom">
<h3>Better World Summit 2020</h3>
<p class="p-middle"><i class="iconfont icon-ditu"></i>线上直播<i class="iconfont icon-weimingmingwenjianjia_rili"></i>2020年12月10-11日</p>
<p class="p-end">加速FBB网络自治,使能敏捷商业</p>
</div>
</div>
<div class="n_right">
<span>新闻</span>
<ul>
<li>
<a href="#"></a>
<p>中国科学院沈阳自动化研究所与华为5G+工业网络联合创新中心成立</p>
<i>2020年12月22日</i>
</li>
<li>
<a href="#"></a>
<p>华为与第三方机构发布白皮书:企业数据中心全面迈向自动驾驶网络</p>
<i>2020年12月22日</i>
</li>
<li>
<a href="#"></a>
<p>华为5G和LTE率先完成DEKRA SCAS测试，并正式通过GSMA NESAS安全评估</p>
<i>2020年12月22日</i>
</li>
<li>
<a href="#"></a>
<p>俄罗斯MTS携手华为完成Smart 8T8R全球首商用</p>
<i>2020年12月22日</i>
</li>
<li>
<a href="#"></a>
<p>华为靳玉志:一根光纤点亮绿色智慧房间</p>
<i>2020年12月21日</i>
</li>
</ul>
</div>
</div>
<div class="more">
<a href="#" class="more_actives">更多活动</a>
<a href="#" class="more_news">更多新闻</a>
</div>
</div>
<div id="footer">
<div class="f_inner">
<p><a href="#">首页</a><i class="iconfont icon-sousuo"></i></p>
<div class="f_middle">
<div class="about">
<h3>关于华为</h3>
<div class="links">
<ul class="left">
<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>
<ul class="right">
<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>
</div>
</div>
<div class="ournews">
<h3>新闻与活动</h3>
<div class="links">
<ul>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">展会活动</a>
</li>
<li>
<a href="#">华为直播</a>
</li>
<li>
<a href="#">媒体图库</a>
</li>
</ul>
</div>
</div>
<div class="find">
<h3>发现</h3>
<div class="links">
<ul>
<li>
<a href="#">成功故事</a>
</li>
<li>
<a href="#">行业洞察</a>
</li>
<li>
<a href="#">出版物</a>
</li>
</ul>
</div>
</div>
<div class="ourproducts">
<h3>我们的产品</h3>
<div class="links">
<ul>
<li>
<a href="#">个人及家庭产品</a>
</li>
<li>
<a href="#">企业业务产品</a>
</li>
<li>
<a href="#">运营商网络产品</a>
</li>
<li>
<a href="#">华为云服务</a>
</li>
</ul>
</div>
</div>
<div class="support">
<h3>技术支持</h3>
<div class="links">
<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>
</ul>
</div>
</div>
</div>
<div class="f_end">
<div class="end_l">
<a href="#">华为商城</a>
<a href="#">华为云</a>
<a href="#">华为智能光伏</a>
<a href="#">产品定义社区</a>
<a href="#">华为心声社区</a>
</div>
<div class="end_r">
<a href="#"><i class="iconfont icon-weibo"></i></a>
<a href="#"><i class="iconfont icon-in"></i></a>
<a href="#"><i class="iconfont icon-iconfontweixin"></i></a>
<a href="#"><i class="iconfont icon-toutiao"></i></a>
<a href="#"><i class="iconfont icon-zhihu"></i></a>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="c_inner">
<span class="hw">© 2020华为技术有限公司</span>
<a href="#" class="mr4">粤A2-20044005号</a>
<a href="#">粤公网安备 44030702002388号</a>
<span class="line"></span>
<a href="#" class="lastlink">联系我们</a>
<a href="#" class="lastlink">法律声明</a>
<a href="#" class="lastlink">隐私保护</a>
<a href="#" class="lastlink">除名查询</a>
</div>
</div>
<a href="#" class="consulting">
<i class="iconfont icon-kefu"></i>
</a>
<span class="back">
<i class="iconfont icon-xiajiantou"></i>
</span>
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
