HTM期末作业网页-华为手机商城

最新推荐文章于 2024-07-17 14:42:21 发布
最新推荐文章于 2024-07-17 14:42:21 发布
阅读量4k 收藏 79
点赞数 37
分类专栏： 大学HTML+CSS+JavaScript期末作业 文章标签： web期末网页作业 手机商城HTML作业 HTML期末大作业手机商城 手机商城期末网页作业 htmlcssweb作业期末
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41101110/article/details/117963545
版权

HTM作业-华为手机商城，共5个页面（HTML+CSS+JavaScript+Bootstarp）！

 部分网页代码 


<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>index</title>

		<!--导入css连接-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

		<link rel="stylesheet" type="text/css" href="css/style.css" />

		<!--导入js连接-->
		<script src="js/jquery-2.1.1.js"></script>
		<script src="js/bootstrap.min.js"></script>

	</head>

	<body style="background-color: #F6F6F6;">

		<!--顶部导航栏-->
		<nav id="top" class="collapse navbar-collapse">
			<div class="container">
				<div class="row">

					<div class="col-xs-6">
						<ul class="top-link" style="float: 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="category.html">更多精彩</a>
							</li>
						</ul>
					</div>

					<div class="col-xs-6">
						<ul class="top-link">
							<li>
								<a href="#">华为商城</a>
							</li>
							<li>
								<a href="#">花粉俱乐部</a>
							</li>
							<li>
								<a href="#">EMUI</a>
							</li>
							<li>
								<a href="#">登录</a>
							</li>
							<li>
								<a href="#">注册</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</nav>

		<!--下拉导航-->
		<nav id="menu" class="navbar" style="margin-bottom: 0px;">
			<div class="container">

				<!--压缩之后下拉展示-->
				<div class="navbar-header"><span id="heading" class="visible-xs">展示</span>
					<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
				</div>
				<input type="text" id="inputEmail3" placeholder="搜索"  style="float: right; display: block; margin: auto 0;" >
				<div class="collapse navbar-collapse navbar-ex1-collapse">
					<ul class="nav navbar-nav">
						<li>
							<a href="index.html">首页</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">产品</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">关于荣耀</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">新闻评测</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">视频</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">活动</a>
						</li>
						<li class="dropdown">
							<a href="category.html">商品展示</a>
						</li>

					</ul>


				</div>

			</div>
		</nav>

		<!--轮播图片-->
		<div id="page-content" class="home-page" style="margin-top:0;">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">

						<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

							<ol class="carousel-indicators hidden-xs">
								<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
								<li data-target="#carousel-example-generic" data-slide-to="1"></li>
								<li data-target="#carousel-example-generic" data-slide-to="2"></li>
							</ol>

							<div class="carousel-inner">
								<div class="item active">
									<img src="img/lb1.jpg" alt="First slide">

									<div class="header-text hidden-xs">
										<div class="col-md-12 text-center">
										</div>
									</div>
								</div>
								<div class="item">
									<img src="img/lb2.jpg" alt="Second slide">

									<div class="header-text hidden-xs">
										<div class="col-md-12 text-center">
										</div>
									</div>
								</div>
								<div class="item">
									<img src="img/lb3.jpg" alt="Third slide">

									<div class="header-text hidden-xs">
										<div class="col-md-12 text-center">
										</div>
									</div>
								</div>
							</div>

							<!--上一张，下一张-->
							<a class="carousel-control-prev" href="#carousel-example-generic" data-slide="prev">
								<span class="carousel-control-prev-icon"></span>
							</a>
							<a class="carousel-control-next" href="#carousel-example-generic" data-slide="next">
								<span class="carousel-control-next-icon"></span>
							</a>
						</div>
					</div>
				</div>

				<!--中间图片显示-->
				<div class="row" style="margin-left: 0px;margin-right: 0px;">
					<div class="banner">
						<a href="product.html"><img src="img/show.gif" /></a>
					</div>
				</div>

				<!--相关推荐-->
				<div class="row">
					<div class="col-lg-12">
						<div class="heading">
							<h2>相关推荐</h2></div>
						<div class="products">

							<!--第一个-->
							<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
								<div class="product" style="background-color: white;padding: 10px 0px 30px 10px;">

									<div class="buttons">
										<span style="font-size: 25px;color: black;">荣耀20</span><br>
										<span>定格奇幻之美</span>
									</div>

									<div class="image">
										<a href="product.html">
											<img src="img/phone1.jpg" />
										</a>
									</div>

									<div class="buttons" style="margin-top: 30px;">

										<a href="product.html"><img src="img/buy.gif" /></a>
									</div>

								</div>
							</div>

							<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
								<div class="product" style="background-color: white;padding: 10px 0px 30px 0px;">

									<div class="buttons">
										<span style="font-size: 25px;color: black;">荣耀9X</span><br>
										<span>快由“芯”生 超能旗舰</span>
									</div>

									<div class="image">
										<a href="product.html">
											<img src="img/phone2.jpg" />
										</a>
									</div>

									<div class="buttons" style="margin-top: 30px;">

										<a href="product.html"><img src="img/buy.gif" /></a>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
								<div class="product" style="background-color: white;padding: 10px 0px 30px 0px;">

									<div class="buttons">
										<span style="font-size: 25px;color: black;">荣耀V30</span><br>
										<span>5G标杆 不止于快</span>
									</div>

									<div class="image">
										<a href="product.html">
											<img src="img/phone3.jpg" />
										</a>
									</div>

									<div class="buttons" style="margin-top: 30px;">

										<a href="product.html"><img src="img/buy.gif" /></a>
									</div>

								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
								<div class="product" style="background-color: white;padding: 10px 0px 30px 0px;">
									<div class="buttons">
										<span style="font-size: 25px;color: black;">荣耀20青春版</span><br>
										<span>AMOLED屏幕指纹 解锁你的美</span>
									</div>

									<div class="image">
										<a href="product.html">
											<img src="img/phone4.jpg" />
										</a>
									</div>

									<div class="buttons" style="margin-top: 30px;">

										<a href="product.html"><img src="img/buy.gif" /></a>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="row" style="margin-left: 0px;margin-right: 0px;">
					<div class="banner">
						<img src="img/show2.gif" />
					</div>
				</div>


				<div class="row">
					<div class="col-lg-12">
						<div class="heading">
							<h2>最新消息</h2></div>

						<div class="products">
							<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
								<div class="product" style="background-color: white;">
									<div class="image">
										<a href="product.html">
											<img src="img/phone5.png" />
										</a>
									</div>
									<div class="buttons">
										<a href="#" style="background-color: white;">5G标杆不止于快 全系5G双模手机荣耀V30</a>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
								<div class="product" style="background-color: white;">
									<div class="image">
										<a href="product.html"><img src="img/phone6.png" /></a>
									</div>
									<div class="buttons">
										<a href="#" style="background-color: white;">荣耀MagicBook京东平台销量破万台，表现强势！</a>
									</div>

								</div>
							</div>
							<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
								<div class="product" style="background-color: white;">
									<div class="image">
										<a href="product.html"><img src="img/phone7.png" /></a>
									</div>
									<div class="buttons">
										<a href="#" style="background-color: white;">荣耀20 斩获2000-3000元价位单品销量冠军！</a>
									</div>

								</div>
							</div>

						</div>
					</div>
				</div>

				<!--下面的大牌图片-->
				<div class="row">
					<div class="banner mx-0">
						<div class="col-sm-6">
							<img src="img/show3.gif" />
						</div>
						<div class="col-sm-6">
							<img src="img/show4.gif" />
						</div>
					</div>
				</div>

			</div>
		</div>

		<!--脚步-->
		<footer>
			<div class="container">
				<div class="wrap-footer">
					<div class="row">
						<!--<div class="col-md-3 col-footer footer-1">
						
					</div>
					-->
						<div class="col-md-3 col-footer footer-1">
							<div class="heading">
								<h4>关于荣耀</h4></div>
							<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 class="col-md-3 col-footer footer-2">
							<div class="heading">
								<h4>产品</h4></div>
							<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>
							</ul>
						</div>
						<div class="col-md-3 col-footer footer-3">
							<div class="heading">
								<h4>快速链接</h4></div>
							<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 class="col-md-3 col-footer footer-4">
							<div class="heading">
								<h4>联系我们</h4></div>
							<ul>
								<li><span class="glyphicon glyphicon-home"></span>California, United States 3000009</li>
								<li><span class="glyphicon glyphicon-earphone"></span>950800</li>
								<li><span class="glyphicon glyphicon-envelope"></span>infor@yoursite.com</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="copyright">
				<div class="container">
					<div class="row">

						<span>法律声明  |   隐私声明  |   免责条款  |   关于cookies</span><br />
						<span>Copyright © 2011-2019 华为终端有限公司 版权所有 保留一切权利  |  苏公网安备 32011402010006号 粤ICP备19015064号</span>

					</div>
				</div>
			</div>
		</footer>

	</body>

</html>

 部分网页截图

 

IT--精英联盟
关注
  • 37
    点赞
  • 踩
  • 79
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
Web前端培训项目实战—华为荣耀商城
Icketang_的博客
08-07 912
昵称处领取项目实战视频教程 复习： 1.1到目前所学的布局方式 table布局： div+css布局： 固定布局 百分比布局 1.2 盒子模型 Margin border padding content 1.3 布局模型 流动模型 标准流 block inline inline-block 浮动模型 left right 层模型 relative absolute fixed...
HTML5期末大作业：手机商城网站设计——仿oppo官网手机商城(1页) HTML+CSS+JavaScript 学大学生网页制作期末作业
11-24 2933
HTML5期末大作业：手机商城网站设计——仿oppo官网手机商城(1页) HTML+CSS+JavaScript 学大学生网页制作期末作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可
制作一个企业网站——html华为官网购物商城项目的设计与实现
网页设计与制作 | HTML+CSS+JS
12-31 732
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
基于HTML+CSS写的静态华为购物商城PC端页面源码.zip
08-26
【资源说明】 基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能。 4、项目代码可做一定改动，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
大学生HTML期末大作业——HTML+CSS+JavaScript购物商城（华为手机）
最新发布
...
07-17 1452
HTML+CSS+JS【购物商城】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
华为商城主页面/html/web前端
05-29
简单的div和css写的华为商城主页面 部分页面切换写的一般 有些细节处理的不是太好
用html制作一个华为页面,Web前端项目实战——华为荣耀商城（学完html+css就可以做）...
weixin_33902056的博客
06-03 2609
复习：1.1到目前所学的布局方式table布局：div+css布局：固定布局百分比布局1.2 盒子模型Margin border padding content1.3 布局模型流动模型 标准流 block inline inline-block浮动模型 left right层模型 relative absolute fixed1.4 BFC(Block Formating C...
微信小程序-购物商城-期末大作业
07-17
在这个“微信小程序-购物商城-期末大作业”中，开发者构建了一个完整的在线购物平台，旨在帮助学习者掌握微信小程序的基本开发技能和实战经验。 购物商城小程序包含以下几个核心组成部分： 1. **搜索栏**：这是...
web期末大作业-基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.rar
05-19
本学期Web期末大作业，我们为您呈现一个精心制作的静态网页源码项目——基于HTML+CSS+JS实现的仿华为商城。经过严格的运行测试，我们确保该项目在各大主流浏览器中均能完美呈现，无兼容性问题。 这个项目不仅是一个...
[期末网页作业]-精仿华为官网10个网页（html+css+js）
07-05
经过漫长的期末考试季节，我成功地完成了一个华为官网的仿写项目，并且非常高兴地与大家分享。这个项目包含了10个页面，每一个页面都经过了精心的设计和努力的填充。 首先，我注重了页面的整体布局与设计。借鉴了...
web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末...
使用html和CSS做的华为高仿静态页面
10-18
初学前端做的静态页面，适合初学者学习借鉴，欢迎来指导啊。
高仿华为商城源码
12-04
仿的一个华为商城的项目，写的时候没有用任何第三方类库，HttpClient，数据库存储，内部缓存和外部缓存都是自己写的。有不完善的地方大家多多海涵。大家相互学习
0701.html，用于期末作业，学习借鉴
12-16
响应式网页，实际案例，可做期末作业
第1章 创建一个html网页
m0_72647241的博客
11-17 790
学习前端
HTML+CSS实现的华为商城静态网页设计项目分享
爱吃雪糕的小布丁的博客
07-11 6211
项目用到知识点：HTML5+CSS3，网页设计期末项目，华为商城
MT6761处理器介绍
szx940213的博客
09-17 3万+
听说刚出来的这款MT6761处理器有可能会是今年或者明年MTK主推的入门级芯片，不知道是不是真的，还有现在有人在做这个平台的开发吗。到现在也没有任何量产的消息，相关资料也很少。 在这就简单的坐下相关介绍。 MT6761处理器： MT6761具有集成的蓝牙、fm、wlan和gps模块，是一个高度集成的基带平台，包括调制解调器和应用处理子系统启用LTE/LTE-A和C2K智能手机应用程序。该芯片...
华为交换机路由器最新默认密码大全
热门推荐
收集盒 Book box
11-01 15万+
华为交换机路由器最新默认密码大全包括console、telnet、web、bootrom登陆，框式与合式设备，是目前最全的密码大全 版本 缺省用户名 缺省密码 缺省级别（级） Console口/telnet登录（框式&盒式） V1R3C00 无 无 无 V1R5C
鲲鹏云基础服务技术题库（客观题自用版）
12-15
包含了单选题、多选题和判断题，涵盖了华为云中的弹性云服务器（ECS）、对象存储服务（OBS）、数据库服务（RDS）、密钥管理服务（KMS）、监控服务等多个方面，旨在帮助学习者进行期末复习或自我测试。" 1. 共享镜像...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值