由于过于生疏还不太理解,写的不好,请老师谅解!
```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>
```

显示效果

更多相关文章

  1. 一个没有JS跟没有连接数据库的表单
  2. html常用表单及CSS选择器练习
  3. 前端作业-表单
  4. 注册表单练习
  5. 表单列表作业提交
  6. php学习
  7. 18.)PHPWeb开发框架~Laravel中表单自动验证机制配置
  8. 8.【商城后台管理系统】单点登陆和单一登陆的区别与实现原理案例
  9. 3.【商城后台管理系统】基于TP6开发登陆授权重定向拦截操作及管

随机推荐

  1. Android研究之英特尔 Android* 开发人员
  2. Android SMS相关操作
  3. Dealing with dependencies in Android p
  4. 最新統計:44% IT 和商務人士選擇 Android(
  5. imageView 的 android:maxHeight,maxWidt
  6. RK3288 Android 7.1 屏蔽“您的设备内部
  7. android中基于网络和GPS的不同精度定位
  8. Android AppWidget系统框架
  9. Mac Yosemite下Android Studio环境问题集
  10. Android 中文 API (36) —— Toast