Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1021 实例演示表单中常用的"状态伪类",盒模型的五个核心属性,并描述padding,margin的简记规则
Blogger Information
Blog 21
fans 0
comment 0
visits 9991
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
1021 实例演示表单中常用的"状态伪类",盒模型的五个核心属性,并描述padding,margin的简记规则
放手去爱
Original
289 people have browsed it
  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.     <link rel="stylesheet" href="1021-01css.css" />
  9.     <style>
  10.       /**------------------------------------------------------------------------
  11.         * !  状态伪类
  12.         *------------------------------------------------------------------------**/
  13.       fieldset {
  14.         display: inline-grid;
  15.         gap: 1em;
  16.         border-radius: 10px;
  17.         padding: 1em 2em;
  18.         color: #18201e;
  19.         background: linear-gradient(to left top, #097865);
  20.       }
  21.       fieldset legend {
  22.         text-align: center;
  23.       }
  24.       fieldset input {
  25.         padding: 5px;
  26.         border: none;
  27.         border-bottom: #18201e 1px solid;
  28.       }
  30.       /* 
  31. !  状态伪类 
  32.  ? 匹配获取焦点  input:focus
  33. */
  34.       fieldset input:focus {
  35.         background-color: lightgreen;
  36.         transition: 0.45s;
  37.       }
  38.       input[type="checkbox"]:checked + label {
  39.         color: red;
  40.       }
  42.       /* 
  43.  ?   当鼠标悬停在某个元素上的效果 
  44. */
  46.       button {
  47.         border: none;
  48.         background: lightgreen;
  49.         color: white;
  50.         padding: 5px 10px;
  51.         letter-spacing: 1em;
  52.       }
  53.       button:hover {
  54.         cursor: pointer;
  55.         border: none;
  56.         background: #a3ee90;
  57.         color: #706f6f;
  58.         padding: 5px 10px;
  59.         letter-spacing: 1em;
  60.         opacity: 0.85;
  61.       }
  63.       /* 被禁用元素 */
  64.       fieldset :disabled {
  65.         background: #3bcca8;
  66.         color: azure;
  67.       }
  69.       /**========================================================================
  70.        * !              盒模型
  71.        * ?  属性有 width, height, padding, margin, border, box-sizing 
  72.        *========================================================================**/
  73. /* 四值方法  上，右，下，左 */
  74.   padding: 5px 10px 15px 20px;
  75.   /* 三值方法  上 ，左右，下*/
  76.   padding: 5px 10px 15px;
  78.   /* 双值 上下 左右 */
  79.   padding: 5px 10px;
  81.   /* 单值 上下左右全相等 */
  82.   padding: 10px;
  83.   /* 三值，双值记忆方法：只要出现在第二个参数位置上，就必然代表左右 */
  85.   /* margin 和 padding 是一样的， 
  86. border 是不存在以上的简化缩写的，border 是可见的
  87. */
  88.       .box {
  89.         width: 300px;
  90.         height: 260px;
  91.         border: #097865 double 5px;
  92.         text-align: center;
  93.         padding: 20px 10px 12px 15px;
  94.         margin: 8px 12px 13px 15px;
  95.         box-sizing: border-box;
  96.       }
  97.     </style>
  98.   </head>
  99.   <body>
  100.     <!-- ! 状态伪类 -->
  101.     <form action="">
  102.       <fieldset>
  103.         <legend>用户注册</legend>
  104.         <input
  105.           type="text"
  106.           id="username"
  107.           name="username"
  108.           placeholder="用户名"
  109.           required
  110.           autofocus
  111.         />
  112.         <input
  113.           type="email"
  114.           id="useremail"
  115.           name="useremail"
  116.           placeholder="电子邮箱"
  117.           required
  118.           disabled
  119.         />
  120.         <input
  121.           type="password"
  122.           id="userpass"
  123.           name="userpass"
  124.           placeholder="用户密码"
  125.           required
  126.         />
  127.         <!-- 默认被选中 -->
  128.         <input type="checkbox" id="rem" name="rem" checked />
  129.         <label for="rem">记住我</label>
  130.         <button type="submit">提交</button>
  131.       </fieldset>
  132.     </form>
  134.     <!-- !  盒模型  -->
  135.     <div class="box">盒模型</div>
  136.   </body>
  137. </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