Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单与css
Blogger Information
Blog 3
fans 0
comment 1
visits 1798
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单与css
手机用户1601922620
Original
437 people have browsed it

由于过于生疏还不太理解，写的不好，请老师谅解！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>表单css</title>
  7.     <style>
  8.         /* 样式初始化 reset.css */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         color: #555;
  16.         text-decoration: none;
  17.       }
  18.         /* 基本选择器 */
  19.         body{
  20.             background-color: rgb(0, 162, 255);
  21.         }
  22.         /* 上下文选择器 */
  23.         em + li {
  24.                 background-color: blueviolet; 
  25.         }
  28.     </style>
  29. </head>
  32. <body>
  33.     <!-- 标题 -->
  34.     <h3 align="center">用户登陆</h3>
  35.     <form action="">
  36.         <!-- 表单分组 -->
  37.       <fieldset align="center" >
  38.           <ul>
  40.           <li>
  43.           <div>
  44.             <div>
  45.                 <label for="username">帐号:</label>
  46.                 <input
  47.                   type="text"
  48.                   id="username"
  49.                   name="username"
  50.                   autofocus
  51.                   required
  52.                   placeholder="登陆账户"
  53.                   value="username"
  54.                 />
  55.               </div>
  57.           </div>
  58.         </li>
  60.         <li>
  61.             <div>
  62.                 <label for="psw">密码:</label>
  63.                 <input type="password" id="psw" name="psw" required placeholder="不少于6位" />
  64.                 <!-- <button type="button" onclick="document.querySelector('#psw').type='text'">显示密码</button> -->
  65.               </div>
  66.         </li>
  69.           <li class="em">
  70.             <div>
  71.                 <div>
  72.                     <label for="email">邮箱:</label>
  73.                     <input type="email" id="email" name="email" required placeholder="deml@email.com" class="em"/>
  74.                   </div>
  75.               </div>
  76.           </li>
  79.           <li >
  80.             <button>登陆</button>
  81.           </li>
  85.         </ul> 
  88.       </fieldset>
  91.     </form>
  92. </body>
  93. </html>

显示效果

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post