admin 发表于 2024-5-15 13:24:24

分享一个前端登陆页面代码，自适应的

分享一个前端登陆页面代码，自适应的




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
      body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #FF416C, #FF4B2B);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
      }
      .login-container {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 300px;
            text-align: center;
      }
      h2 {
            color: #333333;
            margin-bottom: 30px;
      }
      .input-group {
            margin-bottom: 20px;
            position: relative;
      }
      .input-group label {
            position: absolute;
            left: 10px;
            top: 10px;
            color: #666666;
            transition: all 0.3s ease;
            pointer-events: none;
      }
      .input-group input {
            width: 100%;
            padding: 15px 10px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            background-color: #f2f2f2;
            transition: all 0.3s ease;
            box-shadow: none;
      }
      .input-group input:focus {
            outline: none;
            background-color: #e0e0e0;
      }
      .input-group input:focus + label,
      .input-group input:valid + label {
            top: -15px;
            font-size: 12px;
            color: #007bff;
      }
      .btn {
            background-color: #007bff;
            color: #ffffff;
            border: none;
            padding: 15px 0;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            width: 100%;
            transition: background-color 0.3s ease;
      }
      .btn:hover {
            background-color: #0056b3;
      }
    </style>
</head>
<body>
    <div class="login-container">
      <h2>Welcome Back!</h2>
      <form action="#" method="post">
            <div class="input-group">
                <input type="text" id="username" name="username" required>
                <label for="username">Username</label>
            </div>
            <div class="input-group">
                <input type="password" id="password" name="password" required>
                <label for="password">Password</label>
            </div>
            <button type="submit" class="btn">Login</button>
      </form>
    </div>
</body>
</html>



这个登录页面采用了更丰富的样式和过渡效果：

背景色采用了渐变色，使页面更具吸引力。
输入框和标签之间的过渡效果更加平滑。
按钮具有更加明显的鼠标悬停效果和过渡效果。
文字和输入框的排版更加美观。


admin 发表于 2024-5-15 13:28:12

这里是一个注册页面代码



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register Page</title>
    <style>
      body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #FF416C, #FF4B2B);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
      }
      .register-container {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 300px;
            text-align: center;
      }
      h2 {
            color: #333333;
            margin-bottom: 30px;
      }
      .input-group {
            margin-bottom: 20px;
            position: relative;
      }
      .input-group label {
            position: absolute;
            left: 10px;
            top: 10px;
            color: #666666;
            transition: all 0.3s ease;
            pointer-events: none;
      }
      .input-group input {
            width: 100%;
            padding: 15px 10px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            background-color: #f2f2f2;
            transition: all 0.3s ease;
            box-shadow: none;
      }
      .input-group input:focus {
            outline: none;
            background-color: #e0e0e0;
      }
      .input-group input:focus + label,
      .input-group input:valid + label {
            top: -15px;
            font-size: 12px;
            color: #007bff;
      }
      .btn {
            background-color: #007bff;
            color: #ffffff;
            border: none;
            padding: 15px 0;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            width: 100%;
            transition: background-color 0.3s ease;
      }
      .btn:hover {
            background-color: #0056b3;
      }
    </style>
</head>
<body>
    <div class="register-container">
      <h2>Create an Account</h2>
      <form action="#" method="post">
            <div class="input-group">
                <input type="text" id="username" name="username" required>
                <label for="username">Username</label>
            </div>
            <div class="input-group">
                <input type="email" id="email" name="email" required>
                <label for="email">Email</label>
            </div>
            <div class="input-group">
                <input type="password" id="password" name="password" required>
                <label for="password">Password</label>
            </div>
            <button type="submit" class="btn">Register</button>
      </form>
    </div>
</body>
</html>



admin 发表于 2024-5-16 12:01:36




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
    <style>
      body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f7f9fc;
            color: #333;
      }
      header {
            background-color: #283e4a;
            color: white;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      nav {
            background-color: #2a9d8f;
            overflow: hidden;
      }
      nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            transition: background 0.3s;
      }
      nav a:hover {
            background-color: #264653;
      }
      .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
      }
      .section {
            margin: 20px 0;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
      }
      .section:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      }
      h2 {
            color: #264653;
      }
      .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
      }
      .card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
      }
      .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      }
      .card img {
            width: 100%;
            height: auto;
      }
      .card-content {
            padding: 15px;
      }
      .card-content h3 {
            margin: 0 0 10px;
            color: #264653;
      }
      .card-content p {
            margin: 0;
            color: #555;
      }
      footer {
            background-color: #283e4a;
            color: white;
            text-align: center;
            padding: 20px 0;
            position: relative;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
      }
    </style>
</head>
<body>
    <header>
      <h1>欢迎来到我的示例页面</h1>
    </header>
    <nav>
      <a href="#section1">板块一</a>
      <a href="#section2">板块二</a>
      <a href="#section3">板块三</a>
    </nav>
    <div class="container">
      <div id="section1" class="section">
            <h2>板块一：简介</h2>
            <div class="grid-container">
                <div class="card">
                  <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
                  <div class="card-content">
                        <h3>卡片一</h3>
                        <p>这是第一张卡片的内容简介。</p>
                  </div>
                </div>
                <div class="card">
                  <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
                  <div class="card-content">
                        <h3>卡片二</h3>
                        <p>这是第二张卡片的内容简介。</p>
                  </div>
                </div>
                <div class="card">
                  <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
                  <div class="card-content">
                        <h3>卡片三</h3>
                        <p>这是第三张卡片的内容简介。</p>
                  </div>
                </div>
            </div>
      </div>
      <div id="section2" class="section">
            <h2>板块二：关于我们</h2>
            <p>这是第二个内容板块。你可以在这里介绍一下公司或者团队的背景，包括他们的历史、使命和愿景。</p>
            <div class="grid-container">
                <div class="card">
                  <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
                  <div class="card-content">
                        <h3>我们的历史</h3>
                        <p>我们公司成立于2000年，致力于为客户提供优质的服务。</p>
                  </div>
                </div>
                <div class="card">
                  <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
                  <div class="card-content">
                        <h3>我们的使命</h3>
                        <p>我们的使命是通过创新和卓越为客户创造价值。</p>
                  </div>
                </div>
            </div>
      </div>
      <div id="section3" class="section">
            <h2>板块三：联系我们</h2>
            <p>这是第三个内容板块。你可以在这里放置联系信息，例如地址、电话、电子邮件等，还可以加上一个联系表单。</p>
            <div class="grid-container">
                <div class="card">
                  <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
                  <div class="card-content">
                        <h3>联系方式</h3>
                        <p>电话：123-456-7890</p>
                        <p>邮箱：[email protected]</p>
                  </div>
                </div>
                <div class="card">
                  <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
                  <div class="card-content">
                        <h3>办公地址</h3>
                        <p>地址：北京市朝阳区某某路123号</p>
                  </div>
                </div>
            </div>
      </div>
    </div>
    <footer>
      <p>&copy; 2024 我的公司. 版权所有.</p>
    </footer>
</body>
</html>

[*]卡片布局：
[*]每个板块中的内容以卡片形式展示，增加了视觉层次感。
[*]卡片悬停时有轻微的位移和阴影变化，增强互动感。

[*]图片展示：
[*]在每张卡片中添加图片，使内容更加生动和吸引眼球。

[*]网格布局：
[*]使用网格布局展示多个卡片，增强页面的可读性和美观性。

[*]颜色搭配：
[*]采用更加柔和和现代的配色方案，确保页面看起来更加专业和友好。

这个设计结合了图片、卡片和网格布局，增强了内容展示的多样性和视觉吸引力。你可以根据具体需求进一步调整和扩展这些内容。
页: [1]
查看完整版本: 分享一个前端登陆页面代码，自适应的