品优购-注册登录页面完整源码

最新推荐文章于 2022-12-14 16:29:09 发布

原创最新推荐文章于 2022-12-14 16:29:09 发布 · 1.4w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#html #sms #css #网页设计 #html5

python 同时被 2 个专栏收录

11 篇文章

订阅专栏

html

6 篇文章

订阅专栏

本文介绍了一个简单的个人注册页面的设计方案，包括HTML结构和CSS样式。该页面包含手机号、短信验证码及密码输入等功能，并具备基本的交互提示。

完整源码（HTML+CSS）

<!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="shortcut icon" href="favicon .ico" />
    <script language="JavaScript" src="http://free.3v.do/count.asp?id=hlbbb"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* css3盒子模型 */
            box-sizing: border-box;
        }
        /* 斜体文字不倾斜 */
        
        em,
        i {
            font-style: normal
        }
        /* 去掉小圆点 */
        
        li {
            list-style: none
        }
        
        img {
            /* 照顾低版本浏览器 */
            border: 0;
            /* 取消图片地侧有空白的缝隙的问题 */
            vertical-align: middle
        }
        
        button {
            /* 鼠标变小手 */
            cursor: pointer
        }
        
        input {
            outline: none;
        }
        
        a {
            /* 链接颜色取消下划线 */
            color: #666;
            text-decoration: none
        }
        
        a:hover {
            /* 京东专用红色 */
            color: #c81623
        }
        
        button,
        input {
            /* 字体 */
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
            /* border: 0;
            outline: none; */
        }
        
        body {
            /* 抗锯齿性 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666
        }
        
        .hide,
        .none {
            /* 元素隐藏 */
            display: none
        }
        /* 清除浮动 */
        
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }
        
        .clearfix {
            *zoom: 1
        }
        
        .w {
            width: 1200px;
            margin: 0 auto;
        }
        
        header {
            height: 82px;
            border-bottom: 2px solid #c81523;
        }
        
        .logo {
            padding-top: 18px;
        }
        
        .logo img {
            width: 160px;
            height: 60px;
        }
        
        .re {
            height: 522px;
            border: 1px solid #ccc;
            margin-top: 20px;
        }
        
        .re h3 {
            height: 42px;
            border-bottom: 1px solid #ccc;
            background-color: #ececec;
            margin-top: 0;
            padding: 10px 10px;
            font-weight: normal;
            font-size: 18px;
        }
        
        .login {
            float: right;
            font-size: 14px;
        }
        
        .login a {
            color: #c81523;
        }
        
        .reg {
            width: 600px;
            margin: 50px auto 0;
        }
        
        .reg ul li label {
            display: inline-block;
            width: 88px;
            text-align: right;
        }
        
        .reg ul li .inp {
            width: 242px;
            height: 35px;
            border: 1px solid #cccccc;
        }
        
        .reg ul li {
            margin-bottom: 20px;
        }
        
        .safe {
            padding-left: 168px;
        }
        
        .safe em {
            padding: 0 12px;
            color: #fff;
            margin-right: 2px;
        }
        
        .ruo {
            background-color: #de1111;
        }
        
        .zhong {
            background-color: #40b83f;
        }
        
        .qiang {
            background-color: #f79100;
        }
        
        .agree {
            padding-left: 87px;
        }
        
        .agree input {
            vertical-align: middle;
        }
        
        .agree a {
            color: #1ba1e6;
        }
        
        .btn {
            width: 200px;
            height: 34px;
            background-color: #c81623;
            border: 0px;
            font-size: 14px;
            color: #fff;
            margin: 30px 0 0 70px;
        }
        
        .modcopy {
            text-align: center;
            margin-top: 20px;
        }
        
        .links {
            margin-bottom: 15px;
        }
        
        .copyr {
            line-height: 20px;
        }
        
        .links a {
            margin: 0 3px;
        }
        
        body {
            height: 900px;
        }
    </style>

</head>

<body>
    <div class="w">
        <header>
            <div class="logo ">
                <a href="index.html"><img src="logo_03.jpg" alt=""></a>
            </div>
        </header>
        <div class="re">
            <h3>注册新用户
                <div class="login">我有账号，去<a href="#">登录</a></div>
            </h3>
            <div class="reg">
                <form action="">
                    <ul>
                        <li><label for="">手机号：</label><input type="tel " placeholder="请输入号码" class="inp"></li>
                        <li><label for="">短信验证码：</label><input type="tel " placeholder="请输入短信验证码" class="inp"></li>
                        <li><label for="">登陆密码：</label><input type="password " placeholder="请输入密码" class="inp"></li>
                        <li class="safe">安全程度 <em class="ruo">弱</em><em class="zhong">中</em><em class="qiang" class="inp">强</em></li>
                        <li><label for="">确认密码：</label><input type="password " placeholder="请确认密码" class="inp"></li>
                        <li class="agree"><input type="checkbox" name="" id="">同意协议并注册<a href="#">《知晓用户协议》</a></li>
                        <li><input type="submit" value="提交注册" class="btn"></li>
                    </ul>
                </form>
            </div>
        </div>
        <footer>
            <div class="modcopy ">
                <div class="links ">
                    <a href="# "> 关于我们</a>|
                    <a href="# ">联系我们 </a>|
                    <a href="# ">联系客服</a>|
                    <a href="# "> 商家入驻</a>|
                    <a href="# ">营销中心</a>|
                    <a href="# ">手机品优购 </a>|
                    <a href="# ">友情链接</a>|
                    <a href="# ">销售联盟 </a>|
                    <a href="# ">品优购社区</a>|
                    <a href="# ">品优购公益</a>|
                    <a href="# ">English Site</a>|
                    <a href="# "> Contact U </a>|
                </div>
                <div class="copyr ">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </footer>
    </div>
</body>

</html>