制作一个用户注册表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <h3>用户注册界面</h3>
  11.     <form action="1.php" method="GET"></form>
  12.     <div>
  13.       <label for="name">账号:</label>
  14.       <input type="text" name="name" id="name" autofocus required />
  15.     </div>
  17.     <div>
  18.       <label>密码:</label>
  19.       <input type="password" name="paw" id="paw" required />
  20.     </div>
  21.     <div>
  22.       <label for="fruit">水果:</label>
  23.       <input type="radio" name="" id="fruit" /><label>葡萄</label>
  24.       <input type="radio" name="" id="" /><label>香蕉</label>
  25.       <input type="radio" name="" id="" /><label>菠萝</label>
  26.     </div>
  27.     <div>
  28.       <label for="fru">水果:</label>
  29.       <input type="checkbox" name="" id="" /><label>葡萄</label>
  30.       <input type="checkbox" name="" id="" /><label>香蕉</label>
  31.       <input type="checkbox" name="" id="fru" /><label>菠萝</label>
  32.     </div>
  33.     <div>
  34.       <select name="" id="">
  35.         <option value="1">葡萄</option>
  36.         <option value="2" selected>香蕉</option>
  37.         <option value="3">菠萝</option>
  38.       </select>
  39.     </div>
  40.     <button>提交</button>
  41.   </body>
  42. </html>

基本选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=u, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       ol {
  10.         background-color: rebeccapurple;
  11.       }
  12.       li#apple {
  13.         background-color: rosybrown;
  14.       }
  15.       li.banana {
  16.         background-color: black;
  17.       }
  18.       li[id="pt"] {
  19.         background-color: chartreuse;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <ol>
  25.       <li id="apple">苹果</li>
  26.       <li class="banana">香蕉</li>
  27.       <li id="pt">葡萄</li>
  28.       <li>菠菜</li>
  29.       <li>西瓜</li>
  30.     </ol>
  31.   </body>
  32. </html>

上下文选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=u, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       ol li {
  10.         background-color: chartreuse;
  11.       }
  12.       body > ol > li {
  13.         background-color: chocolate;
  14.       }
  15.       #xg + li {
  16.         background-color: cornflowerblue;
  17.       }
  18.       #bc ~ li {
  19.         background-color: cyan;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <ol>
  25.       <li>苹果</li>
  26.       <li id="xg">香蕉</li>
  27.       <li>葡萄</li>
  29.       <ol>
  30.         <li id="bc">菠菜</li>
  31.         <li>西瓜</li>
  32.         <li>菠菜</li>
  33.       </ol>
  35.       <li>菠菜</li>
  36.       <li>西瓜</li>
  37.     </ol>
  38.   </body>
  39. </html>

更多相关文章

  1. 搭建菠菜程序网站源码开发初级自学篇-【CCS的编程基础|BC基础】
  2. SQL基础知识V2——BETWEEN
  3. 猴子吃香蕉的问题-摘自Linux shell核心编程指南
  4. Android Studio 3.4.1 下拉刷新 SwipRefreshLayout
  5. 如何为香蕉派 banana pi BPI-M2编译Android 4.4.2 Image
  6. python的list要打印中文字符

随机推荐

  1. Suggestion: add 'tools:replace="androi
  2. Android开发 使用XML文件设置背景变化
  3. Android 性能优化之Java(Android)代码优
  4. Android项目从eclipse迁移到Android Stud
  5. [Android] IntentInjector
  6. Android播放器MediaPlayer与MediaRecorde
  7. android miscdevice(混杂设备)驱动编写注
  8. android设置EditText不可编辑内容，响应点
  9. TextView处理显示字数过长
  10. IPC进程间通信