Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css伪类与盒模型对比写法
Blogger Information
Blog 62
fans 3
comment 1
visits 29672
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
css伪类与盒模型对比写法
kiraseo_wwwkiraercom
Original
302 people have browsed it

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>

演示效果

演示效果

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