表单与css

由于过于生疏还不太理解,写的不好,请老师谅解!
```html
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单css</title>
<style>
/ 样式初始化 reset.css /

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. a {
  7. color: #555;
  8. text-decoration: none;
  9. }
  10. /* 基本选择器 */
  11. body{
  12. background-color: rgb(0, 162, 255);
  13. }
  14. /* 上下文选择器 */
  15. em + li {
  16. background-color: blueviolet;
  17. }
  1. </style>

</head>

<body>
<!-- 标题 -->
<h3 align="center">用户登陆</h3>
<form action="">
<!-- 表单分组 -->
<fieldset align="center" >
<ul>

  1. <li>
  2. <div>
  3. <div>
  4. <label for="username">帐号:</label>
  5. <input
  6. type="text"
  7. id="username"
  8. name="username"
  9. autofocus
  10. required
  11. placeholder="登陆账户"
  12. value="username"
  13. />
  14. </div>
  15. </div>
  16. </li>
  17. <li>
  18. <div>
  19. <label for="psw">密码:</label>
  20. <input type="password" id="psw" name="psw" required placeholder="不少于6位" />
  21. <!-- <button type="button" onclick="document.querySelector('#psw').type='text'">显示密码</button> -->
  22. </div>
  23. </li>
  24. <li class="em">
  25. <div>
  26. <div>
  27. <label for="email">邮箱:</label>
  28. <input type="email" id="email" name="email" required placeholder="deml@email.com" class="em"/>
  29. </div>
  30. </div>
  31. </li>
  32. <li >
  33. <button>登陆</button>
  34. </li>
  35. </ul>
  36. </fieldset>
  37. </form>

</body>
</html>
```

显示效果