Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1021作业
Blogger Information
Blog 20
fans 0
comment 0
visits 8645
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作业
A 管志岗-电商策划
Original
530 people have browsed it

作业内容：

  1. 实例演示表单中常用的”状态伪类”, 尽量选择课堂上未提及的
  2. 实例演示盒模型的五个核心属性,并描述padding,margin的简记规则

1. 实例演示表单中常用的”状态伪类”

  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>状态伪类选择器-label+input表单</title>
  8.     <link rel="stylesheet" href="/1021/demo2.css" />
  9.   </head>
  10.   <body>
  11.     <form action="">
  12.       <fieldset>
  13.         <legend>用户注册</legend>
  14.         <input type="text" id="" name="" placeholder="账号" />
  15.         <input
  16.           type="email"
  17.           id=""
  18.           name=""
  19.           placeholder="邮箱"
  20.           checked
  21.           autofocus
  22.         />
  23.         <input type="password" id="" name="" placeholder="密码" checked />
  24.         <!-- 第一种： -->
  25.         <div class="div">
  26.           <input class="checkbox" type="checkbox" id="" />
  27.           <label>记住我（老师讲的这个可以）</label>
  28.         </div>
  29.         <!-- 第二种 label在前面不行： -->
  30.         <div class="div2">
  31.           <label for="checkbox_2">记住我(label和input前后位置互换不行)</label>
  32.           <input class="checkbox_2" type="checkbox" id="checkbox_2" />
  33.         </div>
  35.         <!-- 第三种 table不行： -->
  36.         <div>
  37.           <input class="checkbox" type="checkbox" id="checkbox" />
  38.           <table>
  39.             记住我(table不行,label可以)
  40.           </table>
  41.         </div>
  42.         <!-- 第四种 第一个div行，第二个div不行： -->
  43.         <div>
  44.           <input class="checkbox_4" type="checkbox" id="checkbox" />
  45.           <div>记住我(第一个可以)</div>
  46.           <div>记住我(第二个不可以)</div>
  47.         </div>
  49.         <button>提交</button>
  50.       </fieldset>
  52.       <!-- 案例  -->
  53.       <fieldset>
  54.         <legend>电商策划</legend>
  55.         <label class="cou" for="3">案例调查</label>
  56.         <input type="checkbox" name="" id="3" class="anli">
  57.         <ul>
  58.           <li>网站开发1</li>
  59.           <li>网站开发2</li>
  60.           <li>网站开发3</li>
  61.           <li>网站开发4</li>
  62.         </ul>
  63.       </fieldset>
  64.     </form>
  65.   </body>
  66. </html>

1.1 相关css

  1. fieldset :focus {
  2.   background-color: rgb(236, 243, 236);
  3.   transition: 0.4s;
  4.   /* outline: none; */
  5.   border: rgb(207, 54, 54) solid thin;
  6. }
  7. .checkbox:checked + label {
  8.   color: red;
  9. }
  11. /* input[type="checkbox"]:checked + lable {
  12.   color: red;
  13. } */
  15. /* 第二种 */
  16. .checkbox_2 {
  17.   float: right;
  18. }
  19. .div2 .input:checked {
  20.   color: red;
  21.   /* float: left; */
  22.   /* float: right; */
  23. }
  25. /* 第三种 */
  26. .checkbox:checked + table {
  27.   color: red;
  28. }
  29. /* 第四种 */
  30. .checkbox_4:checked + div {
  31.   color: red;
  32. }
  34. /* 案例 */
  35. .anli {
  36.   display: none;
  37.   /* cursor: pointer; */
  38. }
  39. .anli,
  40. ul {
  41.   display: none;
  42. }
  43. .anli:checked + ul {
  44.   display: block;
  45. }
  47. .cou {
  48.   cursor: pointer;
  49. }

1.1.1 效果图：

" class="reference-link">效果图，lebel+input

2. 实例演示盒模型的五个核心属性,并描述padding,margin的简记规则

  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.     <div class="box"></div>
  11.     <style>
  12.       .box {
  13.         /* 鼠标检查移动过去查看页面宽高时,不计算margin,最多计算到border */
  14.         width: 150px;
  15.         height: 100px;
  16.         background-color: aqua;
  17.         /* 实线 */
  18.         /* border: 10px solid red; */
  20.         /* 虚线  dashed */
  21.         border: 5px dashed red;
  22.         background-clip: content-box;
  23.         padding: 25px;
  24.         margin: 20px;
  25.         /* 设置盒子尺寸大小计算方式 */
  26.         /* 推荐用以下这,把border计算在内 */
  27.         /* box-sizing: border-box; */
  28.         /* 这是计算盒子外边，类似于默认 */
  29.         box-sizing: content-box;
  31.         /* 将内容宽度width/高度height进行缩放,
  32.         来实现源码中的width/height与页面中的盒子大小计算完全一致 */
  34.         /* 边框是可视属性，除了宽高，还可以设置样式 */
  35.         /* 规则顺序：上下左右，顺时针 */
  36.         /* 四值：padding: 10px 30px 20px 32px; 上下左右*/
  37.         /* 三值：padding: 30px 20px 32px; 上 左右 下*/
  38.         /* 二值：padding: 30px 32px; 上下 左右*/
  39.         /* 一值：padding: 30px；上下左右全相等*/
  40.         /* margin 和 padding 规则一样 */
  41.       }
  43.       /* 还有就是css重置reset
  44.         不用批量去写标签了,统一'*', */
  45.       * {
  46.         /* 外边距清零 */
  47.         margin: 0;
  48.         /* 内边距清零 */
  49.         padding: 0;
  50.         /* 盒子计算方式清零 */
  51.         box-sizing: border-box;
  52.       }
  53.     </style>
  54.   </body>
  55. </html>

总结

记住input+label的时候，前后位置不要换，input在label前面，checked:选中input的时候，后面元素跟着前面变

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