登录页面

知否技术

于 2019-12-29 14:56:15 发布

阅读量684

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/GUANYAQI1996/article/details/103753775

版权

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>郑东企业管工管理系统-后台登录</title>
    <style>
        *{
            padding:0px;
            margin:0px;
            border:0px;
        }
        #main{
            height: 70%;
        }
        #logo{
            width:150px;
            height:50px;
            position: absolute;
            top:20px;
            left: 20px;
        }
        #login{
            width:250px;
            height:240px;
            position: absolute;
            background:rgba(255,255,255,0.5);
            top:100px;
            left:50%;
            margin-left:-150px;
            border-radius:5px; 
        }
        
        .form{
            margin: 0px auto;
            margin-top: 15px;
            width:200px;
            height:28px;
            background-color: white;
            border-radius: 3px;
          
        }
        .form img{
            padding-left:15px;
            width:18px;
            height:18px;  
            margin-top: 5px;
            float:left;
        }
        input{
            margin-left:5px;
            margin-top: 2px;
            float:left;
            outline:medium;
            width:150px;
            height:25px;
        }
        input[type=submit] {
           width:200px;
           height:28px;
           background:mediumslateblue;
           font-size: 15px;
           color:white;
           border-radius: 3px;
           font-weight: bold;
           margin: 10px 25px 5px;
        }
        #footer{
            height:30%;
            margin-top:40px;
            text-align: center;
            font-size:15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
     <div id="container">
         <div id="main">
            <img id="logo" src="image/logo.png" alt="logo" >
            <img src="image/background.jpg"  style="width:100%;height:500px">
            <div id="login">
                <form action="" method="" >
                    <h4 style="color:white;text-align: center;margin-top:35px">郑东企业员工管理系统</h4>
                    <div class="form"> <img src="image/person.png" alt="账号" > <input type="text" name="admin_name"  placeholder="请输入账号" ></div> 
                    <div class="form"> <img src="image/password.png" alt="密码" l > <input type="password" name="admin_password" maxlength="6"  placeholder="请输入密码"></div>
                    <input type="submit" value="登录">
                </form>
            </div>
         </div>
         <div id="footer">
            <p> 关于郑东企业员工管理系统  合作伙伴  营销中心  廉正举报  联系客服  开放平台  诚征英才  联系我们  网站地图  隐私权  政策  法律声明  知识产权 | © 2003-现在 Zdsm.com 版权所有</p>
            <p> 增值电信业务经营许可证：豫B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|豫网文（2020）1033-086号|河南省网网络备案：豫网A33010001</p>
         </div>
     </div>
</body>
</html>

知否技术

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
登录页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
复制链接

扫一扫

专栏目录