ASCII码 ASCII码

css伪类与盒模型对比写法

发布于：2022-07-08 13:18:54  栏目：技术文档

css伪类

html代码如下

  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>Document</title>
  8.     <link rel="stylesheet" href="css/zuoye.css">
  9. </head>
  10. <body>
  11.     <ul id="listone">
  12.         <li>1-item</li>
  13.         <li>2-item</li>
  14.         <li>3-item</li>
  15.         <li>4-item</li>
  16.         <li>5-item</li>
  17.         <li>6-item</li>
  18.         <li>7-item</li>
  19.         <li>8-item</li>
  20.         <li>9-item</li>
  21.     </ul>
  22.     <form action="" class="biaodan">
  23.         <fieldset>
  24.             <legend>用户注册</legend>
  25.             <label>用户名 :
  26.                 <input type="text" name="name"/>
  27.             </label>
  28.             <br>
  29.             <label class="tip">温馨提醒 :
  30.                 <input type="text"  disabled  name="name" value="用户名不能为空，并且为中文"/>
  31.             </label>
  32.             <br/>
  33. <div class="xingbie">
  34.     <label for="box">性别：</label>
  35.     <input type="radio" name="sex"  id="box" value="0" checked /><label for="box">男</label>
  36.     <input type="radio" name="sex"  id="girl" value="1" /><label for="girl">女</label>
  37. </div>
  38. <button>提交</button>
  39.         </fieldset>
  40.     </form>
  41. </body>
  42. </html>

css代码如下

  1. <!--zuoye.css-->
  2. /* 结构伪类 */
  3. /* 获取第一个元素 */
  4. #listone>li:nth-of-type(1){
  5.     background-color: chocolate;
  6. }
  8. /*获取2和5元素*/
  9. #listone>li:nth-of-type(-3n+5){
  10.     background-color: aqua;
  11. }
  13. /*获取最后3个元素*/
  14. #listone>li:nth-last-of-type(-n+3){
  15.     background-color: yellow;
  16. }
  18. /* 状态伪类 */
  19. input:disabled,.tip{
  20.     color: red;
  21.     border: none;
  22.     outline: none;
  23.     width: 100%;
  24. }
  25. input:checked+label{
  26.     color: red;
  27. }
  28. button,button:hover{
  29.     border: none;
  30.     outline: none;  
  31. }
  32. button{
  33.     background-color: darkgreen;
  34.     color: white;
  36. }
  37. button:hover{
  38.     color: red;
  40. }

演示效果

演示效果

盒模型

盒模型代码如下

  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.    <p>宽度尺寸计算：padding-left-width+padding-right-width+border-left-width+border-right-width+width</p>
  12.    <p>宽度总尺寸332px</p>
  13.    <p>高度尺寸计算：padding-top-height+padding-botton-width+border--top-height+border-botton-width+height</p>
  14.    <p>高度总尺寸332px</p>
  15.     <style>
  16.         .box{
  17.             width: 300px;
  18.         background-color: yellowgreen;
  19.         border: 1px solid;
  20.         height: 300px;
  21.         padding: 15px;
  22.         margin: 15px;
  23.         }
  24.     </style>
  25. </body>
  26. </html>

演示效果

演示效果

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行