一、前言
对于华为账号登录是自学时做的一个作品,想要学习的小伙伴,可以借鉴的,下面我会展示效果图和部分代码。这个页面相对的简单,页面元素较少,对于初学者可以自己尝试一下!
(注:此次做了华为的一系列网页,可以前往我的主页进行查看)
二、效果成品图
三、代码展示(为HTML代码,CSS代码在下方链接,需要自取)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为账号-登录</title>
<link rel="stylesheet" href="../css/work.css">
</head>
<body>
<div>
<div class="head1">
<div class="head1_1" style="margin: 0 auto;">
<img src="../imgs/logo.png" alt="">
<span id="head1_i1">|</span>
<span>华为商城</span>
</div>
</div>
<!-- 头部 -->
<div class="header" style="margin: 0 auto;">
<div class="i1">
华为帐号登录
</div>
<div class="i2">
<span class="left">
<div class="le1">
<img src="../imgs/erweima.png" alt="">
</div>
<p>若您使用华为手机,请前往“设置”>“华为帐号”扫码登录。</p>
</span>
<span class="mid"></span>
<span class="right">
<input type="text" class="in1" placeholder="手机号/邮件地址/账号名">
<input type="password" class="in1" style="margin-bottom: 10px;" placeholder="密码">
<p class="rip">短信验证码登录</p>
<div class="ridiv">登录</div>
<div class="ridiv1">
<span style="margin-left: 85px;">注册</span>
<span style="color: #e5e5e5;">|</span>
<span>忘记密码</span>
<span style="color: #e5e5e5;">|</span>
<span>遇到问题</span>
</div>
<div class="ridiv2">
<img src="../imgs/qq.png" alt="">
<img src="../imgs/zhifubao.png" alt="">
<img src="../imgs/weixin.png" alt="">
</div>
</span>
</div>
</div>
<!-- 中间 -->
<div style="background-color: #f5f5f5;width:100%;">
<div class="container">
<div class="contain">
<p class="en1">
<a href="">华为账号用户协议</a>
<span>|</span>
<a href="">关于华为账号与隐私的声明</a>
<span>|</span>
<a href="">常见问题</a>
<span>|</span>
<a href="">Cookies</a>
</p>
<p class="en2">华为帐号 版权所有 2011-2023</p>
</div>
</div>
</div>
</div>
</body>
</html>
四、总结
这篇文章只有一个页面,虽然内容不太丰富,但是麻雀虽小,五脏俱全。
加油!坚持就是胜利,明天一定更美好!
五、源码+图片素材
链接:https://pan.baidu.com/s/1LC-qW2wTvBtYzRFVnEz1qQ?pwd=ojbk
提取码:ojbk