html+css唯美登录页面，代码提供（效果展示）

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-08-18 14:40:05

HTML+CSS打造唯美登录页面：代码示例及效果展示

1. 设计思路

在创建唯美登录页面时，我们可以从以下几个方面入手：

配色方案: 选择柔和、协调的配色，营造温馨或高冷的氛围。
字体选择: 选择清晰易读且具有美感的字体，如 PingFang SC、Source Sans Pro 等。
背景元素: 可以使用渐变色、图片、或简单的几何图形作为背景。
表单设计: 简洁明了的表单布局，突出重点元素。
交互效果: 添加一些简单的动画效果，提升用户体验。

2. HTML结构

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>唯美登录页面</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="login-container">
    <h1>欢迎登录</h1>
    <form>
      <input type="text" placeholder="用户名">
      <input type="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
  </div>
</body>
</ht   ml>

3. CSS样式（style.css）

CSS

body {
  font-family: 'PingFang SC', sans-serif;
  background: linear-gradient(to bottom right, #f2f2f2, #e0e0e0);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.login-container {
  background: #fff;
  padding: 40px;
  border-radiu   s: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  text-align: center;
}

h1 {
  margin-bottom: 30px;
  color: #333;
}

input {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background: #4CAF50;
  color: #fff;
  padding: 15px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #45a049;
}