search

博客列表 >表单和CSS选择器的案例

表单和CSS选择器的案例

wan-PHP
wan-PHP原创
2021年07月03日 00:01:25563浏览

用户注册表单

  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>

上一条：mysql优化器追踪示例下一条：固定定位、三行三列布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多