html好看的登录界面2（十四种风格登录源码）

这篇文章距离上次修改已过442天，其中的内容可能已经有所变动。

以下是十四种风格的登录页面的HTML代码示例。每个示例都提供了基本的HTML结构和CSS样式，以确保示例的完整性。

现代风格登录界面:




<!DOCTYPE html>
<html>
<head>
    <title>现代登录界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f7f7f7;
        }
        .login-container {
            width: 300px;
            margin: 100px auto;
            padding: 20px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            width: 100%;
            padding: 10px;
            background: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background: #555;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <form action="">
            <input type="text" placeholder="用户名">
            <input type="password" placeholder="密码">
            <button type="submit">登录</button>
        </form>
    </div>
</body>
</html>

传统风格登录界面:




<!DOCTYPE html>
<html>
<head>
    <title>传统登录界面</title>
    <style>
        body {
            font-family: Georgia, serif;
            background: #ddd;
        }
        .login-container {
            width: 300px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #ccc;
            background: #fff;
            border-radius: 10px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: Georgia, serif;
        }
        button {
            width: 100%;
            padding: 10px;
            background: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background: #555;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <form action="">
            <input type="

html好看的登录界面2（十四种风格登录源码）

评论已关闭

推荐阅读