CSS样式案例(2)-制作一个简单的登录界面

首先来张完工的效果图。

一、html文件如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登录界面</title>
        <link rel="stylesheet" type="text/css" href="css/login.css"/>
    </head>
    <body>
        
        <div class="content">
            <div class="panel">
                <div class="group">
                    <ul>
                        <li><label>账号</label></li>
                        <li><input type="text" placeholder=" 请输入账号" /></li>
                    </ul>
                    <ul>
                        <li><label>密码</label></li>
                        <li><input type="password" placeholder=" 请输入密码" /></li>
                    </ul>
                </div>
                <div class="login">
                    <button type="button">登录</button>
                </div>
            </div>
            <div class="register">
                <button type="button">注册</button>
                <button type="button">找回密码</button>
            </div>
        </div>
    </body>
</html>

二、对应的login.css文件如下，需要将CSS文件放到对应的CSS文件夹中:

*{
    margin:0 auto;
    padding:0;
}
/*添加一个浅灰色背景*/
body{
    background-color:#eee;
}

.content{
    /*border:1px solid red;*/
    width:300px;
    margin-top:50px;
}

.content .panel{
    border:1px solid #ccc;
    border-radius:5px;
    height:220px;
    background-color:#fff;
}
.content .panel .group{
    margin:30px 10px 10px 20px;
}
.content .panel .group ul{
    list-style: none;
    margin-top:15px;
}

.content .panel .group ul li{
    margin-top:2px;
}

.content .panel .group ul li input{
    line-height:22px;
    width:250px;
    font-size: 14px;
    font-family: "微软雅黑","宋体";
}
.content .panel .group ul li label{
    font-size: 14px;
    font-family: "黑体","微软雅黑","宋体";
    font-weight: bold;
}

.content .panel .login{
    text-align: center;
    /*border:1px solid red;*/
    margin-top:20px;
    
}
.content button{
    width:255px;
    height:30px;
    background-color:#008000;
    border:none;
    color:#fff;
    font-size:16px;
    font-weight: bold;
    cursor:pointer;
}


.content .register{
    margin-top:15px;
    text-align: center;
}

.content .register button{
    width:80px;
    height:30px;
    border:none;
    font-size:14px;
    background-color:#4c6bb2;
    color:#fff;
    font-family: "微软雅黑";
    text-align: center;
    margin-left:30px;
    
}