HTML+CSS大作业：仿华为官网（5页）

于 2024-09-10 16:41:44 发布
阅读量992 收藏 6
点赞数 17
分类专栏： html基础网页制作 文章标签： html css 课程设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53453950/article/details/142102535
版权

html作业基础水平制作，适用于初学者，页面排版干净，包含了表单表格超链接等基础知识，采用了html+css来实现布局，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计并将其转换为代码的过程来实践设计。

难度系数：★★★☆☆

一、网站题目

仿华为商城，参考华为商城，华为商城制作等等。

二、网站描述

本网站是参考华为商城制作的网站，网站内容分为五个板块，分别是主页手机，平板，手机详情页，购物车页、登录这五个页面，画面布局风格统一，最可见的就是导航栏，首页和平板页都有banner图。主要就是参考华为商城，结合自己改造来制作。

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的布局结构。多采用div+css来实现布局

网站程序方面：采用html+css+js技术来实现网站，并且兼容市面主流浏览器，打开不会错位不会乱码。

网站素材方面：通过网络社交网站等搜集图片和文字，运用适当的处理方法来对素材进行处理。

网站文件方面：网站系统文件种类包含：css文件夹、js文件夹、images文件夹；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

四、网站效果

这里对网站五个界面做了截图展示

HTML+CSS网站分享：仿写华为商城

五、部分代码制作

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>华为官网</title>
  <link rel="stylesheet" href="style/style.css">
  <link rel="stylesheet" href="style/iconfont.css">
  <link href="style/swiper-3.4.2.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style/banner.css">
  <script type="text/javascript" src="js/swiper-3.4.2.min.js"></script>
</head>
<body class="index">
	<div style="background: #fff;">
		<div class="header wrap">
			<div class="logo">
				<a href="index.html" class='active'><img src="images/logo.svg" alt="" width="250px"></a>
			</div>
			
			<div class="search">
				<input type="text">
				<i class="iconfont icon-search"></i>
			</div>
			<div class="tools">
				<a href="cart.html">	<i class="iconfont icon-cart"></i></a>
				<i class="iconfont icon-fav"></i>
			    <a href="zhuce.html">	<i class="iconfont icon-user"></i></a>
			</div>
	</div>
	</div>
   <div class="nav">
	<ul wrap>
		<li>
			<a href="category.html">手机</a>
		</li>
		<li>
			<a href="index.html">电脑</a>
		</li>
		<li>
			<a href="index.html">平板</a>
		</li>
        <li>
			<a href="index.html">智慧屏</a>
		</li>
		<li><a href="index.html">穿戴</a></li>
		<li><a href="index.html">耳机音响</a></li>
		<li><a href="index.html">全屋智能</a></li>
		<li><a href="index.html">路由器</a></li>
		<li><a href="index.html">HarmonyOS 4</a></li>
	</ul>
   </div>
   <div class="clear"></div>
   <div class="banner">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="./images/banner01.jpg" alt=""></div>
			<div class="swiper-slide"><img src="./images/banner02.jpg" alt=""></div>
			<div class="swiper-slide"><img src="./images/banner03.jpg" alt=""></div>
		</div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
		<div class="swiper-pagination"></div>
	</div>
   </div>
   <div class="container">
   	<div class="container_c">
	  
		<div class="main">
			<div class="imgListWrap">
				<h3 class="title">Mate 系列</h3>
				<div class="layout-one-box">
					<div class="layout-one-img">
						<div class="layout-one-left rounded">
							<img src="images/mb01.jpg" alt="">
						</div>
						<div class="layout-one-center rounded">
							<img src="images/mb02.jpg" alt="">
						</div>
						<div>
							<div class="layout-one-top rounded">
								<img src="images/mb03.jpg" alt="">
							</div>
							<div class="layout-one-bottom rounded">
								<img src="images/mb04.jpg" alt="">
							</div>
						</div>
					</div>
					<div class="info">
						<div class="left-info">
							<h3>HUAWEI Mate 60 Pro</h3>
							<p><span class="price">￥6499 起</span></p>
						</div>
						<div class="right-btn">
							<a href="prdetail.html" class="know-more-btn">了解更多</a>
							<a href="cart.html" class="buy-btn">购买</a>
						</div>
					</div>
				</div>
				<ul>
					<li>
						<a href="prdetail.html">
							<div class="li_c">
								<div class="img">
									<img src="images/m01.jpg" alt="">
								</div>
								<div class="info">
									<h3>HUAWEI Mate 60 Pro+</h3>
									<p class="intro">双卫星通信
										<br/>超可靠玄武架构</p>
									<p><span class="price">￥8999 起</span></p>
								</div>
							</div>
					   </a>
					</li>
					<li>
						<a href="prdetail.html">
							<div class="li_c">
								<div class="img">
									<img src="images/m02.jpg" alt="">
								</div>
								<div class="info">
									<h3>HUAWEI Mate X5</h3>
									<p class="intro">超轻薄全能折叠
										<br/>玄武钢化昆仑玻璃</p>
									<p><span class="price">￥12999 起</span></p>
								</div>
							</div>
						</a>
					</li>
					<li><a href="prdetail.html">
						<div class="li_c">
							<div class="img">
								<img src="images/m03.jpg" alt="">
							</div>
							<div class="info">
								<h3>HUAWEI Mate 60 RS 非凡大师</h3>
								<p class="intro">双卫星通信
									<br/>玄武钢化昆仑玻璃</p>
								<p><span class="price">￥8999 起</span> </p>
							</div>
						</div>
					</a>
					</li>
					<li><a href="prdetail.html">
						<div class="li_c">
							<div class="img">
								<img src="images/m04.jpg" alt="">
							</div>
							<div class="info">
								<h3>HUAWEI Mate 60</h3>
								<p class="intro">双向北斗卫星消息<br/>超可靠玄武架构</p>
								<p><span class="price">￥5499 起</span></p>
							</div>
						</div></a>
					</li>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		
   	</div>
   </div>
   <div class="footer">
	<div class="wrap">
		<div class="left">
			<h3>在线支持</h3>
			<p>消费者服务热线:950800 7*24小时 | 普通话</p>
			<p>Mate X、非凡大师系列、Art 系列、艺术定制系列专属热线</p>
			<p>950801 在线客服 | 7*24小时</p>
		</div>
		<div class="center">
			<h3>线下支持</h3>
			<ul>
				<li><a href="index.html">服务店查询</a></li>
				<li><a href="index.html">零售店查询</a></li>
			</ul>
		</div>

		<div class="right">
			<h3>帮助</h3>
			<ul>
				<li><a href="index.html">使用条款</a></li>
				<li><a href="index.html">隐私声明</a></li>
				<li><a href="index.html">法律信息 </a></li>
			</ul>
		</div>
	</div>
	<div class="copyright">
		版权所有 © 华为终端有限公司 1998-2024。保留一切权利。粤A2-20044005号
	</div>
   </div>
<script type="text/javascript">
	  var swiper = new Swiper('.swiper-container',{
		autoplay:3000,
		loop:true,
		loopedSlides:3,
		spaceBetween:20,
		centeredSlides:true,
		slidesPerView : 'auto',
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
		});
</script>
</body>
</html>

banner.css

@charset "utf-8";
/* CSS Document */
.swiper-container{
	margin-top:20px;
}	
.swiper-slide{
	width:860px;
	}
.swiper-slide a{
	transition: 0.2s;
	}	
.swiper-slide a:hover{
	opacity:.6;}	
.swiper-pagination{
	text-align:center;
	width:100%;
	margin-top:10px;}
.swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
	margin:0 5px;
	background:#02328d;
}
.swiper-button-prev{
	width:50%;
	height:582px;
	left:-450px;
	top:0;
    background: rgba(0,0,0,0.7);
    border-radius: 5px;
	margin-top:0;
	z-index:99;
	transition: 0.2s;
}	
.swiper-button-prev:before{	
    content: '';
    position: absolute;
    width: 15px;
    height: 100%;
    background: url(../images/slide_prev.png) no-repeat 0 center;
    left: 94%;
    top: 50%;
    margin-top: -180px;
}
.swiper-button-next{
    
	width:50%;
	height:582px;
	right:-450px;
	top:0;
    background: rgba(0,0,0,0.7);
    border-radius: 5px;
	margin-top:0;
	z-index:99;
	transition: 0.2s;
	}
.swiper-button-next:after{	
    content: '';
    position: absolute;
    width: 15px;
    height: 100%;
    background: url(../images/slide_prev.png) no-repeat 0 center;
    right: 94%;
    top: 50%;
    margin-top: -180px;
	transform: rotate(180deg);
}
.swiper-button-prev:hover,.swiper-button-next:hover{
	opacity:0.6;
}

六、制作心得

在本网站的制作上有很多难点，不管是排版还是特效等都是，但是通过借助华为官网可以轻松获取图片素材和配色等等。

奥利奥ala
关注
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
华为官网_华为官网_前端仿华为官网_
10-01
HTML+原生css+原生Javascript编写的华为官网项目，适合前端新手练习。
华为官网网页仿制
Arman0716的博客
04-03 2010
首部第二行实现div标签与a标签，ul li标签的嵌套，并在a标签中添加超链接标签与logo图片，ul li标签中添加导航栏文字内容与登录注册、搜索与华为商城的图标与按钮的实现，声明图片与文字的位置显示及对齐方式；首部第二行实现div标签与a标签，ul li标签的嵌套，并在a标签中添加超链接标签与logo图片，ul li标签中添加导航栏文字内容与登录注册、搜索与华为商城的图标与按钮的实现，声明图片与文字的位置显示及对齐方式；因此，通常意义上的网站设计，即指的是网站中各个页面的设计。移动视频、在线直播。
仿华为官方商城
02-27
基于mybatis框架，使用jsp作为页面，里面有我们自己的数据库
仿华为官网纯原生JS+Css编写，无jquery
07-30
仿华为官网,使用纯原生JS和Css编写网站，不使用JQuery等开源包
Vue复刻华为官网 (一)
游坦之的博客
10-21 9853
根据华为网页的布局，我们大体上可以将其划分为7个盒子，如下，由于写一个这样的网页再加上部分动态效果，需要的时间很长，本篇博客只记录了div1、div2、div3的静态效果+轮播图的实现。想要实现的正是最上部那个黑色的圆框我的思路很简单，用四个盒子，其中最大的盒子也就是整个黑色框，大盒子里面包裹着小盒子，每个小盒子对应一个字段（集团网站、选择区域/语言、登录），排版布局，则需要三个小盒子，依次向左浮动（float:left;）。或者大盒子单独采用display:flex；布局我看了一下华为公司的代码，他是用的
基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.zip
12-17
基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.zip 课程作业 静态网页设计实现 模仿华为商城静态网页源码 附静态网页效果链接 项目说明 html+css+js实现 基于html+css+js实现的...
基于HTML+CSS写的静态华为购物商城PC端页面源码.zip
最新发布
08-26
基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于HTML+CSS写的静态华为购物商城PC端页面源码.zip基于...
web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末...
HTML5期末大作业：仿华为手机商城网站设计——仿华为手机电子商城 (1页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业
12-01 1873
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTML期末大作业文章专栏 作品介绍 1.网页作品简介 ：HT
华为：2019年下学期HTML实践任务，模仿华为官网
02-21
华为：2019年下学期HTML实践任务，模仿华为官网
仿华为商城
12-16
仿华为商城的实现，里面有一些html 网页实现的代码，可以学习
仿华为商城网站html模板
12-04
仿华为商城网站html模板
HTML5 仿华为微商城 UI
09-07
仿华为微商城 UI html5
jQuery仿华为官方网站的图文大幅下拉菜单效果.rar
07-09
jQuery仿华为官方网站的图文大幅下拉菜单效果，一款非常大气、漂亮的大屏图文网站菜单，适合产品类网站使用，操作体验也很棒，显得很专业，华为官网目前正在使用的效果，相信喜欢的朋友不在少数，另外代码也可供jQuery爱好者学习研究。
基于Vue+HTML+CSS的仿华为云课堂静态网页设计与实现源码+项目说明.zip
12-24
基于Vue+HTML+CSS的仿华为云课堂静态网页设计与实现源码+项目说明.zip 这个小项目是我用Vue重构的 + 在首页用bootstrap做的轮播图，尝试了一下响应式的页面开发 + 在MOOC课程页面运用了Vue-router子路由功能，同时...
Vue复刻华为官网 (二)
热门推荐
游坦之的博客
10-25 1万+
看了这个gif后，可以清楚的看到产生了三个动画效果：图片"拉近"，"了解更多"从下往上显示出来，阴影。我看了华为官网的源代码，发现图片本身就是有一个mask的，这样能让图片看起来暗一些，也就意味着，当鼠标进入的时候，只需要让mask的背景颜色更深一些，就实现了阴影的效果。至于图片"拉近"，我早就写过了，无非是把图片放大，然后超出盒子的不显示，这个也容易。但了解更多显现，难度就大了一些。我想了很久，最后只有通过位置，来把"了解更多"显示出来，想过用visibility: visible;但效果不太好，也想过用
仿华为电商商城，官网，华为超级新品日demo,大屏霸气且简洁
lucky_fang的博客
04-29 1562
仿华为电商商城，官网，华为超级新品日demo,大屏霸气且简洁
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值