您的位置：首页 > 运维架构 > 网站架构

同用的网站登陆界面

2017-02-16 16:51 211 查看

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>用户登录 </title>

    <link rel="stylesheet" href="css/style.default.css" type="text/css"/>

      <style>

         body{

            background: url("__Assert__/img/body_back2.png") no-repeat; /*把背景图片放在body里面*/

            background-size: 100% 100%;

        }

        .zb_box{

            position: absolute;

            top: 25%;

            left: 45%;

            margin-left:-100px;

            width: 400px;

            height: 500px;

            background-color:#ccc;

            border-radius: 4px;

            /*background: url("__Assert__/img/zb_back.png") no-repeat 50% 50%;*/

        }

        .zb_box form h3{

            font-size: 20px;

            margin:10px 0;

        }

        .zb_box form{

            text-align: center;

        }

        .zb_box form input.num, .zb_box form input.pwd {

            font-size: 16px;

            border:1px solid #E2E2E2;

            border-radius:5px;

            width: 220px;

            padding: 10px 40px;

        }

        .zb_box form input.num{

            background: url("__Assert__/img/user.png") no-repeat 10px center;

        }

        .zb_box form input.pwd{

            background: url("__Assert__/img/lock.png") no-repeat 10px center;

        }

   /*给手机号和密码的小图标右边加一个小竖线.利用伪类添加就可以啦*/

     p{position:relative;}

     p:not(:last-of-type)::before {

    content: "";

    width: 1px;

    height: 25px;

    background: #dedada;

    display: block;

    position: absolute;

    left: 85px;

    top: 10px;}

        #login_submit{

            font-size: 16px;

            background: dodgerblue;

            border: none;

            border-radius:5px;

            color: #ffffff;

            width: 300px;

            padding: 10px 0;

            cursor: pointer;

        }

   .footer0{position:absolute;bottom:10px;left:45%;margin-left:-80px;color:#fff;font-size:14px;}  /*底部版权信息*/



    </style>

</head>

<body >

<div class="zb_box"> 

        <div style="text-align: center;"><img src="/Application/User/View/Public/assert/img/zb_back2.png"/></div> 

        <form id="login" method="post">

            <h3 style="color:#fff"><b>门店管理平台</b></h3>

            <p><input class="num" type="text" placeholder="请输入手机号" name="phone" id="username" /></p>

            <p><input class="pwd" type="password" placeholder="请输入密码" name="password" id="password" /></p>

            

            <p><input type="submit"value="登录" id="login_submit"/></p>

        </form>

   </div>

</div>
<div class="footer0">Copyright© 2017 XXX科技有限公司版权所有</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航