css一个登录界面

发表于前端技术学习版块 css,教程

CSS是一种用来控制网页表现的样式语言，它可以用于布局、颜色、字体等方面，让网页变得更有吸引力和易于使用。下面，我们将通过一个CSS登录界面示例来了解CSS的基本知识。<html&

CSS是一种用来控制网页表现的样式语言，它可以用于布局、颜色、字体等方面，让网页变得更有吸引力和易于使用。下面，我们将通过一个CSS登录界面示例来了解CSS的基本知识。

<html>
  <head>
    <title>CSS登录界面示例</title>
    <style>
      body {
        background-color: #cccccc;
      }
      .container {
        width: 300px;
        margin: 0 auto;
        background-color: #ffffff;
        box-shadow: 0 0 10px #000000;
        padding: 20px;
        text-align: center;
      }
      h2 {
        font-family: Arial;
        color: #333333;
      }
      input[type=text], input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
      }
      button {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>CSS登录界面示例</h2>
      <form>
        <label for="uname"><b>用户名</b></label>
        <input type="text" placeholder="请输入用户名" name="uname" required>

        <label for="psw"><b>密码</b></label>
        <input type="password" placeholder="请输入密码" name="psw" required>

        <button type="submit">登录</button>
      </form>
    </div>
  </body>
</html>

在上述代码中，我们设置了body背景颜色为#cccccc，并定义了一个container容器来包裹登录表单。容器的宽度为300像素，设置了margin属性为0 auto使其居中显示。同时，我们给容器添加了一些效果，包括文字颜色、阴影和内边距。

在表单中，我们设置了输入框和按钮的样式，使其填充整个容器并具有一定的间隔、边框和背景颜色。在按钮上设置了背景色和鼠标指针样式，使其看起来更像一个可交互的元素。

使用CSS可以让我们轻松地改变网页的外观和交互方式，让用户获得更好的使用体验。无论是设计师还是开发人员，都应该学会使用CSS来创建美观和实用的网站。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。