【前端学习】HTML + CSS 写一个登陆界面

HTML + CSS 写一个登陆界面1. index.html2. style.css3. iconfont.css4. 界面效果1. index.html<!--* @Author: your name* @Date: 2021-03-04 16:27:09* @LastEditTime: 2021-03-04 16:37:03* @LastEditors: Please set Last

Liaojiajia-2020

3991人浏览 · 2022-03-03 21:00:00

Liaojiajia-2020 · 2022-03-03 21:00:00 发布

1. index.html

<!--
 * @Author: your name
 * @Date: 2021-03-04 16:27:09
 * @LastEditTime: 2021-03-04 16:37:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Front-end Development\index.html
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/icofont.css" />
        <title>登录界面</title>
    </head>
    <body>
        <div id="bigBox">
            <h1>LOGIN</h1>
            <div class="inputBox">
                <div class="inputText">
                    <span class="iconfont icon-nickname"></span>
                    <input type="text" placeholder="Username" />
                </div>
                <div class="inputText">
                    <span class="iconfont icon-visible"></span>
                    <input type="password" placeholder="Password" />
                </div>
            </div>
            <input class="loginButton" type="button" value="Login" />
        </div>
    </body>
</html>

2. style.css

body
{
    margin: 0;
    padding: 0;
    background-image: url(../img/bgimg.jpg);
    background-repeat: no-repeat;
}

#bigBox
{
    margin: 0 auto;
    margin-top: 200px;
    padding: 20px 50px;
    background-color: #00000680;
    width: 400px;
    height: 300px;
    border-radius: 10px;
    text-align: center;
    background-position: 100px 100px;
}

#bigBox h1
{
    color: white;
}

#bigBox .inputBox .inputText
{
    margin-top: 20px;
}

#bigBox .inputBox .inputText span
{
    color: white;
}

#bigBox .inputBox .inputText input
{
    border:0;
    padding: 10px 10px;
    border-bottom: 1px solid white;
    background-color: #00000000;
    color: white;
}

#bigBox .loginButton
{
    margin-top: 30px;
    width: 150px;
    height: 25px;
    color: white;
    border: 0;
    border-radius: 20px;
    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbbb 0%, #b465b4 0% );
}

3. iconfont.css

@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1591106386397'); /* IE9 */
    src: url('iconfont.eot?t=1591106386397#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPkAAsAAAAACCgAAAOVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEDIM4ATYCJAMMCwgABCAFhG0HPBsEB1GUDUqS7IckiWBsgSKJ5iIQA3MI4geKAwAAlgIQD19j7f3dvUMtQRJNHn26aJJEYoiEToIQxUIheSdEpnsms/x+7VRC3R1ElWSaNOmT7YvvDbzSSY3SaIQIoTG0rs5YPKzkCKMdmFhnZl8Ihekb28ETv33fz7o4nDbF5zc4pzmmRl2AcUABjb0swQJKkHuIV7u0w15PoF6fKeXl/dOLUktBuwXiMPBUqZVSKTXZoVaolowt4kxdbTpJfpz6349fEyEhqWS078rBni1tfpx/3fAd/w7XLgJ7PAP4SWSMKynEbqlpRzUMjauqV0W1+uSqIqSxvP//+CxNUDX/8EiCqKKZjWCYCNNJsW1WLL5Bzlmzb65zFXW4U/ImqTtRmqq8rTVL84YCiXK964MkBwBChhC37GSmaAaSZCIxivE4l2FIEkKCE4+PJJNjXMSMJhepAICiEKKrGWaMhIBoAYhLZOh2Bu7SzZGtAqIe0SYcGUlQiUgCUTVo/TnJjVvc95HI5Yi3TFFIQg4HkA28Mz+KSzM0xiMcdSST3vj0UzjDecQXy46LKNurEblFc0L3gGbB7yd2/6rYfSSsEoO2lVGueUc76Qd5FBr4XjBRXGr52LLO3SgfmellnsiUfeLOjkZD4cMQHi4vxEFvmweWxo5OZvix0VJYMQTybB2X8TbsGqooxPqHm3j4sdDQ2N6Fh17hMYUVnLuDgqKukpbs4WGWHRlWt5QUdhL9OpNfZny4NlGbb7prFux5BkrDntnR4Yvm72lYnjz7vL23GnzeXB3LWuqPt09ct8c9GsyblVq+Zb7y8lN/4+H2amVv2PFX2y3g/ef9DBVFu3RqJVqzfyG7ZUnRuFSdi8KyWYY7O/KbDAlkCDr/xNbur7+lSyk2hFqBjZDU6IWsVj+yYMehosEUVNWag3pjDiY36MCqotRh1AdAaPUFSbNXyFr9IAv2Fyq6/UNVa/Ch3lbo52wwGJudLkYlaEG/QGCylCytdILsM/QeYsVJro+7QnaBF+Zn5rLRA0yRxxjgHr0FEQLiLIF92AzjOIOcsxCNzPgi+cbsLJW9aMZkSaljCUOKQBbQXoCAkUmRW1l0cp8/gzwPYgrXFFXpryDmBLWDeTPmWiAPRGmromu5xHnkWSAEAYRlEmAfDCg2QxmQl7cKIUPM8HsEchtmSTlqK5qZX5I83yqoR4/JkSJHUXMcuEDH2NoLTJSqBEslAAAA') format('woff2'),
    url('iconfont.woff?t=1591106386397') format('woff'),
    url('iconfont.ttf?t=1591106386397') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1591106386397#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont{
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-visible::before{
    content: "\e6a2";
}

.icon-nickname::before{
    content: "e6a0";
}