书香小说网移动端注册页面仿制

最新推荐文章于 2024-05-14 18:04:32 发布

蒲团了道真

最新推荐文章于 2024-05-14 18:04:32 发布

阅读量550

点赞数 14

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_56819189/article/details/135991954

版权

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&nbsp;&nbsp;2&nbsp;&nbsp;5&nbsp;&nbsp;1
            </div>
        </div>
        <!--下方注册按钮和返回登录界面按钮-->
        <div class="btn">
            <div class="btn_reg">
                确认注册
            </div>
        </div>
        <div class="btn">
            <div class="btn_re">
                已有账号，点击登录
            </div>
        </div>
    </body>
</html>

4、效果演示

第一张图片是书香小说网的注册页面，第二张图片是我仿制的页面，部分区域有些差异，暂时就不调整了。

蒲团了道真

关注

14
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
书香小说网移动端注册页面仿制

或许有不少小伙伴和我一样是一个资深书虫，对网络小说极其痴迷，不知道是不是因为受到了小说的影响，最近不知怎么滴，居然头脑发热，冒出了想搞一个小说网站的想法，于是乎，就倒腾出了一个移动端小说注册页面，发出来分享一下。
复制链接

扫一扫