注册和模块+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>Document</title>
  8.   </head>
  9.   <body>
  10.     <h3>注册</h3>
  11.     <form action="check.php" name="get" onsubmit="return false">
  12.       <label for="username">账号:</label>
  13.       <input
  14.         type="text"
  15.         id="username"
  16.         name="username"
  17.         autofocus
  18.         required
  19.         placeholder="至少6位以上"
  20.       />
  21.       <div>
  22.         <label for="psw">密码:</label>
  23.         <input
  24.           type="password"
  25.           id="psw"
  26.           name="psw"
  27.           required
  28.           placeholder="至少6位以上"
  29.         />
  30.       </div>
  31.       <div>
  32.         <label for="email">邮箱注册:</label>
  33.         <input
  34.           type="email"
  35.           name="email"
  36.           id="email"
  37.           autofocus
  38.           required
  39.           placeholder="123456@qq.com"
  40.         />
  41.       </div>
  42.       <div>
  43.         <label for="secret">性别:</label>
  44.         <input type="radio" name="gender" value="male" /><label for=""
  45.           >男</label
  46.         >
  47.         <input type="radio" name="gender" value="female" /><label for=""
  48.           >女</label
  49.         >
  50.         <input
  51.           type="radio"
  52.           name="gender"
  53.           value="secret"
  54.           checked
  55.           id="secret"
  56.         /><label for="">保密</label>
  57.       </div>
  58.       <div>
  59.         <label>爱好:</label>
  60.         <input type="checkbox" name="hobby[]" id="game" /><label for=""
  61.           >游戏</label
  62.         >
  63.         <input type="checkbox" name="hobby[]" id="trawe" checked /><label for=""
  64.           >旅游</label
  65.         >
  66.         <input type="checkbox" name="hobby[]" id="shoos" checked /><label for=""
  67.           >摄影</label
  68.         >
  69.       </div>
  70.       <div>
  71.         <select name="level" id="">
  72.           <option value="1">黄牌</option>
  73.           <option value="2">金牌</option>
  74.           <option value="3" selected>钻石</option>
  75.         </select>
  76.       </div>
  77.       <div>
  78.         <label for="">搜索：</label>
  79.         <input type="search" name="search" list="keywords" />
  80.         <datalist id="keywords">
  81.           <option value="美女"></option>
  82.           <option value="丑八怪"></option>
  83.           <option value="帅哥"></option>
  84.           <option value="大哥"></option>
  85.           <option value="大姐"></option>
  86.         </datalist>
  87.       </div>
  88.  <button>提交</button>
  89.     </form>
  90.   </body>
  91. </html>

模块和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>模块和CSS选择器的使用</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         color: rgb(247, 16, 16);
  16.         text-decoration: none;
  17.       }
  18.       body {
  19.         height: 100vh;
  20.         display: flex;
  21.         flex-direction: column;
  22.       }
  23.       header {
  24.         background: blueviolet;
  25.         width: 100%;
  26.         height: 80px;
  27.       }
  28.       main {
  29.         background: burlywood;
  30.         height: 500px;
  31.       }
  32.       li {
  33.         background: cyan;
  34.         margin-top: 15px;
  35.       }
  36.       li#foo {
  37.         background: darkmagenta;
  38.       }
  39.       .start + li {
  40.         background: rgb(211, 0, 130);
  41.       }
  42.       main > ul > li {
  43.         background: darkslategray;
  44.       }
  45.       footer {
  46.         background: coral;
  47.         height: 150px;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <header>页眉</header>
  53.     <main>
  54.       <ul>
  55.         <li class="start">11</li>
  56.         <li>22</li>
  57.         <li id="foo">33</li>
  58.         <li>
  59.           44
  60.           <ul>
  61.             <li>100</li>
  62.             <li>200</li>
  63.             <li>300</li>
  64.             <li>400</li>
  65.             <li>500</li>
  66.           </ul>
  67.         </li>
  68.         <li>55</li>
  69.       </ul>
  70.     </main>
  71.     <footer>页脚</footer>
  72.   </body>
  73. </html>

更多相关文章

  1. 注册表单练习
  2. php 登录注册
  3. 选择器的使用和模块化组件思想
  4. php之tp6安装与扩展安装
  5. js完成购物车、es6模块导入问题
  6. 4-30用户注册界面
  7. 给文本注册单击事件不起作用问题记录
  8. LsLoader——通用移动端Web App离线化方案
  9. Python使用socket搭建TCP服务器（后期的客户端：GPRS模块）

随机推荐

  1. 更改粘性标题航点或偏移的位置。
  2. jquery 如何获取json指定键为指定值的另
  3. 动态生成 ul 的li jquery 点击事件无法获
  4. how to style text after ?
  5. jQuery：在对象内使用.remove（）而不是Regex
  6. 使用jQuery在AJAX调用中的url字段格式
  7. Typeahead 0.10.2没有在Rails 4 / Bootst
  8. 告诉javascript首先运行jquery ajax
  9. GET ajax请求发送到同一个php文件
  10. 无法使用jquery发送简单的ajax请求来获取