使用HTML与CSS制作一个简易的华为商城页面和注册页面

最新推荐文章于 2024-05-13 08:31:00 发布
最新推荐文章于 2024-05-13 08:31:00 发布
阅读量2.1w 收藏 372
点赞数 61
分类专栏： 笔记 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51204908/article/details/111402377
版权

话不多说直接上效果图吧

商城网页 导航栏部分是有下划线滑动效果的
本网页的核心就在于此
代码都放在下面了
网页在这里插入图片描述
在这里插入图片描述

好了直接进入到我们的代码部分
第一个网页的html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东商城</title>
    <link rel="stylesheet" href="Demo.css ">
</head>
<body>
  <!-- 第一个黑色部分 -->
    <div id="one">
    <span id="oneTop" onclick="javascript:location.href='注册页面'"><img src="../images/user.png"  id="imgOne"/>注册</span>
</div>
  <!-- 对于导航栏部分的设置 -->
    <div id="tow">
  <img src="../images/logo.png" id="imgTow"/>
  <span id="distance"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  <ul id="padd">
      <li><a href="https://www.vmall.com/?cid=10074" >个人及家庭产品</a></li>
      <li><a  href="https://www.vmall.com/?cid=10074" >商用产品及方案</a></li>
      <li><a  href="https://www.vmall.com/?cid=10074">服务支持</a></li>
	  <li><a href="https://www.vmall.com/?cid=10074">合作伙伴与开发者</a></li>
	  <li><a href="https://www.vmall.com/?cid=10074">关于华为</a></li>
  </ul>
  
  			<span id="shopping">
				<a href="https://www.vmall.com/?cid=10074" target="_blank">
					<img src="../images/cart.png"  id="imgThree"/>在线购买
				</a></span>
 </div>
   <!-- 第一张大图 -->
<div>
<a href="https://www.vmall.com/?cid=10074" target="_blank">	
<img src="../images/banner-top.jpg" id="imgFour"/></a>
</div>
<!-- 中间的一段空白间距标签 -->
   <div id="four" height="168px">推荐信息 </div>
<br /><br /><br /><br /><br />
<div id="six">
	<span>
		<a  href="https://www.vmall.com/?cid=10074" target="_blank">
			<img src="../images/list1.jpg" id="sixOne"> </a>
		<img src="../images/list2.jpg" id="sixTow"/>
	</span>
	
</div>
        <img src="../images/list3.jpg" id="sixThree">
        <img src="../images/list4.jpg" id="sixFour">
        
<div id="seven">
		<a href="https://www.vmall.com/?cid=10074" target="_blank">
			<img src="../images/banner-bottom.jpg"  id="sevenSeven" width="100%">
		</a>	
			
			<div id="last">
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>华为商城</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>华为云</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>华为智能光伏</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>产品定义社区</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>华为心声社区</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>联系我们</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>法律声明</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>隐私保护</span></a>
		</div>
		<img src="../images/help.jpg" id="float">
		</div>
	
      

</body>
</html>

第一个网页的css代码部分

/* 对于顶头黑色背景的装饰 */
#one{
background-color:black;
     height: 28px;
     width: 100%;
}
/* 对于a标签 账户二字的装饰设置 */
#oneTop{
    font-size: 12px;
    color: #ccc;
    position: absolute;
    right: 50px;
    line-height: 28px;
    text-decoration-color:#fff ;
}
/* 对于 账户二字旁a标签的颜色设置 */
#A1{
    color: #fff;
    
}
/* 微调user用户图标的位置使其美观 */
#imgOne{
    position: relative;
    top: 5px;
}
/* 设置tow部分的背景颜色以及高度 */
#tow{
background-color: #FFFFFF;
height: 85px;
line-height: 3px;
}
/* 调整logo图片的位置以及宽度 */
#imgTow{
 width: 150px;
position: relative;
 left: 60px;
}
/* 对于a标签A2的设置 */
#A2{
	text-decoration: none;
	color: #000000;
}
/* 对于购物文字标签的设置 */
#shopping{
	position: absolute;
	right: 20px;
	top: 70px;
}
/* 对于购物图标的微调 */
#imgThree{
	position: relative;
	top: 5px;
	width: 20px;
	height: 20px;
}


/* 对于导航栏下划线动画装饰的设置 */
ul,li{
    display:inline-block;
}
a,a:link{
    color:#000;
    text-decoration:none;
    position:relative;
    padding:10px 15px;
}
a:after{
    content: "";
    width: 0;
    height: 3px;
    background: #c7000b;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: all .2s;
}
a:hover:after,a.active:after{
    left: 0%;
    width: 100%;
}
/* 微调间距 与字体的设置 */
#padd li{
	
	
	padding: 30px;
}




/* 对于第一张大图片的设置 */
#imgFour{
	width: 100%;
	height: 400px;
}
/* 对于中间的一段间隔的标签的设置 */
#four{
	width: 168px;
	height: 100%;
	margin: auto;
	font-size: 28px;
	position: relative;
    top: 65px;
}
/* 对于中间一段间隔的标签的文字的设置 */
#four_word{
	font-size: 28px;
	font-style: inherit;
	color: #333;
	
}

/* 对于第二个插图部分的大小设置 */
#sixOne{
	height: 330px;
	width: 60%;
	
}
#sixTow{
	height: 330px;
	width: 37%;
	position: absolute;
    right: 40px;
}
#sixThree{
	width: 25%;
	height: 330px;
	
}
#sixFour{
	width: 72%;
	height: 330px;
	
}
#sevenSeven{
	width: 100%;
	height: 400px;
}

#last span{
	padding: 10px;
		color: #666;
		font-size: 14px;
}

/* 对于第7部分的设置 */
#7{
	
	position: absolute;
	top: 0px;
	
}
#seven{
	position: relative;
    top: 80px;
}
/* 对于底部的设置 */
#last{
	height: 50px;
	text-align: center;
	background-color: #f2f2f2;
	line-height: 50px;
}
/* 对于浮动图标的设置 */

#float{
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: 50px;
	right: 0px;
}

第一个网页的所有代码都在上面了， 欢迎提出宝贵的修改意见或与我交流学习
如需图片材料 请在下方留言

接下来第二个网页代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<style type="text/css">
		  /* 对于顶部的设置 */
		  #Top{
			 
			  width: 100%;
			  height: 40px;
			
		  }
			
			#TopOne{
				width:100%;
				height: 70px;

			}
			/* 对于第一段文字的设置 */
			#word{
				position: relative;
				left: 165px;
				top: 50px;
				color: #666;
			}
			/* 对于大表格部分的样式设计 */
			#tow{
				
				border: 1px solid #BDBDBD;
				width: 80%;
				margin: auto;
			}
			/* 对于输入框的设置 */
			.input{
				width: 350px;
				height: 30px;
			}
			/* 对于文字的设置 */
			.word{
				font-size: 14px;
				color: #000000;
			}
			/* 对于*样式的设计 */
			.word1
			{
				font-size: 16px;
				color: #F30;
			}
			/* 对于下拉列表的设置 */
			.option{
				width: 355px;
				height: 30px;
			}
			/* 对于多选框的设置 */
			#chek{
				position: relative;
				left: 150px;
			}
			/* 对于多选框文字的设置 */
			#word2{
				font-size: 14px;
				color: #666666;
			}
			
			/* 对于注册按钮的设置 */
			#button{
			width: 101px;
				height: 30px;
			}
			
			/* 对于最后灰色框的设置 */
			#last{
			background-color: #efefef;	
			font-size: 12px;
			color: #666666;
			height: 40px;
			width: 100%;
			position: absolute;
			bottom: 100px;
			line-height: 40px;
			text-align: center;
			left: 60px;
			
			}
		</style>
		
	</head>
	<body>
		
		<!-- 顶部部分 -->
		<div id="Top">
			
			<img src="../images/Top.png" id="TopOne"/> 
		</div>
		
		<h1 id="word"> 注册新的账号</h1>
<br /><br />
		<!-- 大表格部分 -->

		<div id="tow">
	<table align="center" cellpadding="0px"  cellspacing="10px">
		<br /><br /><br />
		<tr >
			<td class="word">账号</td>
			<td><input type="text" class="input" placeholder="请输入账号"></td>
			<td class="word1">*</td>
		</tr>
		<tr >
			<td class="word">电子邮箱</td>
			<td><input type="text" class="input"  placeholder="请输入电子邮箱"></td>
			<td class="word1">*</td>
		</tr>
		<tr >
			<td class="word">密码</td>
			<td><input type="password" class="input" placeholder="请输入密码"></td>
			<td class="word1">*</td>
		</tr>
		
		<tr> 
		  <td>国家/地区</td>
		  <td>
		<select class="option">
			<option value="0" class="option">---中国大陆---</option>
			<option value="1" class="option">---中国台湾---</option>
			<option value="2" class="option">---中国香港---</option>
			<option value="3" class="option">---中国澳门---</option>
			<option value="4" class="option">---外国用户---</option>
		</select>
		</td>
		<td class="word1">*</td>
		</tr>
		
		<tr>
			<td>&nbsp;</td>
			<td id="word2"> <input type="checkbox" >我已阅读并同意华为公司的用户注册协议和隐私声明</td>
		</tr>
		<tr>&nbsp;</tr>
		<tr>&nbsp;</tr>
		
		<tr>
			<td>&nbsp;</td>
			<td align="center"><input type="button" value="注册" id="button"></td>
		</tr>
		
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		
		<span id="last">
	 Uniportal是华为公司对外提供身份认证的唯一入口，在使用华为公司的其他对外服务时，您的Uniportal帐号和登录信息会被共享。
		</span>
		
	</table>
			
			
			
		</div>
	</body>
</html>

如代码写的太粗糙 希望大家对我指正改进

汉秦
关注
  • 61
    点赞
  • 踩
  • 372
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
课程大作业之华为官网（HTML5+CSS3）
2301_79083605的博客
11-06 722
大家好，本篇文章分析一下 用HTML5+CSS3实现华为官网！ 该网页结构相对简单，比较适合大家当个课程设计啥的！ 大家如果有任何问题或者需要其他页面了均可联系我！ 下面话不多说，直接展示该页面的效果！ 三、项目完整源代码展示 链接：https://pan.baidu.com/s/1EIs1JrhocmHntFzMubjVzA?pwd=ojbk 提取码：ojbk评论都会看！！！
HTML+CSS简单应用实例——购物网站的制作（二）注册页面
weixin_46343805的博客
12-17 5566
HTML+CSS简单应用实例——购物网站的制作（二）注册页面 接上一篇文章，本片文章是注册页面。 下面是效果图： 分析：上方欢迎注册是DIV,下面是表单，点击登录按钮会出现注册成功提示。下方为脚本，同主页。 下方为具体代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘淘网注册</title> <style> .Bar{width:
html和css写的华为商城首页静态网页，.zip
10-01
html和css写的华为商城首页静态网页，.zip
基于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+JS)——华为商城网页(1个页面)
最新发布
weixin_42283461的博客
05-13 2028
HTML静态网页成品作业(HTML+CSS)——华为商城网页(1个页面)
仿华为官网纯原生JS+Css编写，无jquery
07-30
仿华为官网,使用纯原生JS和Css编写网站，不使用JQuery等开源包
HTML5+CSS3实现华为官网（完整版）
m0_63512120的博客
05-31 4832
该网页只用到了html和css知识，文章末尾有项目完整源代码和图片素材供大家参考学习。 大家有任何问题都可以在评论区指出，我们互相学习哟！
使用HTML+CSS完成华为官网登录页面效果（静态页面）
qq_52882006的博客
09-20 2570
【代码】使用HTML+CSS完成华为官网登录页面效果（静态页面）
制作一个简单HTML静态网页（HTML+CSS）
热门推荐
html精品源码
08-06 3万+
🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。🏅......
华为商城主页面/html/web前端
05-29
简单的div和css写的华为商城主页面 部分页面切换写的一般 有些细节处理的不是太好
制作一个企业网站——html华为官网购物商城项目的设计与实现
网页设计与制作 | HTML+CSS+JS
12-31 727
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
使用html和CSS做的华为高仿静态页面
10-18
初学前端做的静态页面，适合初学者学习借鉴，欢迎来指导啊。
华为2017响应式
06-05
华为2017响应式官网+php部分后台
简单html个人网站
07-04
一份最简单的html制作模板，HTML 网页编程 主页模板 本人学习过程中索积累下的部分资料，特此上传共享。
仿华为商城部分前端界面html+css+js
06-28
web前端商城网页项目
html+css京东登录页面
m4587的博客
07-22 3756
代码】html+css京东登录页面。
京东商城项目实战（3）------京东商城注册页面
dengluandai1740的博客
10-07 654
项目实战：京东商城（1）----京东商城首页 　　　　　京东商城（2）----京东商城登录页面 　　　　　京东商城（3）----京东商城注册页面 网页效果： 网页源代码（入需其他源代码，请在评论下方留言）： <!DOCTYPE html> <html lang="en"> <head> <meta charse...
用HTML+css实现华为商城注册页面
04-17
好的，华为商城注册页面是一个常见的表单页面，可以使用HTML和CSS来实现。您可以参考以下代码实现： HTML代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>华为商城注册页面</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>欢迎来到华为商城，请注册成为我们的会员</h2> <form> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password" name="confirm_password" required> <label for="email">电子邮件：</label> <input type="email" id="email" name="email" required> <label for="phone-number">手机号码：</label> <input type="tel" id="phone-number" name="phone_number" required> <label for="address">地址：</label> <input type="text" id="address" name="address" required> <input type="submit" value="注册"> </form> </body> </html> ``` CSS代码： ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #EFEFEF; } h2 { margin-top: 50px; text-align: center; } form { max-width: 500px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } label { display: block; margin-top: 20px; font-size: 18px; color: #333; } input { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } input[type="submit"] { margin-top: 30px; background-color: #FFA500; color: white; font-size: 20px; border: none; border-radius: 5px; padding: 10px; cursor: pointer; } input[type="submit"]:hover { background-color: #FF8C00; } ``` 这段代码会生成一个简单的表单，包括用户名、密码、确认密码、电子邮件、手机号码和地址输入框，以及一个注册按钮。您可以在这个基础上进行样式的修改和添加。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值