search

博客列表 >1021作业

1021作业

A 管志岗-电商策划
A 管志岗-电商策划原创
2022年10月24日 18:46:25532浏览

作业内容：

  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的时候，后面元素跟着前面变

上一条：css 伪类示例与盒模型的认识下一条：1020作业——实例演示权重和结构伪类
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多