Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单和CSS选择器的案例
Blogger Information
Blog 4
fans 0
comment 0
visits 2087
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单和CSS选择器的案例
wan-PHP
Original
564 people have browsed it

用户注册表单

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>用户注册表单</title>
  8.   </head>
  9.   <body>
  10.     <h4>用户注册表单</h4>
  11.     <form action="" method="POST">
  12.       <fieldset>
  13.         <legend>必填项</legend>
  14.         <div>
  15.           <label for="username">帐号:</label>
  16.           <input
  17.             type="text"
  18.             id="username"
  19.             name="username"
  20.             autofocus
  21.             required
  22.             placeholder="不少于3位"
  23.           />
  24.         </div>
  26.         <div>
  27.           <label for="psw">密码:</label>
  28.           <input type="password" id="password" name="password" required placeholder="不少于6位"/>
  29.         </div>
  31.         <div>
  32.           <label for="male">性别:</label>
  33.           <input type="radio" name="gender" value="male" id="male" checked/>男<label
  34.             for=""
  35.           ></label>
  36.           <input type="radio" name="gender" value="female" />女<label
  37.             for=""
  38.           ></label>
  39.           <input type="radio" name="gender" value="serret" />保密<label
  40.             for=""
  41.           ></label>
  42.         </div>
  43.         <div>
  44.           <label for="tal">电话:</label>
  45.           <input type="text" id="tal" name="tal" required />
  46.         </div>
  47.         <div>
  48.           <label for="email">邮箱:</label>
  49.           <input type="email" id="email" name="email" required />
  50.         </div>
  51.         <div>
  52.           <label for="">爱好:</label>
  53.           <input type="checkbox" id="html" name="php[]" checked /><label
  54.             for="html"
  55.             >学习前端</label
  56.           >
  57.           <input type="checkbox" id="JavaaScript" name="php[]" /><label
  58.             for="JavaScript"
  59.             >学习PHP</label
  60.           >
  61.           <input type="checkbox" id="css" name="php[]" /><label for="css"
  62.             >学习java</label
  63.           >
  64.         </div>
  65.             <label>居住地址:</label>
  66.           <select name="level1" id="">
  67.             <option selected>请选择（省）</option>
  68.             <option value="1">海南省</option>
  69.             <option value="2">广东省</option>
  70.           </select>
  71.           <select name="level2" id="">
  72.             <option selected>请选择（市）</option>
  73.             <option value="11">海口市</option>
  74.             <option value="12">广州市</option>
  75.           </select>
  76.         </div>
  77.         <div>
  78.           <input type="reset" name="reset" value="清除" />
  79.           <button>提交</button>
  80.         </div>
  81.       </fieldset>
  82.     </form>
  83.   </body>
  84. </html>

基本选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>基本选择器(标签和属性)</title>
  8.     <style>
  9.       li {
  10.         background-color: blue;
  11.       }
  13.       li#one {
  14.         background-color: chartreuse;
  15.       }
  16.       li.two {
  17.         background-color: darkgreen;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <!-- 基本选择器 -->
  23.     <ul>
  24.       <li id="one">item1</li>
  25.       <li class="two">item2</li>
  26.       <li>item3</li>
  27.       <li>item4</li>
  28.     </ul>
  29.   </body>
  30. </html>

上下文选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>上下文选择器</title>
  8.     <style>
  9.       /* 1. 后代选择器,子子孙小全选中 : 空格 */
  10.       ul li {
  11.         background-color: darkgreen;
  12.       }
  13.       /* * 2. 子选择器 大于号 , 只匹配子一级,不匹配孙子*/
  14.       body > ul > li {
  15.         background-color: darkorchid;
  16.       }
  17.       /* 3. 同级相邻选择器, 加号 +  */
  18.       .start1 + li {
  19.         background-color: gold;
  20.       }
  21.       /* 4. 同级所有选择器, ~ 波浪线 */
  22.       .start2 ~ li {
  23.         background-color: maroon;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <ul>
  29.       <li>item1</li>
  30.       <li>item2</li>
  31.       <li>
  32.         item3
  33.         <ol>
  34.           <li>item</li>
  35.           <li>item</li>
  36.           <li>item</li>
  37.         </ol>
  38.       </li>
  39.       <li>item4</li>
  40.     </ul>
  41.     <hr />
  42.     <ol>
  43.       <li>item1</li>
  44.       <li class="start1">item2</li>
  45.       <!-- 同级相邻选择器 -->
  46.       <li>item3</li>
  47.       <li class="start2">item4</li>
  48.       <!-- 同级所有选择器, -->
  49.       <li>item5</li>
  50.       <li>item6</li>
  51.     </ol>
  52.   </body>
  53. </html>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post