找回密码
当前位置：前端开发者 > JavaScript > 正文

简单的登录页面

2018-12-16 分类：JavaScript 阅读(659) 评论(0)
前端开发文件命名规范
人人网fed css编码前端开发规范
web前端开发的规范

html 代码

<!DOCTYPE html>
    <head lang=”en”>
        <meta charset=”UTF-8″ />
        <title></title>
        <style type=”text/css”>
            a,
            address,
            b,
            big,
            blockquote,
            body,
            center,
            cite,
            code,
            dd,
            del,
            div,
            dl,
            dt,
            em,
            fieldset,
            font,
            form,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            html,
            i,
            iframe,
            img,
            ins,
            label,
            legend,
            li,
            ol,
            p,
            pre,
            small,
            span,
            strong,
            u,
            ul,
            var {
                margin: 0;
                padding: 0;
            }
            a {
                /*去除下划线*/
                text-decoration: none;
                font-size: 13px;
                color: darkgray;
            }
            body {
                background: url(‘http://cdn.attach.w3cfuns.com/notes/pics/201609/09/203445xma2xa8pdudxuuxq.jpg.editor.jpg’);
                /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/
                background-size: cover;
                /*放在这里面会被其他标签继承所有要重写*/
                text-align: center;
            }
            #pannel {
                background: white;
                /*改变标签的类型*/
                display: inline-block;
                text-align: left;
                margin-top: 10%;
                padding: 30px;
                /*设置圆角*/
                border-radius: 5px;
                /*设置块阴影*/
                box-shadow: -20px 10px 50px;
            }
            #pannel-header {
                text-align: center;
            }
            #pannel-header:first-child {
                font-size: 20px;
                margin-bottom: 15px;
                padding: 10px;
                border-bottom: 1px solid #dddddd;
            }
            /*面板的中间内容*/
            #pannel-content {
            }
            .user-pwd {
                margin-bottom: 15px;
                height: 38px;
                position: relative;
            }
            .user-pwd img {
                position: absolute;
                left: 5px;
                top: 6px;
            }
            .user-pwd input {
                width: 100%;
                height: 100%;
                padding-left: 38px;
                box-sizing: border-box;
                /*设置圆角*/
                border-radius: 5px;
                /*重写边框，系统会自带边框，不好看*/
                border: 1px solid #dddddd;
            }
            .user-pwd input:focus {
                /*清除自带的边框颜色*/
                outline: none;
                /*重设边框颜色*/
                border-color: red;
                /*设置边框阴影，x\y设为零，上下左右都会有阴影*/
                box-shadow: 0 0 5px yellow;
            }
            /*一些设置*/
            #setting {
                margin-bottom: 15px;
            }
            .forget-pwd {
                float: right;
            }
            /*登录按钮*/
            #btn {
                width: 100%;
                height: 35px;
                /*去掉自带的边框*/
                border: 0px;
                color: white;
                background: orangered;
                border-radius: 5px;
                font-size: 18px;
                font-weight: bold;
            }
            #btn:focus {
                /*去掉按钮点击时系统自带的边框*/
                outline: none;
            }
            /*注册按钮*/
            #reg {
                font-size: 13px;
                text-align: center;
                margin: 10px 0;
            }
            #reg a {
                color: orangered;
            }
            /*面板的尾部*/
            #panne-footer {
                height: 38px;
                line-height: 38px;
                text-align: center;
            }
            #panne-footer img {
                width: 30px;
                /*图片的垂直居中*/
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div id=”pannel”>
            <!– 头部 –>
            <div id=”pannel-header”><h2>科莫电子&酷客智联</h2></div>
            <!– 中间部分 –>
            <div id=”pannel-content”>
                <div class=”user-pwd”>
                    <img
                        src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/09/203437wc33ud4clqmxp403.png”
                    />
                    <input type=”text” placeholder=”请输入用户名或手机号” />
                </div>
                <!– 账号、密码 –>
                <div class=”user-pwd”>
                    <img
                        src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/09/203436x4mln4iwz1mc0zwz.png”
                    />
                    <input type=”password” placeholder=”请输入密码” />
                </div>
                <!– 一些其他的设置 –>
                <div id=”setting”>
                    <a id=”remeber” href=”#”
                        ><input type=”checkbox” />下次自动登录</a
                    >
                    <a href=”#” class=”forget-pwd”>忘记密码?</a>
                </div>
                <!– 登录按钮 –>
                <button id=”btn”>登录</button>
                <!– 注册部分 –>
                <div id=”reg”>还没有账号?<a href=”#”>立即注册</a></div>
            </div>
            <!– 尾部 –>
            <div id=”panne-footer”>
                <span>社交账号登录</span>
                <img
                    src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/09/204059ll4w7164ble88l8z.png.editor.png”
                    alt=”新浪”
                />
                <img
                    src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/09/203438xvujucvdgi1ujuj4.png
![简单的登录页面](attimg://article/content/picture/201609/09/203437etiv19vul90yi9y0.png)”
                    alt=”微信”
                />
                <img
                    src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/09/203437etiv19vul90yi9y0.png.editor.png”
                    alt=”QQ”
                />
            </div>
        </div>
    </body>
    <script type=”text/javascript”>
        var rem = document.getElementById(‘remeber’)
        rem.onclick = function() {
            rem.childNodes[0].checked = !rem.childNodes[0].checked
        }
    </script>
</html>
网易前端开发规范
前端开发规范手册
google 前端开发规范
赞(0)
前端开发者 » 简单的登录页面
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论