简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >简单的注册和模块+CSS选择器

简单的注册和模块+CSS选择器

冷风
冷风原创
2021年07月02日 00:02:29384浏览

注册和模块+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>注册中心</title>
  8.     <style>
  9.       form {
  10.         border: 1px solid rgb(37, 248, 10);
  11.         border-radius: 30px;
  12.         width: 500px;
  13.         height: 500px;
  14.         margin: auto;
  15.         margin-top: 150px;
  16.       }
  17.       h1 {
  18.         color: crimson;
  19.         align-items: center;
  20.         margin-left: 40%;
  21.       }
  22.       .top_1 {
  23.         color: chocolate;
  24.         width: 260px;
  25.         margin: auto;
  26.         margin-top: 10px;
  27.       }
  28.       .top_1 input {
  29.         outline-style: none;
  30.         height: 30px;
  31.         border: 1px solid rgb(243, 148, 6);
  32.         border-radius: 10px;
  33.       }
  34.       .top_2 {
  35.         color: chocolate;
  36.         width: 260px;
  37.         margin: auto;
  38.         margin-top: 10px;
  39.       }
  40.       .top_2 input {
  41.         outline-style: none;
  42.         color: crimson;
  43.         height: 30px;
  44.         border: 1px solid rgb(243, 148, 6);
  45.         border-radius: 10px;
  46.       }
  47.       .top_3 {
  48.         color: chocolate;
  49.         width: 260px;
  50.         margin: auto;
  51.         margin-top: 10px;
  52.       }
  53.       .top_3 input {
  54.         outline-style: none;
  55.         color: crimson;
  56.         height: 30px;
  57.         border: 1px solid rgb(243, 148, 6);
  58.         border-radius: 10px;
  59.       }
  60.       button {
  61.         background: rgb(247, 182, 3);
  62.         color: crimson;
  63.         border-radius: 10px;
  64.         border: none;
  65.         outline: none;
  66.         width: 200px;
  67.         height: 40px;
  68.         margin-top: 50px;
  69.         margin-left: 130px;
  70.       }
  71.       button:hover {
  72.         color: rgb(252, 245, 246);
  73.         background: crimson;
  74.       }
  75.     </style>
  76.   </head>
  77.   <body style="background: rgb(12, 6, 2)">
  78.     <form action="check.php" name="get" onsubmit="return false">
  79.       <h1>注册</h1>
  80.       <div class="top_1">
  81.         <label for="username">账号</label>
  82.         <input
  83.           type="text"
  84.           name="username"
  85.           id="username"
  86.           autofocus
  87.           required
  88.           placeholder="请输入账号"
  89.         />
  90.       </div>
  91.       <div class="top_1">
  92.         <label for="psw">密码</label>
  93.         <input
  94.           type="password"
  95.           name="psw"
  96.           id="psw"
  97.           required
  98.           placeholder="请输入密码"
  99.         />
  100.       </div>
  101.       <div class="top_1">
  102.         <label for="email">邮箱</label>
  103.         <input
  104.           type="email"
  105.           name="email"
  106.           id="emali"
  107.           required
  108.           placeholder="123456@qq.com"
  109.         />
  110.       </div>
  111.       <div class="top_2">
  112.         <label for="secret">性别</label>
  113.         <input type="radio" name="gender" value="male" /><label
  114.           for=""
  115.           style="color: rgb(240, 14, 127)"
  116.           >女</label
  117.         ><input type="radio" name="gender" value="female" /><label
  118.           for=""
  119.           style="color: cyan"
  120.           >男</label
  121.         ><input
  122.           type="radio"
  123.           name="gender"
  124.           value="secret"
  125.           id="secret"
  126.           checked
  127.         /><label for="" style="color: darkorchid">保密</label>
  128.       </div>
  129.       <div class="top_2">
  130.         <label>爱好</label>
  131.         <input type="checkbox" name="hobby[]" id="nv" checked /><label
  132.           for=""
  133.           style="color: deeppink"
  134.           >美女</label
  135.         >
  136.         <input type="checkbox" name="hobby[]" id="cv" /><label
  137.           for=""
  138.           style="color: rgb(83, 20, 255)"
  139.           >丑女</label
  140.         >
  141.         <input type="checkbox" name="hobby[]" id="sj" checked /><label
  142.           for=""
  143.           style="color: gold"
  144.           >睡觉</label
  145.         >
  146.         <input type="checkbox" name="hobby[]" id="yx" /><label
  147.           for=""
  148.           style="color: greenyellow"
  149.           >游戏</label
  150.         >
  151.       </div>
  152.       <div class="top_2">
  153.         <select name="level" id="">
  154.           <option value="1">黄金会员</option>
  155.           <option value="2">银牌会员</option>
  156.           <option value="3">钻石会员</option>
  157.           <option value="4" selected>金钻会员</option>
  158.         </select>
  159.       </div>
  160.       <div class="top_3">
  161.         <label for="">搜索:</label>
  162.         <input type="search" name="search" list="keywords" />
  163.         <datalist id="keywords">
  164.           <option value="美女"></option>
  165.           <option value="丑八怪"></option>
  166.           <option value="帅哥"></option>
  167.           <option value="大哥"></option>
  168.           <option value="大姐"></option>
  169.         </datalist>
  170.       </div>
  171.       <button>提交</button>
  172.     </form>
  173.   </body>
  174. </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>
上一条：css选择器与用户表单制作下一条：浅谈对http协议的理解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多