学习第三天

主要是，表单，选择器，css的三种插入样式，

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>作业3</title>
  8.     <style>
  9.         h3{
  10.             background:yellowgreen;
  11.             width: 400px;
  12.             height: 30px;
  13.         }
  14.         input{
  15.             background:thistle;
  16.         }
  17.         label[id="phone1"]{
  18.             background:yellow;
  19.         }
  20.         label[class="nichen"]{
  21.             background:sienna;
  22.         }
  23.         input.nichen_inp{
  24.             background:springgreen;
  25.         }
  26.         input#psw{
  27.             background:slategray;
  28.         }
  29.         /* 上下文选择器  号码区号的位置*/
  30.         select option{
  31.             background:tomato;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <h3>欢迎注册,欢乐每一天</h3>
  37.     <div>
  38.         <form action="check.php" method="GET" style="display: grid;gap: 1em";>
  39.             <fieldset>
  40.                 <legend>必填项</legend>    
  41.             <div>
  42.                 <label for="nichen" class="nichen">昵称:</label>
  43.                 <input type="text"  class="nichen_inp" name="nichen" autofocus required placeholder="请输入你想要的名称" value="" id="nichen"/>
  44.             </div>
  45.             <div>
  46.                 <label for="psw">密码:</label>
  47.                 <input type="password" name="psw" placeholder="密码不可为空" id="psw"/>
  48.             </div>
  49.             <div>
  52.                 <label for="phone" id="phone1">手机:</label>
  53.                 <input type="tel" name="phone" placeholder="请输入你的11位手机号" id="phone"/>
  54.             </div>
  55.             <div>
  56.                 <label for="email1">邮箱:</label>
  57.                 <input type="email" name="email" id="email1" placeholder="请输入你的邮箱"/>
  58. <!-- label中的for="email1" 对应的是 input中的 di="eamil1"的值 -->
  59.             </div>
  60.         </fieldset>
  61.         <fieldset>
  62.             <legend>下面为选填项</legend>
  63.             <div>
  64.                 <label for="secret">性别:</label>
  65.                 <label>男</label>
  66.                 <input type="radio" name="gender"  value="male"  id="">
  67.                 <label>女</label>
  68.                 <input type="radio" name="gender" value="female" id="">
  69.                 <label>保密</label>
  70.                 <input type="radio" name="gender"  value="secret" checked  id="secret">
  71.             </div>
  72.             <div>
  73.                 <select name="" id="">
  74.                     <option value="86" selected>中国+86</option>
  75.                     <option value="20">埃及+20</option>
  76.                     <option value="32">比利时+32</option>
  77.                     <option value="48">波兰+48</option>
  78.                 </select>
  79.                 <input type="tel" name="phone" placeholder="手机号"/>
  80.             </div>
  81.             <div>
  82.                 <label for="">个人兴趣:</label>
  83.                 <input type="checkbox" id="chess" name="hobby[]" checked><label for="chess">象棋</label></input>
  84.                 <input type="checkbox" id="game"  name="hobby[]" checked><label for="game">游戏</label></input>
  85.                 <input type="checkbox" id="run" name="hobby[]" ><label for="run">跑步</label></input>
  86.                 <input type="checkbox" id="swim" name="hobby[]" ><label for="swim">游泳</label></input>
  87.             </div>
  88.             <div>
  89.                 <label for="">更多的兴趣:</label>
  90.                 <input type="search" name="search" id="search" list="keys">
  91.                 <datalist id="keys">
  92.                     <option value="美女"></option>
  93.                     <option value="野兽"></option>
  94.                     <option value="美酒"></option>
  95.                     <option value="帅哥"></option>
  96.                 </datalist>
  97.             </div>
  98.         </fieldset>
  99.          <button>提交</button>
  100.         </form>
  101.     </div>
  102.     <div style="width: 80%; height: 20px; background:tomato;">上面的颜色太乱了</div>
  103.     <style>
  104.         /* 后代选择器 */
  105.         ul li{
  106.             background:tomato;
  107.         }
  108.         /* 子选择器 */
  109.      div > ul > li{
  110.             background:rgb(7, 116, 206);
  111.         }
  112.         /* 同级相邻,作用于儿子3身上 */
  113.         .son_2+li{
  114.             background:rgb(128, 0, 49);
  115.         }
  116.         .son_6 ~ li{
  117.             background:yellow;
  118.         }
  119.     </style>
  120.     <div>
  121.         <ul id="ul1" >
  122.             <li>儿子1</li>
  123.             <li class="son_2">儿子2</li>
  124.             <li>儿子3</li>
  125.             <li>儿子4
  126.                 <ul>
  127.                     <li class="son_4">孙子_1</li>
  128.                     <li>孙子_2</li>
  129.                     <li>孙子_3</li>
  130.                     <li>孙子_4</li>
  131.                     <li>孙子_5</li>
  132.                     <li>孙子_6</li>
  133.                 </ul>
  134.             </li>
  135.             <li>儿子5</li>
  136.             <li class="son_6">儿子6</li>
  137.             <li>儿子7</li>
  138.             <li>儿子8</li>
  139.         </ul>
  140.     </div>
  141. </body>
  142. </html>

更多相关文章

  1. Android(安卓)RecyclerView Item使用动画被遮挡，ClipChildren也无
  2. Zygote家的大儿子 —— SystemServer
  3. Android事件模型之interceptTouchEvnet ,onTouchEvent关系正解
  4. 浅析郭婶儿子--LitePal框架(三)
  5. [译]关于Android图形系统一些事实真相
  6. [置顶] Android轶事之View要去大保健？View大小自己决定？
  7. [置顶] 关于Android图形系统的一些事实真相

随机推荐

  1. 如何成为一个更好的Android开发者:30+个
  2. Android和设计模式：策略模式
  3. 字节跳动正式启动2021届秋季校招！这份字节
  4. Android——进程与线程
  5. 【幻灯片分享】Android音频口数据通信开
  6. 且谈Android内存溢出
  7. 里程碑2给Android市场造成哪些影响
  8. Android 架构简介
  9. android 根据设置的日期获取星期几
  10. Android 程式开发：（一）详解活动 —— 1.1 Ac