search

博客列表 >表单状态伪类选择器与盒子模型的基本理解

表单状态伪类选择器与盒子模型的基本理解

Stonegarlic
Stonegarlic原创
2022年10月25日 18:10:55674浏览

1021作业

1.状态伪类选择器

  1. <body>
  2.     <style>
  3.         ::placeholder{
  4.             color: red;
  5.             font-style: italic;
  6.             font-size: 0.5em;
  7.         }
  8.     </style>
  9.     <form action=""></form>
  10.     <fieldset>
  12.         <!-- 
  13.              autofocus: autofocus 属性是一个布尔属性
  14.                         autofocus 属性为 true 时，页面加载时自动聚焦到此控件
  15.              required:这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段
  16.         -->
  18.         <legend>用户注册</legend>
  19.         <label for="username">用户名：</label>
  20.         <input type="text" id="username" name="uname" placeholder="请填写用户名" required autofocus>
  21.         <br>
  22.         <label for="eml">邮箱：</label>
  23.         <input type="email" id="eml" name="eml" placeholder="请填写邮箱信息" required>
  24.         <br>
  25.         <label for="username">密码：</label>
  26.         <input type="possword" id="pow" name="pow" placeholder="请填写用户密码">
  27.         <br>
  28.         <input type="checkbox" id="cec" name="cec" checked>
  29.         <label for="cec">复选框</label>
  30.         <br>
  31.         <button>提交</button>
  33.     </fieldset>
  35.     <!--========================================================= -->
  37.     <div class="box">
  38.     <label for="menu">视频教程</label> 
  39.     <input type="checkbox" id="menu" name="checkbox">
  40.     <ul>
  41.         <li><a href="">数学</a></li>
  42.         <li><a href="">语文</a></li>
  43.         <li><a href="">政治</a></li>
  44.     </ul>
  45.     </div>
  46. </body>
  1. /* !表单状态伪类 */
  3. /* ? 匹配到获取焦点的元素 */
  4. fieldset :focus{
  5.     background-color: antiquewhite;
  6.     /* 延时展示 */
  7.     transition: 0.4s;
  8. }
  10. /* ? 匹配被选中的复选框颜色 */
  12. input[type='checkbox']:checked + label {
  13.     color: red;
  14. }
  16. button{
  17.     border: none;
  18.     outline: none;
  19.     background-color: aquamarine;
  20.     letter-spacing: 1em;
  22. }
  24. button:hover{
  25.     /* ? 鼠标悬停变化 */
  26.     cursor: pointer;
  27.     /* ? 透明度变化 */
  28.     opacity: 0.8;
  29.     /* ? 延时 */
  30.     transition: 0.4s;
  31. }
  33. /* ! 实现下拉菜单的效果 */
  35. /* ? 隐藏复选框 */
  36. #menu {
  37.     display: none;
  38. }
  40. /* ? 隐藏下拉菜单 */
  41. #menu + ul{
  42.     display: none;
  43. }
  45. /* ? 复选框被选择时显示下拉菜单 */
  46. #menu:checked + ul{
  47.     display: block;
  48. }

实例效果

2.盒模型的五个核心属性

  1. <div class="box"></div>
  2.     <!-- 
  3.         1.margin： 外边距
  4.         2.padding： 内边距
  5.         3.border： 边框
  6.         4.width: 宽度
  7.         5.height； 高度
  8.         !!盒子计算是只计算到边框（border）
  9.      -->
  10. </body>
  1. .box{
  2.     width: 150px;
  3.     height: 100px;
  4.     background-color: aquamarine;
  5.     border: 2px black solid;
  6.     padding: 10px;
  7.     /* background-clip有三个属性值，即border-box、padding-box、content-box；
  8.         border-box    背景被裁剪到边框盒。    
  9.         padding-box    背景被裁剪到内边距框。    
  10.         content-box    背景被裁剪到内容框 */
  11.     background-clip:content-box;
  12.     margin: 5px;
  13.     /* 设置盒子的计算方式 ，将内容的宽高进行缩放来实现源码中的宽高与页面种的宽高相对应*/
  14.     box-sizing: border-box;
  15. }
  17. /* ! 边距设置顺序 */
  18. .box{
  19.     border: 2px solid red ;
  20.     /* ? 四值 设置顺序规则 上 右 下 左 */
  21.     margin: 5px 10px 5px 10px;
  22.     /* ? 三值 设置顺序规则 上 左右 下 */
  23.     margin: 5px 10px 5px;
  24.     /* ? 双值 设置顺序规则 上下 左右 */
  25.     margin: 3px 10px;
  27.     /* ? padding与margin设置一样 */
  29. }

实例效果

上一条：em和rem下一条：1. em,rem的特点是什么, 应用场景是什么?
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多