下面是我对基本选择器与上下文显示器的理解与实例。

这是我对基本选择器的实例（理解写在文档的注释里）。

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>基本选择器实例</title>
  8.     <style type="text/css">
  9.         /* 1:基于标签选择 */
  10.         ul {
  11.             color: greenyellow;
  12.         }
  14.         /* 2:基于标签内的属性来选择
  15.             class属性的快捷方式是'.' */
  16.         .red{
  17.             color: orangered;
  18.         }
  19.             /* id属性的快捷方式是'#' */
  20.         #blue{
  21.             color: cadetblue;
  22.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <ul>
  29.         <li class="red">demo22</li>
  30.         <li class="red">demo33</li>
  31.         <li>demo44</li>
  32.         <li>demo55</li>
  33.         <li id="blue">demo66</li>
  34.         <li id="blue">demo77</li>
  35.     </ul>
  36. </body>
  37. </html>

这是效果图

这是我对上下文选择器的实例（理解写在文档的注释里）。

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>上下文选择器实例</title>
  8.     <style type="text/css">
  9.         /* 1:后代全选,变相理解就是win系统里的'control+a’.他的快捷方式是空格键 */
  10.         li {
  11.             background-color: #FF4500;
  12.         }
  13.         /* 2:子选择器,只选中子一级,下面的儿子孙子都不会被选中. 他的快捷方式是'>' */
  14.         body>ul>li{
  15.             background-color: blueviolet;
  16.         }
  17.         /* 3:同级相邻选择器,选中的是下面一个同级的来操作,他的快捷方式是'+' */
  18.         .tongji+li{
  19.             background-color: cadetblue;
  20.         }
  21.         /* 4:同级全部选择器,选中的是同级全部,但不包括儿子孙子,快捷方式是'～' */
  22.         .all~li{
  23.             background-color: deeppink;
  24.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <ul>
  31.         <li class="all">demo2222</li>
  32.         <li>demo3333</li>
  33.         <li>demo4444</li>
  34.         <ul>
  35.             <li class="tongji">demo11111</li>
  36.             <li>demo22222</li>
  37.             <li>demo33333</li>
  38.         </ul>
  39.         <li>demo5555</li>
  40.         <li>demo6666</li>
  41.         <li>demo7777</li>
  42.     </ul>
  43. </body>
  44. </html>

这是效果图

下面是我仿照老师写的表单以及效果图。

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>用户注册</title>
  8. </head>
  9. <h1 align="center">用户注册</h1>
  10. <body>
  11.     <form action="" method="get">
  12.         <fieldset id="">
  13.             <legend align="center">欢迎您的加入</legend>
  14.             <br>
  15.             <div>
  16.                 <label for="username">账户：</label>
  17.                 <input type="text" placeholder="请输入预想的用户名" id="username">
  18.             </div>
  20.             </div>
  21.                 <label for="password">密码：</label>
  22.                 <input type="password" placeholder="请输入预想的密码" id="password">
  23.             </div>
  25.             <div>
  26.                 <label for="phone">电话：</label>
  27.                 <input type="number" placeholder="请输入您的手机号" id="phone">
  28.             </div>
  29.         <br>
  30.         <div>
  31.             <label for="">您的性别：</label>
  32.             <input type="radio" name="xingbie" id="" value="man" /> <label>男</label>
  33.             <input type="radio" name="xingbie" id="" value="girl" /> <label>女</label>
  34.         </div>
  35.         <br>
  36.         <div>
  37.             <label>爱吃的主食：</label>
  38.             <input type="checkbox" name="zhushi[]" id="" value="mifan" /> <label>米饭</label>
  39.             <input type="checkbox" name="zhushi[]" id="" value="miantiao" /> <label>面条</label>
  40.             <input type="checkbox" name="zhushi[]" id="" value="jiaozi" /> <label>饺子</label>
  41.         </div>
  42.         <br>
  43.         <div>
  44.             <label>请选择您需要注册的会员等级：</label><select name="vip">
  45.                 <option value="putong">普通会员</option>
  46.                 <option value="zhongji">中级会员</option>
  47.                 <option value="gaoji">高级会员</option>
  48.             </select>
  49.         </div>
  50.         <br>
  51.         <div>
  52.             <label>请输入您的职业：</label>
  53.             <input type="search" name="search" id="" value=""  list="keywords"/>
  54.             <datalist id="keywords">
  55.                 <option value ="学生"></option>
  56.                 <option value ="老师"></option>
  57.                 <option value ="医生"></option>
  58.                 <option value ="会记"></option>
  59.                 <option value ="律师"></option>
  60.                 <option value ="个体"></option>
  62.             </datalist>
  63.         </div>
  65.         </fieldset>
  66.     </form>
  67.     <br>
  68.     <button type="button" style="width: 600px;" >点击注册</button>
  69. </body>
  70. </html>

更多相关文章

  1. html 背景图片全局填充
  2. a.img.table标签用法
  3. 快递公司如何接入快递100？快递100手机查快递接口实例
  4. 5-07单利模式
  5. K8S CronJob简单入门，和手动重复操作Say Goodbye！
  6. Matlab仿真模拟的4个非常基础！！实例（附源码）
  7. vue api实例方法 有四个 $watch $emit $forceUpdate $nextTick！
  8. Kubernetes在喜马拉雅的实践：测试环境稳定性
  9. 一文读懂OpenStack Glance是什么

随机推荐

  1. Andriod编程基础(一)：Andriod的优势及光明
  2. [003] 写给准备学习Android的朋友
  3. Android应用程序的类型
  4. Android群英传笔记——第九章：Android系统
  5. 移动互联网的新宠：Android之缤纷世界
  6. android弹力效果菜单、组件化项目、电影
  7. 创建Android库的方法及Android .aar文件
  8. 2014 Android 各个版本市场占有率
  9. Android木马之“妄想”
  10. [Android][转]Android(安卓)View绘制13问