一个登录页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <style>

        body{
            background-image: url(images/bg.jpg);/*设置背景图片*/
            background-repeat:no-repeat;/*图片适应窗口大小，这里设置的是不进行平铺*/
            background-attachment: fixed;/*图片相对于浏览器固定,这里设置背景图片固定，不随内容滚动*/
            background-origin: border-box;/*从边框区域显示*/
            background-size:cover;/
        }

        .font1{
            font-size: 25px;
            font-family: 黑体;

        }
        a{
            text-decoration: none;
        }
        *{
            padding: 0;
            margin: 0;
        }

        .main {
            margin: 0 auto;
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 15px;
            width: 350px;
            height: 350px;
            background: #FFFFFF;
            /*以下css用于让登录表单垂直居中在界面,可删除*/
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -175px;
            margin-left: -175px;
        }

        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
        }

        .title span {
            font-size: 18px;
            color: #353f42;
        }

        .title-msg {
            width: 100%;
            height: 64px;
            line-height: 64px;
        }

        .title:hover{
            cursor: default	;
        }

        .title-msg:hover{
            cursor: default	;
        }

        .title-msg span {
            font-size: 12px;
            color: #707472;
        }

        .input-content {
            width: 100%;
            height: 120px;
        }

        .input-content input {
            width: 330px;
            height: 40px;
            border: 1px solid #dad9d6;
            background: #ffffff;
            padding-left: 10px;
            padding-right: 10px;
        }

        .enter-btn {
            width: 350px;
            height: 40px;
            color: #fff;
            background: #0bc5de;
            line-height: 40px;
            text-align: center;
            border: 0px;
        }

        .foor{
            width: 100%;
            height: auto;
            color: #9b9c98;
            font-size: 12px;
            margin-top: 20px;
        }

        .enter-btn:hover {
            cursor:pointer;
            background: #1db5c9;
        }

        .foor div:hover {
            cursor:pointer;
            color: #484847;
            font-weight: 600;
        }

        .left{
            float: left;
        }
        .right{
            float: right;
        }
    </style>
</head>
<body background="./images/bg.jpg">
<div><p style="text-align: center;font-size: 60px; color: #ffffff;font-family: 宋体;padding-top: 25px;">XXX管理系统</p></div>
<div class="main">
    <div class="title">
        <span class="font1">登录页面</span>
    </div>

    <div class="title-msg">
        <span class="font2">请输入用户名和密码</span>
    </div>

    <form class="login-form" action="/authentication/form" method="post" novalidate >
        <!--输入框-->
        <div class="input-content">
            <!--autoFocus-->
            <div>
                <input type="text" autocomplete="off"
                       placeholder="用户名" name="username" required/>
            </div>
            <div style="margin-top: 16px">
                <input type="password"
                       autocomplete="off" placeholder="登录密码" name="password" required maxlength="32"/>
            </div>
        </div>

        <!--登入按钮-->
        <div style="text-align: center">
            <button type="submit" class="enter-btn" >登录</button>
        </div>

        <div class="foor">
            <div class="left"><a href="#"><span>找回密码</span></a></div>

            <div class="right"><a href="#"><span>注册账户</span></a></div>
        </div>
    </form>

</div>
</body>
效果如下

在这里插入图片描述
小奔跳跳
发布了86 篇原创文章 · 获赞 5 · 访问量 8922
私信关注
效果如下

猜你喜欢
