search

博客列表 >表单制作和选择器

表单制作和选择器

初见
初见原创
2021年09月26日 23:03:08392浏览

用户表单和选择器

用户注册表单

  • 实例演示
  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.         .cover{
  10.             position:absolute;
  11.             top:0;
  12.          left:0; 
  13.          right: 0;
  14.          bottom: 0;
  15.          z-index: 999;
  16.          background-color: rgb(0, 0, 0,0.5);
  17.         }
  18.         .reg{
  19.             position: fixed;
  20.             z-index: 9999;
  21.             background-color: #fff;
  22.             border-radius: 5px ;
  23.             top: 50%;
  24.     left: 50%;
  25.             width: 480px;
  26.             margin-left: -240px;
  27.             margin-top: -300px;
  29.         }
  30.         .reg h2{
  31.             text-align: center;
  32.             font-size: 25px;
  33.         }
  34.        .reg fieldset{
  35.            margin: 30px;
  36.            line-height: 40px;
  37.            font-size: 16px;
  38.        }
  39.        .xuan{
  40.            margin: 30px;
  41.            line-height: 40px;
  42.            font-size: 16px;
  43.        }
  44.        .reg button{
  45.            margin-left: 30px;
  46.            margin-bottom: 30px;
  47.        }
  48.     </style>
  49.   </head>
  50.   <body>
  51.       <div class="cover"></div>
  52.     <div class="reg">
  53.     <h2>用户注册</h2>
  54.     <form action="post.php" method="GET">
  55.         <fieldset>
  56.             <legend>必选项</legend>
  57.             <div>
  58.         <label for="name">账号：</label>
  59.         <input
  60.           type="text"
  61.           id="name"
  62.           name="uname"
  63.           placeholder="请输入用户名"
  64.           required
  65.           autofocus
  66.           value="admin"
  67.         />
  68.       </div>
  69.       <div>
  70.         <label for="psd">账号：</label>
  71.         <input type="password" id="psw" name="psw" placeholder="不少于8位" required />
  72.         <button type="button" onclick="document.querySelector('#psw').type='text'">显示密码</button>
  73.           显示密码
  74.         </button>
  75.       </div>
  76.       <div>
  77.         <label for="name">邮箱：</label>
  78.         <input
  79.           type="email"
  80.           id="email"
  81.           name="email"
  82.           placeholder="admin@admin.com"
  83.           required
  86.         />
  87.       </div>
  88.         </fieldset>
  89.       <div class="xuan">
  90.         <div>
  91.         <label for="secret">性别:</label>
  92.         <input type="radio" name="gender" id="male" value="male" /><label for="male">男</label>
  93.         <input type="radio" name="gender" id="female" value="female" /><label for="female">女</label>
  94.         <input type="radio" name="gender" id="secret" value="secret" checked /><label for="secret">保密</label>
  95.         </div>
  96.         <div>
  98.             <label>会员等级:</label>
  99.             <select name="level">
  100.           <option value="1">铜牌会员</option>
  101.           <option value="2">银牌会员</option>
  102.           <option value="3" selected>金牌会员</option>
  103.           <option value="4">钻石会员</option>
  104.         </select>
  105.         </div>
  106.         <div>
  107.             <label for="">搜索关键字:</label>
  108.         <input type="search" name="search" list="keywords" />
  109.         <datalist id="keywords">
  110.           <option value="html">html</option>
  111.           <option value="css">css</option>
  112.           <option value="js">js</option>
  113.           <option value="javascript">javascript</option>
  114.         </datalist>
  115.         </div>
  116.       </div>
  118.       <button>提交</button>
  119.       <button type="reset">重置</button>
  120.     </form>
  121.     </div>
  122.   </body>
  123. </html>

效果如下：
会员注册

选择器权重计算过程

  • 选择器权重排序

!importent > 行内样式 > ID 标签 > class|属性| 伪类 > 标签|伪元素 >继承|通配符* 

  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.     <!-- !importent > 行内样式 > ID 标签 > class|属性| 伪类 > 标签|伪元素 >继承|通配符* -->
  11.     <h2>选择器权重</h2>
  12.     <ul class="box">
  13.       <li class="item item1" id="item1">item1</li>
  14.       <li class="item item2" id="item2">item2</li>
  15.       <li class="item item3" id="item3">item3</li>
  16.       <li class="item item4" id="item4">item4</li>
  17.       <li class="item item5" id="item5">item5</li>
  18.       <li class="item item6" id="item6" style="background-color: violet">
  19.         item6
  20.       </li>
  21.       <li class="item item7" id="item7">item7</li>
  22.       <li class="item item8" id="item8" style="background-color: violet">
  23.         item8
  24.       </li>
  25.       <li class="item item9" id="item9" style="background-color: violet">
  26.         item9
  27.       </li>
  28.       <li class="item item10" id="item10">item10</li>
  29.     </ul>
  30.     <style>
  31.       * {
  32.         color: #666;
  33.         background-color: #fff;
  34.       }
  35.       ul.box {
  36.         line-height: 40px;
  37.       }
  38.       ul.box li {
  39.         background-color: silver;
  40.       }
  41.       ul.box li.item:nth-of-type(n + 3) {
  42.         background-color: slateblue;
  43.         color: #fff;
  44.       }
  45.       ul.box li#item4,
  46.       ul.box li#item5,
  47.       ul.box li#item6,
  48.       ul.box li#item7,
  49.       ul.box li#item8,
  50.       ul.box li#item9 {
  51.         background-color: tomato;
  52.       }
  53.       ul.box li.item9 {
  54.         background-color: yellow !important;
  55.       }
  56.     </style>
  57.   </body>
  58. </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.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li>item1</li>
  12.       <li class="item">item2</li>
  13.       <li>item3</li>
  14.       <ul>
  15.         <li>item1</li>
  16.         <li>item2</li>
  17.         <li>item3</li>
  18.       </ul>
  19.       <li>item4</li>
  20.       <li>item5</li>
  21.       <li>item6</li>
  22.       <li>item7</li>
  23.       <li>item8</li>
  24.     </ul>
  25.     <style>
  26.       /* 子元素选择器 > */
  27.       .list > li {
  28.         border: 1px solid #666;
  29.       }
  30.       /* 后代选择器是空格 */
  31.       .list li {
  32.         border: 1px solid #999;
  33.       }
  34.       /* 相邻 +  就是下一个*/
  35.       .list .item + * {
  36.         background-color: rgb(255, 0, 55);
  37.       }
  38.       /* 所有选中 ~ */
  39.       .list .item ~ * {
  40.         background-color: cyan;
  41.       }
  42.     </style>
  43.   </body>
  44. </html>

显示如下

上下文选择器

上一条：网站导航如何SEO优化？下一条：网站SEO优化404页面怎么制作？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多