search

博客列表 >表单应用以及css样式和选择器

表单应用以及css样式和选择器

橙絮圆
橙絮圆原创
2021年07月01日 15:21:23534浏览

表单应用以及css样式和选择器

作业内容：

  1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;
  2. 理解css模块的思想,并试写一个案例(选做);
  3. 实例演示基本选择器与上下文选择器。
  • 用户注册表单
    • 实例效果
      表单作业
    • html代码
      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>用户注册</title>
      8. </head>
      9. <body>
      10. <h3 algn="center">用户注册</h3>
      11. <form action="" method="get"  style="display:grid;gap:0.5em">
      12.     <fieldset>
      13.         <legend>必填项</legend>
      14.         <div>
      15.             <label for="username">用户名:&nbsp;&nbsp;&nbsp;&nbsp;      </label>
      16.             <input type="text" name="username" id="username" autofocus required placeholder="不少于8位"/>
      17.           </div>
      18.           <div>
      19.             <label for="password">设置密码:</label>
      20.             <input type="password" name="password" id="password" required placeholder="不少于6位"/>                         </div>
      21.           <div>
      22.             <label for="">确认密码:</label>
      23.             <input type="password" name="psw" id="psw" placeholder="不少于6位"/> </div>
      24.           <div>
      25.             <label for="email">邮箱:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      26.             <input type="email" name="email" id="email" required placeholder="demo@email.com" />
      27.           </div>
      28.     </fieldset>
      29.   <div>
      30.       <label for="male">性别:</label>
      31.       <!-- 所有单选按钮的name必须相同 -->
      32.       <input type="radio" name="gender" value="male" id="male" checked/><label for="">男</label>
      33.       <input type="radio" name="gender" value="female"/><label for="">女</label>
      34. </div>
      35.   <div>
      36.     <label>爱好:</label>
      37.     <!-- 所有复选框的name属性必须写成数组格式 -->
      38.     <input name="hobby[]" id="game" type="checkbox" checked/><label for="game">游戏</label>
      39.     <input name="hobby[]" id="swim" type="checkbox" /><label for="swim">游泳</label>
      40.     <input name="hobby[]" id="book" type="checkbox" checked/><label for="book">看书</label>
      41.   </div>
      42.   <div>
      43.     <label for="">成分:</label>
      44.     <select name="part" id="">
      45.       <option value="1">党员</option>
      46.       <option value="2">团员</option>
      47.       <option value="3" selected>群众</option>
      48.     </select>
      49.   </div>
      50.   <div>
      51.       <label for="">搜索关键字:</label>
      52.       <input type="search" name="search" list="keywords">
      53.       <datalist id="keywords">
      54.           <option value="html"></option>
      55.           <option value="css"></option>
      56.           <option value="js"></option>
      57.           <option value="php"></option>
      58.       </datalist>
      59.   </div>
      60.   <button type="submit">马上注册</button>
      61. </form>
      62. </body>
      63. </html>
  • 理解css模块的思想,并试写一个案例
    • 实例截图
      模块化布局
    • html代码
      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>css样式的模块化</title>
      8. <link rel="stylesheet" href="css/style.css" />
      9. </head>
      10. <body>
      11. <header>页眉</header>
      12. <main>主体</main>
      13. <footer>页脚</footer>
      14. </body>
      15. </html>
    • css代码
      footer.css
      1. footer {
      2. height: 5em;
      3. background-color: lightgreen;
      4. }

header.css

  1. header {
  2.   height: 3em;
  3.   background-color: lightblue;
  4. }

main.css

  1. main {
  2.   flex: 1;
  3.   background-color: aqua;
  4. }

reset.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   color: #555;
  8.   text-decoration: none;
  9. }

style.css

  1. @import url("reset.css");
  2. @import url("main.css");
  3. @import url("header.css");
  4. @import url("footer.css");
  5. @import url("public.css");

public.css

  1. body {
  2.   height: 100vh;
  3.   display: flex;
  4.   flex-direction: column;
  5. }

  • 基本选择器与上下文选择器

    • 基本选择器
      基本选择器

      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>选择器：基本选择器,标签和属性选择器</title>
      8. <style>
      9.   /* 标签 */
      10.   li {
      11.     background-color: violet;
      12.   }
      13.   /* 属性 */
      14.   li[id="foo"] {
      15.     background-color: lightblue;
      16.   }
      17.   /* 因为id是通用且高频的属性，所以有一个快捷方式 */
      18.   #foo {
      19.     background-color: yellow;
      20.   }
      21.   .on {
      22.     background-color: lightgreen;
      23.   }
      24. </style>
      25. </head>
      26. <body>
      27. <ul>
      28.   <li id="foo">item1</li>
      29.   <li>item2</li>
      30.   <li class="on">item3</li>
      31.   <li class="on">item4</li>
      32.   <li>item5</li>
      33. </ul>
      34. </body>
      35. </html>

    • 上下文选择器
      上下文选择器

      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>上下文选择器</title>
      8. <style>
      9.   /* 上下文选择器，就是根据位置来选择 */
      10.   /* 1.后代选择器,子子孙孙全选中空格 */
      11.   ul li {
      12.     background-color: lightblue;
      13.   }
      14.   /* 2.子选择器,只匹配子一级 */
      15.   body > ul > li {
      16.     background-color: lightgreen;
      17.   }
      18.   /* 3.同级相邻选择器，加号+ */
      19.   .start + li {
      20.     background-color: yellow;
      21.   }
      22.   /* 4.同级所有选择器 ~波浪线*/
      23.   .start ~ li {
      24.     background-color: violet;
      25.   }
      26. </style>
      27. </head>
      28. <body>
      29. <ul>
      30.   <li>item1</li>
      31.   <li class="start">item2</li>
      32.   <li>item3</li>
      33.   <li>
      34.     item4
      35.     <ul>
      36.       <li>item-1</li>
      37.       <li>item-2</li>
      38.       <li>item-3</li>
      39.     </ul>
      40.   </li>
      41.   <li>item5</li>
      42. </ul>
      43. </body>
      44. </html>
上一条：商品信息表下一条：html表单的基本使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多