【CSS3实战】设计可用表达01

tree thinker

已于 2023-07-12 15:40:26 修改

阅读量30

点赞数

分类专栏：学习总结文章标签： css3

于 2023-07-10 23:39:52 首次发布

本文链接：https://blog.csdn.net/aa1661241638/article/details/131650560

版权

学习总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

此HTML代码展示了一个设计简洁的用户登录表单，其中姓名和密码输入字段被设置为禁用状态。表单包含基本的CSS样式，如边框、内边距和字体大小，以及一个提交按钮。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    #login {
      width: 400px;
      padding: 1em 2em 0 2em;
      font-size: 12px;
    }

    #login input:disabled#name {
      border: 1px solid #fff;
    }

    #login input:disabled#password {
      border: 1px solid #fff;
    }

    label {
      line-height: 20px;
      display: block;
      font-weight: bold;
    }

    #name,
    #password {
      border: 1px solid #ccc;
      width: 160px;
      height: 22px;
      padding-left: 20px;
      margin: 6px 0;
      line-height: 20px;
    }

    .button {
      margin: 6px 0;
    }
  </style>
</head>

<body>
  <h1>设计可用的表单</h1>
  <fieldset id="login">
    <legend>用户登录</legend>
    <form action="" method="post" class="form">
      <label for="name">姓名
        <input name="name" type="text" id="name" value="" disabled="disabled" />
      </label>
      <label for="password">密码
        <input name="password" type="text" id="password" value="" disabled="disabled" />
      </label>
      <input type="image" class="button" src="" />
    </form>
  </fieldset>
</body>

</html>