代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width==, initial-scale=1.0">
<title> 注册_华为帐号</title>
<style>
.box1{
width: 1472px;
height: 900px;
float: left;
background-color: #ffffff;
}
.box2{
width: 1472px;
height: 60px;
float: left;
background-color: #f1f1f1 ;
}
.kuyij{
color: #d4d8db;
position: relative;
left: 16px;
top: -34px;
}
.gg{
color: #1b1835;
text-align: center;
font-weight: 600;
font-size: larger;
position: relative;
left: 33px;
top: -33px;
}
.box3{
height: 135px;
width: 352px;
float: left;
background-color: rgb(255, 255, 255);
position: relative;
left: 524px;
top: 14px;
text-align: center;
font-size: 36px;
}
.mmmm{
color: #000;
text-align: center;
font-size: 19px ;
position: relative;
bottom: 17px;
}
.box4{
width: 212px;
height: 55px;
float: left;
background-color: #f1f1f1;
position: relative;
border-radius:8px;
left: -166px;
top: 25px;
}
.tttt{
color: #000;
text-align: center;
font-size: 19px ;
position: relative;
bottom: 2px;
}
.box5{
width: 212px;
height: 57px;
float: left;
background-color: #ffffff;
position: relative;
border-radius:8px;
left: -378px;
top: 92px;
}
.ttttt{
color: #000;
text-align: center;
font-size: 19px ;
position: relative;
bottom: 9px;
}
.box6{
width: 434px;
height: 471.28px;
background-color: #ffffff;
float: left;
position: relative;
top: 161px;
right: 280px;
}
.box7{
width: 434px;
height: 45px;
background-color: #f2f2f2;
float: left;
border-radius:8px;
}
.ko{
color: #19191a;
float: left;
position: relative;
top: 10px;
}
.open{
color: #19191a;
float: left;
position: relative;
left: 359px;
}
.box8{
width: 434px;
height: 45px;
background-color: #ffffff;
float: left;
margin-top: 30px;
border-radius:8px;
}
.eee{
width: 140px;
height: 45px;
float: left;
text-align: center;
border-bottom-left-radius:8px;
border-top-left-radius: 8px;
background-color: #f2f2f2;
}
.jjjj{
width: 294px;
height: 45px;
float: left;
background-color: #f2f2f2;
border-bottom-right-radius:8px;
border-top-right-radius: 8px;
position: relative;
left: 140px;
bottom: 21px;
}
.lk{
width:0.7px;
height: 18px;
background-color: #b9b1b1;
position: relative;
bottom: 54px ;
left: 129px;
float: left;
margin-bottom: 5px;
}
.box9{
width: 434px;
height: 45px;
background-color: #f1f1f1;
float: left;
margin-top: 30px;
border-radius:8px;
}
.jjjjj{
color: #8686ef;
float: left;
position: relative;
left: 332px;
bottom: 37px;
}
.hh{
color: #8686ef;
float: left;
position: relative;
left: 332px;
bottom: 37px;
}
.box10{
width: 434px;
height: 45px;
background-color: #f2f2f2;
float: left;
margin-top: 89px;
border-radius:8px;
}
.rrrr{
color: #19191a;
float: left;
position: relative;
top: 10px;
}
.eeeee{
width: 172px;
height: 21px;
float: left;
text-align: center;
background-color: #f2f2f2;
position: relative;
left: 160px;
top: 10px;
}
.box11{
width: 350px;
height:61px ;
background-color: #eba6a9;
float: left;
font-size: 25px;
color: #fff7f5;
text-align: center;
position: relative;
left: 536px;
bottom: -176px;
border-radius:8px;
}
.box12{
width: 1472.8px;
height: 183px;
background-color: #f1f1f1;
float: left;
position: relative;
bottom: -213px;
}
.box13{
width: 1472.8px;
height: 25px;
float: left;
background-color: #f1f1f1;
position: relative;
top: 69px;
}
.box14{
width: 1183px;
height: 43px;
float: left;
text-align: center;
background-color: #0ce96c;
position: relative;
top: 91px;
left: 100px;
}
.hhh{
color: #828282;
text-align: center;
position: relative;
left: 487px;
}
.ku{
color: #d4d8db;
position: relative;
left: 492px;
top: 0px;
}
.hhhh{
color: #828282;
text-align: center;
position: relative;
left: 494px;
}
.kuy{
color: #d4d8db;
position: relative;
left: 497px;
top: 0px;
}
.hhhhh{
color: #828282;
text-align: center;
position: relative;
left: 499px;
}
.kuyi{
color: #d4d8db;
position: relative;
left: 21px;
top: -36px;
}
.hhhhhh{
color: #828282;
text-align: center;
position: relative;
left: 502px;
}
.box14{
width: 1183px;
height: 43px;
float: left;
text-align: center;
background-color: #f1f1f1;
}
.mmm{
color: #aaaaaa;
text-align: center;
position: relative;
left: 65px;
top: 29px;
}
.box15{
width: 434px;
height: 45px;
background-color: #ffffff;
float: left;
border-radius:8px;
position: relative;
top: 26px;
}
.box16{
width: 434px;
height: 45px;
background-color: #ffffff;
float: left;
border-radius:8px;
position: relative;
top: 57px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
                          < img src="../素材/img/华为3333334.png" width="100px" height="70"><span class="kuyij">|</span>
<span class="gg" >华为商城</span>
</div>
<div class="box3">
华为帐号注册 <br><span class="mmmm" >已有帐号，<a href=" ">去登录</a ></span>
</div>
<div class="box4">
    < img src="../素材/img/sj.png" width="20" height="20" style="margin:16px 0px 0px 16px;"><span class="tttt">手机号注册</span>
</div>
<div class="box5">
  < img src="../素材/img/kkkkkkkkkkkkkkkkk.png" width="30" height="30" style="margin:16px 0px 0px 16px;"><span class="ttttt"><a href="../素材/邮箱地址注册.html">邮件地址注册</a ></span>
</div>
<div class="box6">
<div class="box7">
<span class="ko"> 国家/地区        
<span class="open">
<select name="" id="" style="border:0; background-color: #f2f2f2;">
<option value="">+86中国</option>
<option value="">西安</option>
<option value="">广东</option>
</select>
</span>
</span>
</div>
<div class="box8">
<span class="eee" >
<select name="" id="" style="border:0; background-color:#f1f1f1;">
<option value="">+86（中国）</option>
<option value="">+95（缅甸）</option>
<option value="">+81(日本)</option>
<option value="">+1(美国)</option>
</select>
<span class="jjjj">
<input type="text" placeholder=" 手机号" style="width:291px;height:37px; background-color:#f2f2f2; border-radius:8px; border:1px;"></span><span class="lk"></span>
</span>
</span>
</span>
</div>
<div class="box9">
<input type="text" placeholder=" 短信验证码" style="width:430px;height:45px; background-color:#f2f2f2; border-radius:8px; border:1px;">
<span class="jjjjj">
获取验证码
</span>
</div>
<div class="box15">
<input type="password" placeholder=" 密码" style="width:430px;height:45px; background-color:#f1f1f1; border:1px ; border-radius:8px; ">
</div>
<div class="box16">
<input type="password" placeholder=" 确认密码" style="width:430px;height:45px; background-color:#f1f1f1; border:1px ; border-radius:8px; ">
</div>
<div class="box10">
<span class="rrrr">   出生日期</span>
<span class="eeeee">
<select name="" id=""style="border:0; background-color:#f1f1f1;">
<option value="">2004年</option>
<option value="">2005年</option>
<option value="">2006年</option>
<option value="">2007年</option>
<option value="">2008年</option>
<option value="">2009年</option>
</select>
<select name="" id=""style="border:0; background-color:#f1f1f1;">
<option value="">12月</option>
<option value="">1月</option>
<option value="">2月</option>
<option value="">3月</option>
<option value="">4月</option>
<option value="">5月</option>
</select>
<select name="" id=""style="border:0; background-color:#f1f1f1;">
<option value="">19日</option>
<option value="">20日</option>
<option value="">21日</option>
<option value="">22日</option>
<option value="">23日</option>
<option value="">24日</option>
</select>
</span>
</div>
</div>
<div class="box11">注册</div>
<div class="box12"></div>
<div class="box13">
<span class="hhh">华为帐号用户协议</span>
<span class="ku">|</span>
<span class="hhhh">关于华为账号与隐私的声名</span>
<span class="kuy">|</span>
<span class="hhhhh">常见问题</span>
<span class="kuyi">|</span>
<spanclass="hhhhhh">Cookies</span>
</div>
<div class="box14">
<span class="mmm">华为帐号 版权所有 © 2011-2023</span>
</div>
</div>
</div>
</body>
</html>
效果:
做的不好，请谅解！ 谢谢大家的支持！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
