1、引言
或许有不少小伙伴和我一样是一个资深书虫,对网络小说极其痴迷,不知道是不是因为受到了小说的影响,最近不知怎么滴,居然头脑发热,冒出了想搞一个小说网站的想法,于是乎,就倒腾出了一个移动端小说注册页面,发出来分享一下。
2、小说网站网址
//下面是书香小说网的移动端网址,感兴趣的朋友可以对比看一下
//https://wap.ibiquges.org/
3、实现代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>用户注册</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
/*不设置边距会有空白,且子标签大小不能超过body标签大小,否则同样会有空白*/
body{
width: 100%;
margin: 0;
padding: 0;
}
/*顶部背景*/
#d_top{
position: relative;
background-color: #007bb1;
width: 100%;
height: 50px;
left: 0;
}
/*顶部返回背景*/
#top_left{
position: absolute;
top: 10px;
left: 10px;
background-color: #64bcec;
border-radius: 5px;
}
/*顶部首页背景*/
#top_right{
position: absolute;
top: 10px;
right: 10px;
background-color: #64bcec;
border-radius: 5px;
}
/*左右两边文字margin上、右、下、左*/
.text{
font-size: 16px;
color: white;
margin: 5px 10px 5px 10px;
}
/*中间文字*/
.center{
position: absolute;
font-size: 20px;
color: white;
margin-top: 10px;
margin-left: 40%;
}
/*编辑框容器*/
.edit_content{
position: relative;
width: 100%;
margin: 20px 0 0 0;
height: 50px;
}
/*编辑部分文字描述*/
.edit{
position: absolute;
color: #969696;
left: 10px;
font-size: 20px;
}
/*输入框*/
.input{
position: absolute;
border: #e4efef 1px solid;
width: 72%;
height: 30px;
margin: 0 0 0 20%;
border-radius: 5px;
}
/*验证码部分文字描述*/
.check_in{
position: absolute;
border: #e4efef 1px solid;
width: 37%;
height: 30px;
margin: 0 0 0 25%;
border-radius: 5px;
}
/*验证码*/
.btn_code{
position: absolute;
border: #e4efef 1px solid;
width: 20%;
height: 30px;
margin: 0 0 0 65%;
border-radius: 5px;
background-color: #64bcec;
color: white;
text-align: center;
padding-top: 4px;
padding-bottom: 0;
}
.btn{
position: relative;
border: white 0 ;
background-color: #007bb1;
width: 80%;
height: 50px;
color: white;
font-size: 20px;
font-weight: bold;
margin: 30px 0 30px 10%;
border-radius: 5px;
}
.btn_reg{
position: absolute;
left: 36%;
top: 10px;
}
.btn_re{
position: absolute;
left: 20%;
top: 10px;
}
</style>
<script type="text/javascript" charset="UTF-8">
</script>
</head>
<body>
<!--顶部容器背景-->
<div id="d_top">
<!--返回按钮-->
<div id="top_left">
<div class="text">
返回
</div>
</div>
<!--会员注册-->
<div class="center">
会员注册
</div>
<!--首页按钮-->
<div id="top_right">
<div class="text">
首页
</div>
</div>
</div>
<!--账号输入框容器-->
<div class="edit_content">
<div class="edit">
账号:
</div>
<input class="input"/>
</div>
<!--密码输入框容器-->
<div class="edit_content">
<div class="edit">
密码:
</div>
<input class="input" type="password"/>
</div>
<!--邮箱输入框容器-->
<div class="edit_content">
<div class="edit">
邮箱:
</div>
<input class="input" type="email"/>
</div>
<!--验证码输入框容器-->
<div class="edit_content">
<div class="edit">
验证码:
</div>
<input class="check_in"/>
<div class="btn_code">
4 2 5 1
</div>
</div>
<!--下方注册按钮和返回登录界面按钮-->
<div class="btn">
<div class="btn_reg">
确认注册
</div>
</div>
<div class="btn">
<div class="btn_re">
已有账号,点击登录
</div>
</div>
</body>
</html>
4、效果演示
第一张图片是书香小说网的注册页面,第二张图片是我仿制的页面,部分区域有些差异,暂时就不调整了。