登录页面设计代码

新星源码网 1年前 10 0

由于您没有提供更多的信息，我无法为您提供完整的登录页面设计代码。以下是一个基本的HTML和CSS代码示例，您可以根据需要进行修改和定制。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="login-box">
        <h2>Login Here</h2>
        <form>
            <p>Username</p>
            <input type="text" name="username" placeholder="Enter Username">
            <p>Password</p>
            <input type="password" name="password" placeholder="Enter Password">
            <input type="submit" name="submit" value="Login">
            <a href="#">Forgot Password</a>
        </form>
    </div>
</body>
</html>

CSS代码：

body {
    margin: 0;
    padding: 0;
    background: #f2f2f2;
}

.login-box {
    width: 320px;
    height: 420px;
    background: #fff;
    color: #000;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 70px 30px;
}

h2 {
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
}

.login-box p {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.login-box input {
    width: 100%;
    margin-bottom: 20px;
}

.login-box input[type="text"], input[type="password"] {
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    outline: none;
    height: 40px;
    color: #000;
    font-size: 16px;
}

.login-box input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    background: #000;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
}

.login-box input[type="submit"]:hover {
    cursor: pointer;
    background: #ffc107;
    color: #000;
}

.login-box a {
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    color: darkgrey;
}

.login-box a:hover {
    color: #ffc107;
}

以下是一个完整的登录页面设计代码，包括HTML、CSS和JavaScript部分。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="login-box">
        <h2>Login Here</h2>
        <form>
            <p>Username</p>
            <input type="text" name="username" id="username" placeholder="Enter Username">
            <p>Password</p>
            <input type="password" name="password" id="password" placeholder="Enter Password">
            <input type="button" name="submit" value="Login" onclick="validate()">
            <a href="#">Forgot Password</a>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS代码：

body {
    margin: 0;
    padding: 0;
    background: #f2f2f2;
}

.login-box {
    width: 320px;
    height: 420px;
    background: #fff;
    color: #000;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 70px 30px;
}

h2 {
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
}

.login-box p {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.login-box input {
    width: 100%;
    margin-bottom: 20px;
}

.login-box input[type="text"], input[type="password"] {
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    outline: none;
    height: 40px;
    color: #000;
    font-size: 16px;
}

.login-box input[type="button"] {
    border: none;
    outline: none;
    height: 40px;
    background: #000;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
}

.login-box input[type="button"]:hover {
    cursor: pointer;
    background: #ffc107;
    color: #000;
}

.login-box a {
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    color: darkgrey;
}

.login-box a:hover {
    color: #ffc107;
}

JavaScript代码：

function validate() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if (username == "" || password == "") {
        alert("Please enter both username and password.");
    } else if (username == "admin" && password == "admin") {
        alert("Login successful.");
    } else {
        alert("Invalid username or password.");
    }
}

这个登录页面设计代码包括一个输入用户名和密码的表单，一个登录按钮和一个忘记密码的链接。当用户点击登录按钮时，JavaScript代码会验证用户名和密码是否正确，并弹出相应的提示框。您可以根据需要进行修改和定制。

Related

热门文章