Html5第四天練習

tml：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>按鈕效果</title>
        <link href="../css/20240309.css" rel="stylesheet">
        
    </head>
<body>
    <button class="login">
        <p>LOGIN</p>
        <!---->
        <div class="loading">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <svg class="checkmark" width="30px" height="30px" stroke="white" fill="none">
            <polyline points="2,10 12,18 28,2"></polyline>
        </svg>
    
    </button>
</body>
<script src="../js/jquery-3.7.1.js"></script>
<script>
        $('.login').click(function(){
                $(this).toggleClass('active');
                setTimeout(
                    ()=> {
                        $(this).toggleClass('verity');
                    },2000
                )
            }
        )
</script>
</html>

Css:

tml:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登錄界面</title>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link href="../css/20240331.css" rel="stylesheet">
</head>
<body>
    <form action="#" class="login-form">
        <h1 class="login-title">Login</h1>
        <div class="input-box">
            <i class="bx bxs-user"></i>
            <input type="text" placeholder="Username">
        </div>

        <div class="input-box">
            <i class="bx bxs-lock-alt"></i>
            <input type="password" placeholder="Password">
        </div>

        <div class="remember-forgot-box">
            <label for="remember">
                <input type="checkbox" id="remember">
                Remember me
            </label>
            <a href="#">Forgot password?</a>
        </div>

        <button class="login-btn">Login</button>
        <p class="register">
            Don't hava an account?<a href="#">Register</a>
        </p>
    </form>
</body>
</html>

Css:


@import url(https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap);

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pooppins', sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../html/image/20240331/login_bg3.jpg);
    background-size: cover;
    background-position: center;
}

.login-form {
    background: rgba(64, 64, 64, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.3);
    padding: 30px;
    border-radius: 16px;
    backdrop-filter: blur(25px);
    text-align: center;
    color: #fff;
    width: 400px;
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.15);
}

.login-title {
    font-size: 40px;
    margin-bottom: 40px;
}

.input-box {
   margin: 20px 0;
    position: relative;
}

.input-box input{
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 12px 12px 12px 45px;
    border-radius: 99px;
    outline: 3px solid transparent;
    transition: 0.3s;
    font-size: 17px;
    color: #fff;
    font-weight: 600;
}

.input-box input::placeholder{
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    font-weight: 700;
}

.input-box input:focus{
    outline: 3px solid rgba(255, 255, 255, 0.3)
}

.input-box input::-ms-reveal{
    filter: invert(100%);
}

.input-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
}

.remember-forgot-box{
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    font-size: 15px;
}

.remember-forgot-box label{
    display: flex;
    gap: 8px;
    cursor: pointer;

}

.remember-forgot-box input{
    accent-color: #fff;
    cursor: pointer;
}

.remember-forgot-box a {
    color: #fff;
    text-decoration: none;
}

.remember-forgot-box a:hover{
    text-decoration: underline;
}

.login-btn{
    width: 100%;
    padding: 10px 0;
    background: #2f9cf4;
    border: none;
    border-radius: 99px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.login-btn:hover{
    background: #0b87ec;
}

.register{
    margin-top: 15px;
    font-size: 15px;

}

.register a{
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.register a:hover{
    text-decoration: underline;
}

效果：

日服務器被wallet病毒侵害了，水猿忙的可是不可開交。今日就附上水猿平常寫HTML頁面都會用的一段兼容性css代碼。保證在各瀏覽器中都可以保持一致。

body,div,ul,li,a,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,input,span,label,b{margin:0;padding:0}

li{list-style:none}

a{text-decoration:none}

img,input{border:none}

a,input{outline:none}

textarea{resize:none}

h1,h2,h3,h4,h5{font-style: normal}

i,em{font-style: normal}

.clearfix:after{content: "";display: block;height: 0;clear: both}

在線咨詢

上一篇：Jenkins 郵件發送「可修改模版」
下一篇：由靈簽樣式css3文字豎向排列遇到數字要橫排的思路

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html5第四天練習

您的項目需求