简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 制作简易用户信息注册表单及初识 css 选择器
Blogger Information
Blog 49
fans 0
comment 0
visits 37717
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 选择器
超超多喝水
Original
897 people have browsed it

制作简易用户信息注册表单及初识 css 选择器

制作简易用户信息注册表单

  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.       /* 简单限制一下边框大小 */
  10.       fieldset {
  11.         width: 400px;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <div class="user">
  17.       <h1>用户信息注册表</h1>
  18.       <form action="" method="POST">
  19.         <!-- 将表单分为基本信息，额外信息，提交按钮三部分 -->
  20.         <!-- 基本信息部分 -->
  21.         <div class="basic_information">
  22.           <!-- 用fieldset将基本信息单独分组框起来 -->
  23.           <fieldset class="basic">
  24.             <!-- 设置一个标题 -->
  25.             <legend>必填项</legend>
  26.             <!-- 配置用户名输入 -->
  27.             <div class="uname">
  28.               <!-- 设置用户名，将input的id属性的值，填到label标签的for属性中，
  29.             用label标签将用户名的提示文字与用户名绑定，实现点击提示文字即可获得用户名输入框焦点 -->
  30.               <label for="username">账号：</label>
  31.               <!-- 给用户名输入标签设置placeholder属性，提示输入规则，设置required属性设置该内容为必填项
  32.             设置autofocus属性设置进入到页面自动聚焦到该输入框 -->
  33.               <input type="text" name="username" id="username" placeholder="请输入最少8个字符" required autofocus />
  34.             </div>
  35.             <!-- 配置密码输入 -->
  36.             <div class="pwd">
  37.               <!-- 设置密码，绑定操作同上 -->
  38.               <label for="pwd">密码：</label>
  39.               <!-- 给密码输入标签设置placeholder属性，提示输入规则，设置required属性设置该内容为必填项，
  40.                 type属性改为password，将内容加密显示 -->
  41.               <input type="password" name="pwd" id="pwd" placeholder="请输入最少6个字符" required />
  42.             </div>
  43.             <!-- 配置邮箱输入 -->
  44.             <div class="email">
  45.               <!-- 设置邮箱，绑定操作同上 -->
  46.               <label for="email">邮箱：</label>
  47.               <!-- 给邮箱输入标签设置placeholder属性，提示输入规则，type类型改为email，
  48.                 对内容做email相关规则限制 -->
  49.               <input type="email" name="email" id="email" placeholder="admin@php.cn" />
  50.             </div>
  51.           </fieldset>
  52.           <!-- 额外信息部分 -->
  53.           <fieldset class="additional">
  54.             <!-- 设置补充项标题 -->
  55.             <legend>补充项</legend>
  56.             <!-- 配置性别选择 -->
  57.             <div class="gender">
  58.               <!-- 配置性别默认选择是保密 -->
  59.               <label for="secret">性别：</label>
  60.               <!-- 使用radio类型配置三个单选项，需要注意单选项中，name的值必须一致 -->
  61.               <input type="radio" name="gender" id="male" value="male" />
  62.               <!-- 绑定男性性别 -->
  63.               <label for="male">男</label>
  64.               <input type="radio" name="gender" id="female" value="female" />
  65.               <!-- 绑定女性性别 -->
  66.               <label for="female">女</label>
  67.               <input type="radio" name="gender" id="secret" value="secret" />
  68.               <!-- 绑定性别保密 -->
  69.               <label for="secret">保密</label>
  70.             </div>
  71.             <!-- 配置兴趣爱好选择 -->
  72.             <div class="hobby">
  73.               <!-- 由于多选是点击一次选中，再次点击取消，无法设置默认项，这里爱好的label就先不放for属性 -->
  74.               <label>爱好：</label>
  75.               <!-- 使用checkbox类型配置四个多选选项，name的值后面加[]，代表返回的内容是数组，name的值必须保持一致 -->
  76.               <input type="checkbox" name="hobby[]" id="pcgames" value="pcgames" />
  77.               <label for="pcgames">电脑游戏</label>
  78.               <input type="checkbox" name="hobby[]" id="travel" value="travel" />
  79.               <label for="travel">旅游</label>
  80.               <input type="checkbox" name="hobby[]" id="shooting" value="shooting" />
  81.               <label for="shooting">摄影</label>
  82.               <input type="checkbox" name="hobby[]" id="football" value="football" />
  83.               <label for="football">足球</label>
  84.             </div>
  85.             <!-- 配置会员级别 -->
  86.             <div class="members">
  87.               <!-- 会员这里用的是下拉选项，由于下拉表单的标签跟值的标签是分开的，也无法设置默认项，这里也先不放for属性 -->
  88.               <label>会员：</label>
  89.               <!-- 下拉表单用select+option组合 -->
  90.               <select name="members" id="members">
  91.                 <option value="normal">普通会员</option>
  92.                 <option value="bronze">铜牌会员</option>
  93.                 <option value="silver">银牌会员</option>
  94.                 <option value="gold">金牌会员</option>
  95.                 <option value="diamond">钻石会员</option>
  96.               </select>
  97.               <!-- 配置查询搜索框 -->
  98.               <div class="search">
  99.                 <!-- 查询也不配备默认值，这里也先不放for属性 -->
  100.                 <label>查询：</label>
  101.                 <!-- 使用search类型实现搜索框效果 设置list属性的值与datalist的id一致，实现搜索内容的绑定 -->
  102.                 <input type="search" name="search" id="search" list="keywords" />
  103.                 <!-- 设置下拉选择项 -->
  104.                 <datalist id="keywords">
  105.                   <option value="css">css</option>
  106.                   <option value="html">html</option>
  107.                   <option value="js">js</option>
  108.                   <option value="php">php</option>
  109.                   <option value="python">python</option>
  110.                   <option value="java">java</option>
  111.                   <option value="c++">c++</option>
  112.                   <option value="excel">excel</option>
  113.                 </datalist>
  114.               </div>
  115.             </div>
  116.           </fieldset>
  117.           <!-- 配置按钮栏 -->
  118.           <div class="btn">
  119.             <!-- button默认type是submit提交 -->
  120.             <button>提交</button>
  121.             <!-- 配置一个恢复初始化的按钮 -->
  122.             <button type="reset">重置</button>
  123.           </div>
  124.         </div>
  125.       </form>
  126.     </div>
  127.   </body>
  128. </html>

初识 css 选择器

选择器优先级

css 选择器中，优先级以样式后面加!important 为最高级别，其次是行内样式，在后面是 id 选择器、class 选择器、标签选择器。
除去!important 跟行内样式两种特殊级别，id 选择器、class 选择器、标签选择器的运算级别，可以看做以下形式

id 选择器 class 选择器 tag（标签）选择器
百 十 个
0 0 0

如：

  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>css选择器演示</title>
  8.     <style></style>
  9.   </head>
  10.   <body>
  11.     <div>
  12.       <ul>
  13.         <li>超超多喝水1</li>
  14.         <li>
  15.           <p id="drinking" class="drink">超超多喝水2</p>
  16.         </li>
  17.         <li>超超多喝水3</li>
  18.       </ul>
  19.     </div>
  20.   </body>
  21. </html>

默认情况下是这样：
无样式

在 style 里使用标签选择器

  1. <style>
  2.     p {
  3.         color: blue;
  4.     }
  5. </style>

此时只有一个标签选择器 id=0，class=0，tag=1，总数为 001，则 p 标签的标签选择器生效
标签

如果使用多个标签选择器ps:后面为了防止有重叠样式覆盖，后面加的代码都会往前放

  1. <style>
  2.     li p {
  3.         color: red;
  4.     }
  5.     p {
  6.         color: blue;
  7.     }
  8. </style>

此时新增的有两个标签选择器 id=0，class=0，tag=2，总数为 002，002 > 001，则单个 p 标签失效，li p 生效
标签2
class 选择器与 id 选择器同理
如：

  1. <style>
  2.     .drink {
  3.             color: cyan;
  4.         }
  5.     li p {
  6.         color: red;
  7.     }
  8.     p {
  9.         color: blue;
  10.     }
  11. </style>

此时新增的有一个类选择器，id=0，class=1，tag=0，总数为 010,010>002，则 li p 失效，class 选择器生效
类

  1. <style>
  2.     #drinking {
  3.                 color: hotpink;
  4.             }
  5.     .drink {
  6.             color: cyan;
  7.         }
  8.     li p {
  9.         color: red;
  10.     }
  11.     p {
  12.         color: blue;
  13.     }
  14. </style>

此时新增的有一个 id 选择器，id=1，class=0，tag=0，总数为 100,100>010，则 class 选择器失效，id 选择器生效
id

上下文选择器

上下文选择器中可以：

  • 用”>”来表示子元素选择器
  • 用” “(空格)来表示后台选择器
  • 用”+”来表示相邻选择器
  • 用”~”来选中兄弟级所有指定元素

如：

  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>css选择器演示</title>
  8.     <style></style>
  9.   </head>
  10.   <body>
  11.     <div>
  12.       <ul class="list">
  13.         <li>超超多喝水1</li>
  14.         <li id="second">超超多喝水2</li>
  15.         <li>
  16.           超超多喝水3
  17.           <ul>
  18.             <li>超超多喝水3-1</li>
  19.             <li>超超多喝水3-2</li>
  20.             <li>超超多喝水3-3</li>
  21.           </ul>
  22.         </li>
  23.         <li>超超多喝水4</li>
  24.         <li>超超多喝水5</li>
  25.         <li>超超多喝水6</li>
  26.         <p>这是一个违规的p元素</p>
  27.       </ul>
  28.     </div>
  29.   </body>
  30. </html>

默认样式为：
默认2

  • 此时用子元素选择器给 list 类下的 li 子元素批量添加一个边框样式：
  1. <style>
  2.     .list > li {
  3.     border: 1px solid hotpink;
  4.     }
  5. </style>

可以看到 list 类下面的 li 元素全部都加上了边框样式，但是孙元素仍旧保持原样。ps：这里需要注意，如果是使用 color 等样式时，该样式是会自动往孙元素继承的，这种情况下限制孙元素会不生效！！！

子元素

  • 现在我们来替换一下，使用后台选择器给 list 类下所有的后代元素加一个边框样式
  1. <style>
  2.     .list li {
  3.     border: 1px solid hotpink;
  4.     }
  5. </style>

可以看到 list 类下面所有的 li 元素全部都加上了边框样式，包括子元素跟孙元素

后代

  • 相邻选择器可以给相邻的紧挨着的元素添加相关样式，相邻元素可以是标签、class 类、id 或者*（任意元素）,下面以临近标签为例
  1. <style>
  2.     #second + li {
  3.     border: 1px solid hotpink;
  4.     }
  5. </style>

可以看到 id 为 second 的 li 后面的第一个 li 元素被加了边框样式

相邻

  • ~可以将后面的所有兄弟级某类元素全部选中，后面的元素可以是标签、class 类、id 或者*（任意元素）,下面以任意元素为例
  1. <style>
  2.     #second ~ * {
  3.     border: 1px solid hotpink;
  4.     }
  5. </style>

可以看到后面所有的兄弟元素都被选中并加了样式，ps：ul 里加 p 元素并不符合规范，这里只是展示使用，实际使用不建议

兄弟

Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！