设为首页收藏本站
切换到宽版

用户名  找回密码
 立即注册
主机论坛»主机论坛 › 技术综合交流 › Web技术 › 分享一个前端登陆页面代码，自适应的
返回列表 发新帖
查看: 543|回复: 2

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

[复制链接]
admin

66

主题

3

回帖

284

积分

管理员

积分
284
QQ
发表于 2024-5-15 13:24:24 | 显示全部楼层 |阅读模式
分享一个前端登陆页面代码，自适应的




  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Login Page</title>
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             padding: 0;
  11.             font-family: Arial, sans-serif;
  12.             background: linear-gradient(to right, #FF416C, #FF4B2B);
  13.             height: 100vh;
  14.             display: flex;
  15.             justify-content: center;
  16.             align-items: center;
  17.         }
  18.         .login-container {
  19.             background-color: #ffffff;
  20.             border-radius: 10px;
  21.             box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  22.             padding: 40px;
  23.             width: 300px;
  24.             text-align: center;
  25.         }
  26.         h2 {
  27.             color: #333333;
  28.             margin-bottom: 30px;
  29.         }
  30.         .input-group {
  31.             margin-bottom: 20px;
  32.             position: relative;
  33.         }
  34.         .input-group label {
  35.             position: absolute;
  36.             left: 10px;
  37.             top: 10px;
  38.             color: #666666;
  39.             transition: all 0.3s ease;
  40.             pointer-events: none;
  41.         }
  42.         .input-group input {
  43.             width: 100%;
  44.             padding: 15px 10px;
  45.             font-size: 16px;
  46.             border: none;
  47.             border-radius: 5px;
  48.             background-color: #f2f2f2;
  49.             transition: all 0.3s ease;
  50.             box-shadow: none;
  51.         }
  52.         .input-group input:focus {
  53.             outline: none;
  54.             background-color: #e0e0e0;
  55.         }
  56.         .input-group input:focus + label,
  57.         .input-group input:valid + label {
  58.             top: -15px;
  59.             font-size: 12px;
  60.             color: #007bff;
  61.         }
  62.         .btn {
  63.             background-color: #007bff;
  64.             color: #ffffff;
  65.             border: none;
  66.             padding: 15px 0;
  67.             font-size: 16px;
  68.             cursor: pointer;
  69.             border-radius: 5px;
  70.             width: 100%;
  71.             transition: background-color 0.3s ease;
  72.         }
  73.         .btn:hover {
  74.             background-color: #0056b3;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <div class="login-container">
  80.         <h2>Welcome Back!</h2>
  81.         <form action="#" method="post">
  82.             <div class="input-group">
  83.                 <input type="text" id="username" name="username" required>
  84.                 <label for="username">Username</label>
  85.             </div>
  86.             <div class="input-group">
  87.                 <input type="password" id="password" name="password" required>
  88.                 <label for="password">Password</label>
  89.             </div>
  90.             <button type="submit" class="btn">Login</button>
  91.         </form>
  92.     </div>
  93. </body>
  94. </html>
复制代码



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

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


本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

举报

admin

66

主题

3

回帖

284

积分

管理员

积分
284
QQ
 楼主| 发表于 2024-5-15 13:28:12 | 显示全部楼层
这里是一个注册页面代码



  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Register Page</title>
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             padding: 0;
  11.             font-family: Arial, sans-serif;
  12.             background: linear-gradient(to right, #FF416C, #FF4B2B);
  13.             height: 100vh;
  14.             display: flex;
  15.             justify-content: center;
  16.             align-items: center;
  17.         }
  18.         .register-container {
  19.             background-color: #ffffff;
  20.             border-radius: 10px;
  21.             box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  22.             padding: 40px;
  23.             width: 300px;
  24.             text-align: center;
  25.         }
  26.         h2 {
  27.             color: #333333;
  28.             margin-bottom: 30px;
  29.         }
  30.         .input-group {
  31.             margin-bottom: 20px;
  32.             position: relative;
  33.         }
  34.         .input-group label {
  35.             position: absolute;
  36.             left: 10px;
  37.             top: 10px;
  38.             color: #666666;
  39.             transition: all 0.3s ease;
  40.             pointer-events: none;
  41.         }
  42.         .input-group input {
  43.             width: 100%;
  44.             padding: 15px 10px;
  45.             font-size: 16px;
  46.             border: none;
  47.             border-radius: 5px;
  48.             background-color: #f2f2f2;
  49.             transition: all 0.3s ease;
  50.             box-shadow: none;
  51.         }
  52.         .input-group input:focus {
  53.             outline: none;
  54.             background-color: #e0e0e0;
  55.         }
  56.         .input-group input:focus + label,
  57.         .input-group input:valid + label {
  58.             top: -15px;
  59.             font-size: 12px;
  60.             color: #007bff;
  61.         }
  62.         .btn {
  63.             background-color: #007bff;
  64.             color: #ffffff;
  65.             border: none;
  66.             padding: 15px 0;
  67.             font-size: 16px;
  68.             cursor: pointer;
  69.             border-radius: 5px;
  70.             width: 100%;
  71.             transition: background-color 0.3s ease;
  72.         }
  73.         .btn:hover {
  74.             background-color: #0056b3;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <div class="register-container">
  80.         <h2>Create an Account</h2>
  81.         <form action="#" method="post">
  82.             <div class="input-group">
  83.                 <input type="text" id="username" name="username" required>
  84.                 <label for="username">Username</label>
  85.             </div>
  86.             <div class="input-group">
  87.                 <input type="email" id="email" name="email" required>
  88.                 <label for="email">Email</label>
  89.             </div>
  90.             <div class="input-group">
  91.                 <input type="password" id="password" name="password" required>
  92.                 <label for="password">Password</label>
  93.             </div>
  94.             <button type="submit" class="btn">Register</button>
  95.         </form>
  96.     </div>
  97. </body>
  98. </html>
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

举报

admin

66

主题

3

回帖

284

积分

管理员

积分
284
QQ
 楼主| 发表于 2024-5-16 12:01:36 | 显示全部楼层



  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>示例页面</title>
  7.     <style>
  8.         body {
  9.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  10.             margin: 0;
  11.             padding: 0;
  12.             background-color: #f7f9fc;
  13.             color: #333;
  14.         }
  15.         header {
  16.             background-color: #283e4a;
  17.             color: white;
  18.             padding: 20px 0;
  19.             text-align: center;
  20.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  21.         }
  22.         nav {
  23.             background-color: #2a9d8f;
  24.             overflow: hidden;
  25.         }
  26.         nav a {
  27.             float: left;
  28.             display: block;
  29.             color: white;
  30.             text-align: center;
  31.             padding: 14px 20px;
  32.             text-decoration: none;
  33.             transition: background 0.3s;
  34.         }
  35.         nav a:hover {
  36.             background-color: #264653;
  37.         }
  38.         .container {
  39.             max-width: 1200px;
  40.             margin: 20px auto;
  41.             padding: 0 20px;
  42.         }
  43.         .section {
  44.             margin: 20px 0;
  45.             padding: 20px;
  46.             background-color: white;
  47.             border-radius: 8px;
  48.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  49.             transition: transform 0.3s, box-shadow 0.3s;
  50.         }
  51.         .section:hover {
  52.             transform: translateY(-5px);
  53.             box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  54.         }
  55.         h2 {
  56.             color: #264653;
  57.         }
  58.         .grid-container {
  59.             display: grid;
  60.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  61.             gap: 20px;
  62.         }
  63.         .card {
  64.             background-color: #ffffff;
  65.             border-radius: 8px;
  66.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  67.             overflow: hidden;
  68.             transition: transform 0.3s, box-shadow 0.3s;
  69.         }
  70.         .card:hover {
  71.             transform: translateY(-5px);
  72.             box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  73.         }
  74.         .card img {
  75.             width: 100%;
  76.             height: auto;
  77.         }
  78.         .card-content {
  79.             padding: 15px;
  80.         }
  81.         .card-content h3 {
  82.             margin: 0 0 10px;
  83.             color: #264653;
  84.         }
  85.         .card-content p {
  86.             margin: 0;
  87.             color: #555;
  88.         }
  89.         footer {
  90.             background-color: #283e4a;
  91.             color: white;
  92.             text-align: center;
  93.             padding: 20px 0;
  94.             position: relative;
  95.             bottom: 0;
  96.             width: 100%;
  97.             box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
  98.         }
  99.     </style>
  100. </head>
  101. <body>
  102.     <header>
  103.         <h1>欢迎来到我的示例页面</h1>
  104.     </header>
  105.     <nav>
  106.         <a href="#section1">板块一</a>
  107.         <a href="#section2">板块二</a>
  108.         <a href="#section3">板块三</a>
  109.     </nav>
  110.     <div class="container">
  111.         <div id="section1" class="section">
  112.             <h2>板块一：简介</h2>
  113.             <div class="grid-container">
  114.                 <div class="card">
  115.                     <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
  116.                     <div class="card-content">
  117.                         <h3>卡片一</h3>
  118.                         <p>这是第一张卡片的内容简介。</p>
  119.                     </div>
  120.                 </div>
  121.                 <div class="card">
  122.                     <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
  123.                     <div class="card-content">
  124.                         <h3>卡片二</h3>
  125.                         <p>这是第二张卡片的内容简介。</p>
  126.                     </div>
  127.                 </div>
  128.                 <div class="card">
  129.                     <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
  130.                     <div class="card-content">
  131.                         <h3>卡片三</h3>
  132.                         <p>这是第三张卡片的内容简介。</p>
  133.                     </div>
  134.                 </div>
  135.             </div>
  136.         </div>
  137.         <div id="section2" class="section">
  138.             <h2>板块二：关于我们</h2>
  139.             <p>这是第二个内容板块。你可以在这里介绍一下公司或者团队的背景，包括他们的历史、使命和愿景。</p>
  140.             <div class="grid-container">
  141.                 <div class="card">
  142.                     <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
  143.                     <div class="card-content">
  144.                         <h3>我们的历史</h3>
  145.                         <p>我们公司成立于2000年，致力于为客户提供优质的服务。</p>
  146.                     </div>
  147.                 </div>
  148.                 <div class="card">
  149.                     <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
  150.                     <div class="card-content">
  151.                         <h3>我们的使命</h3>
  152.                         <p>我们的使命是通过创新和卓越为客户创造价值。</p>
  153.                     </div>
  154.                 </div>
  155.             </div>
  156.         </div>
  157.         <div id="section3" class="section">
  158.             <h2>板块三：联系我们</h2>
  159.             <p>这是第三个内容板块。你可以在这里放置联系信息，例如地址、电话、电子邮件等，还可以加上一个联系表单。</p>
  160.             <div class="grid-container">
  161.                 <div class="card">
  162.                     <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
  163.                     <div class="card-content">
  164.                         <h3>联系方式</h3>
  165.                         <p>电话：123-456-7890</p>
  166.                         <p>邮箱：info@example.com</p>
  167.                     </div>
  168.                 </div>
  169.                 <div class="card">
  170.                     <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
  171.                     <div class="card-content">
  172.                         <h3>办公地址</h3>
  173.                         <p>地址：北京市朝阳区某某路123号</p>
  174.                     </div>
  175.                 </div>
  176.             </div>
  177.         </div>
  178.     </div>
  179.     <footer>
  180.         <p>&copy; 2024 我的公司. 版权所有.</p>
  181.     </footer>
  182. </body>
  183. </html>
复制代码
  • 卡片布局：
    • 每个板块中的内容以卡片形式展示，增加了视觉层次感。
    • 卡片悬停时有轻微的位移和阴影变化，增强互动感。
  • 图片展示：
    • 在每张卡片中添加图片，使内容更加生动和吸引眼球。
  • 网格布局：
    • 使用网格布局展示多个卡片，增强页面的可读性和美观性。
  • 颜色搭配：
    • 采用更加柔和和现代的配色方案，确保页面看起来更加专业和友好。

这个设计结合了图片、卡片和网格布局，增强了内容展示的多样性和视觉吸引力。你可以根据具体需求进一步调整和扩展这些内容。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

联系站长|Archiver|手机版|小黑屋|主机论坛

GMT+8, 2025-4-7 14:58 , Processed in 0.072043 second(s), 25 queries .

Powered by 主机论坛 HostSsss.Com

HostSsss.Com

快速回复 返回顶部 返回列表