Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单状态伪类选择器与盒子模型的基本理解
Blogger Information
Blog 16
fans 0
comment 0
visits 6779
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
表单状态伪类选择器与盒子模型的基本理解
Stonegarlic
Original
672 people have browsed it

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. }

实例效果

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