制作一个用户注册表单

  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. Facebook Home开启Android后应用时代
  2. android多语言切换失效
  3. Android即时消息介绍
  4. Android简介及发展历程
  5. 在eclipse中查看android SDK的源代码
  6. 百度地图SDK for Android【简介】
  7. Android 模拟器创建参数说明
  8. Android Studio初探：不只是一个简单的IDE
  9. Android介绍与前景
  10. Android图像篇