Compréhension approfondie et absolue du CSS

1. Absolute et float ont les mêmes caractéristiques, d'enveloppement et de destructivité

1. Absolute et float sont similaires (voir la démo ci-dessous, si l'image est dans le coin supérieur gauche, alors utilisez float et Absolute. sera le même)

  1 nbsp;html>  2   3   4 <meta>  5 <meta>  6 <title>absolute和float高尔基</title>  7 <style>  8 body {  9     background-color: #B0DEF5; 10     font-size: 14px; font-family: arial; 11     color: #444; 12 } 13 a { 14     color: #0078b6; 15     text-decoration: none; 16 } 17 a:hover { 18     text-decoration: underline; 19 } 20 em { 21     font-style: normal; 22     color: #aeaeae; 23     margin: 0 5px; 24 } 25 svg { 26     position: absolute; 27 } 28 .container { 29     width: 560px; height: -webkit-calc(100vh - 16px); height: calc(100vh - 16px); 30     margin-left: auto; margin-right: auto; 31     background-color: #fff; 32 } 33 .list { 34     padding: 20px; 35     position: relative; 36 } 37 .space { 38     padding-left: 60px; 39     line-height: 22px; 40 } 41 .space img { 42     vertical-align: text-bottom; 43 } 44 .info { 45     font-size: 12px; 46     overflow: hidden; 47     color: #808080; 48 } 49 .from { 50     float: left; 51 } 52 .from a { 53     color: #9abbc8; 54 } 55 p { 56     margin: 6px 0; 57 } 58 .operate { 59     float: right; 60 } 61 .operate img { 62     vertical-align: text-bottom; 63     margin-right: 3px; 64 } 65 .test { 66     position: relative; 67     font-size: 18px; font-family: &#39;microsoft yahei&#39;; 68 } 69 .test p { 70    width: 200px; 71    margin-left: auto; margin-right: auto; 72    padding: 5px; 73    background-color: #f0f0f0;     74 } 75 .test input { 76     width: 20px; height: 20px; 77     vertical-align: -4px; 78 } 79 </style> 80  81  82  83 <p> 84     <svg> 85         <path></path> 86     </svg> 87     </p><p> 88         <a><img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447ac70001f5cc00500050.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" ></a> 89         </p><p> 90             <a>慕课网</a> 91             <img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447b1a0001750000160013.png" class="lazy" alt="Compréhension approfondie et absolue du CSS" > 92             <a>#慕课网活动#</a>【全民晒课ing，火速赢取IT图书】无论你是慕课网的“资深粉丝”，还是刚加入的新同学，在慕课网活动帖：<a>http://www.php.cn/</a> 写下你在慕课网所学习的任意一门课程，并附上课程的学习心得，就有机会赢得精品IT好书。<img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447cc700010dbf00220022.gif" class="lazy" alt="Compréhension approfondie et absolue du CSS" >这事很急哒，仅有2天呦。在<a>#程序员节#</a>送给自己一份礼物吧！<img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447af90001ab1c00010001.gif" class="lazy" alt="Compréhension approfondie et absolue du CSS" > 93             </p><p><img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447aea0001f43301200084.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" ></p> 94             <p>     95                    <span> 96                     <a>9月13日 10:27</a>  97                     <em>来自</em><a>微博 weibo.com</a>                       98                 </span> 99                 <span>100                     <a><img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447c350001055b00120013.png" class="lazy" alt="Compréhension approfondie et absolue du CSS" >(4)</a><em>|</em>101                     <a>转发(5)</a><em>|</em>102                     <a>收藏</a><em>|</em>103                     <a>评论(2)</a>104                 </span>105             </p>106         107     108     <p>109         </p><p><input><label>float: left;</label></p>110         <p><input><label>position: absolute;</label></p>111     112 113 <script>114 var eleAvatar = document.getElementById("avatar"),115     eleFloat = document.getElementById("float"),116     eleAbsolute = document.getElementById("absolute");117 118 // SVG路径以及相关动画119 var elePath = document.querySelector("path"), timerPath = null;    
120 var funPathMove = function(end) {121     clearTimeout(timerPath);122     var d = elePath.getAttribute("d"), arrD = d.split(" ");123     // 动画起始值124     var start = arrD.slice(-1) * 1;125     if (start == end) return;126     // 速率127     var rate = 5, current = start;128     console.log(arrD);129     var step = function() {130         if (Math.abs(end - current) < 1) {131             current = end;132         } else {133             current += (end - current) / 5;134             timerPath = setTimeout(step, 30);135         }136         // 替换最后一个值137         arrD.splice(-1, 1, current);138         // 曲线走起139         elePath.setAttribute("d", arrD.join(" "));140     };141     step();142 };143 144 if (eleAvatar && eleFloat && eleAbsolute) {145     var attrFloat = eleAvatar.style.cssFloat != undefined? "cssFloat": "styleFloat";146     eleFloat.onclick = function() {147         eleAvatar.style.position = "";148         eleAvatar.style[attrFloat] = "left";149         elePath && funPathMove(300);150     };151     eleAbsolute.onclick = function() {152         eleAvatar.style[attrFloat] = "";153         eleAvatar.style.position = "absolute";154         elePath && funPathMove(340);155     };156 }157 </script>158 159 

Voir le code

2. 🎜>

 1 nbsp;html> 2  3  4 <meta> 5 <meta> 6 <title>absolute的破坏性</title> 7 <style> 8 .box { 9     padding: 10px;10     background-color: #f0f0f0;    11 }12 input {13     position: absolute; top: 234px;    14     width: 160px; height: 32px;15     font-size: 100%;16 }17 </style>18 19 20 21 <p><img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447b06000171a002560191.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" ></p>22 <input>23 <script>24 var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button");25 if (eleImg != null && eleBtn != null) {26     eleBtn.onclick = function() {27         if (this.absolute) {28             eleImg.style.position = "";29             this.value = "图片absolute化";30             this.absolute = false;31         } else {32             eleImg.style.position = "absolute";33             this.value = "图片去absolute";34             this.absolute = true;35         }36     };37 }38 </script>39 40 

Afficher le code

3. 🎜> Afficher le code

2. L'indépendance de l'absolu

Lors de l'utilisation de l'absolu, il n'est pas nécessaire de l'utiliser avec le relatif. Il peut être utilisé indépendamment, et plus il est indépendant, plus il est capable. Plus

 1 nbsp;html> 2  3  4 <meta> 5 <meta> 6 <title>absolute的包裹性</title> 7 <style> 8 .box { 9     padding: 10px;10     background-color: #f0f0f0;    11 }12 input {13     position: absolute; top: 234px;    14     width: 160px; height: 32px;15     font-size: 100%;16 }17 </style>18 19 20 21 <p><img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447b06000171a002560191.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" ></p>22 <input>23 <script>24 var eleBox = document.getElementById("box"), eleBtn = document.getElementById("button");25 if (eleBox != null && eleBtn != null) {26     eleBtn.onclick = function() {27         if (this.absolute) {28             eleBox.style.position = "";29             this.value = "容器absolute化";30             this.absolute = false;31         } else {32             eleBox.style.position = "absolute";33             this.value = "容器去absolute";34             this.absolute = true;35         }36     };37 }38 </script>39 40 

3. Caractéristiques absolues

1. Supprimer le flottant

Afficher le code

2. Suivi de localisation

 1 nbsp;html> 2  3  4 <meta> 5 <title>折翼天使表现特性一：去浮动</title> 6 <style> 7 input[type=button] { 8     height: 32px; 9     font-size: 100%;    10 }11 </style>12 13 14 15 <img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447b06000171a002560191.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" >16 <img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" >17 <img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447f550001ccb002560191.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" >18 <p><input></p>19 <p><input></p>20 <script>21 var flbtn = document.getElementById("float"),22     button = document.getElementById("button"),23     image2 = document.getElementsByTagName("img")[1];24 if (flbtn && button && image2) {25     var value_init = button.value;26     button.onclick = function() {27         if (this.value == value_init) {28             image2.style.position = "absolute";29             this.value = "撤销";30         } else {31             image2.style.position = "";32             this.value = value_init;33         }34     };35     36     flbtn.onclick = function() {37         image2.style["cssFloat" in this.style? "cssFloat": "styleFloat"] = "left";38     };39 }40 </script>41 42 

Afficher le code

3. Au-delà du débordement

 1 nbsp;html> 2  3  4 <meta> 5 <title>折翼天使表现特性二：位置跟随</title> 6 <style> 7 input[type=button] { 8     height: 32px; 9     font-size: 100%;10 }11 p { margin-left: 260px; }12 img + p { margin-top: 60px; }13 </style>14 15 16 17 <img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447b06000171a002560191.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" >18 <p><img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" ></p>19 <img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447f550001ccb002560191.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" >20 <p><input></p>21 <p><input></p>22 <script>23 var block = document.getElementById("block"),24     button = document.getElementById("button"),25     image2 = document.getElementsByTagName("img")[1];26 if (block && button && image2) {27     var value_init_button = button.value;28     button.onclick = function() {29         if (this.value == value_init_button) {30             image2.style.position = "absolute";31             this.value = "撤销";32         } else {33             image2.style.position = "";34             this.value = value_init_button;35         }36     };37     38     var value_init_block = block.value;39     block.onclick = function() {40         if (this.value == value_init_block) {41             image2.style.display = "block";42             this.value = "撤销";43         } else {44             image2.style.display = "";45             this.value = value_init_block;46         }    
47     };48 }49 </script>50 51 

Afficher le code

Lorsque vous faites glisser la barre de défilement, le bouton de fermeture ne bouge pas car l'absolu

est défini 4. Utilisation réelle de l'absolu

 1 nbsp;html> 2  3  4 <meta> 5 <title>超越overflow</title> 6 <style> 7 body { 8     background-color: #bbb; 9 }10 .scroll {11     width: 500px; height: 300px;12     margin: 200px auto 0;13     margin-top: -webkit-calc(50vh - 150px);14     margin-top: calc(50vh - 150px);15     border: 1px solid #ccc;16     border-radius: 3px;17     box-shadow: 0 0 3px rgba(0,0,0,.35);18     background-color: #fff;19     overflow: auto;20 }21 .close {22     position: absolute;23     width: 34px; height: 34px;    24     margin: -17px 0 0 483px;25     background: url(http://www.php.cn/) no-repeat;26 }27 .close:hover {28     background-position: 0 -41px;    29 }30 img {31     display: block;32     margin: 10px;33 }34 </style>35 36 37 38 <p>39     <a></a>40     <img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447b06000171a002560191.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" >41     <img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/54447f550001ccb002560191.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" >42 </p>43 44 

1. l'image ci-dessus

Hot, recommandation et VIP sont tous implémentés en utilisant l'absolu et le relatif

Afficher le code

n'est pas utilisé

2. Le positionnement de la liste déroulante

 1 nbsp;html> 2  3  4 <meta> 5 <title>图标定位二三事</title> 6 <style> 7 body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } 8 body, h3, h5 { margin: 0; } 9 img { border: 0 none; vertical-align: bottom; }10 .l { float: left; }.r { float: right; }11 .constr { width: 1200px; margin-left: auto; margin-right: auto; }12 .header { background-color: #2A2C2E; }13 .nav { height: 60px; }14 .nav-list { float: left; font-size: 14px; font-weight: 400; }15 .nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }16 .nav-a:hover { color: #fff; }17 18 .course { padding-top: 10px; }19 .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }20 .course-list-img { background-color: #6396F1; }21 .course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }22 .course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }23 24 .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://www.php.cn/); }25 .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }26 .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://www.php.cn/); text-indent: -9em; overflow: hidden; }27 </style>28 29 30 31 <p>32     </p><p>33         </p><p>34             </p><h3 id="a-课程-a">35                 <a>课程</a>36             </h3>37             <h3 id="a-问答-a">38                 <a>问答</a>39             </h3>40             <h3 id="a-求课-i-i-a">41                 <a>42                     求课<i></i>43                 </a>44             </h3>45         46     47 48 49 <p>50     </p><p>51         </p><p>52             <a>53                 <p>54                     <span>推荐</span>55                     <img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" ><!--56                     --><i>vip</i>57                 </p>58                 <h5 id="分享-CSS深入理解之float浮动">分享：CSS深入理解之float浮动</h5>59                 <p>60                     <span>已完结</span>61                     <span>3514人学习</span>62                 </p>63             </a>64         </p>65     66 67 68 

utilise une valeur absolue sans dépendance. le positionnement, c'est-à-dire que seul l'absolu est utilisé et le relatif n'est pas utilisé

Afficher le code

3. Centrage et positionnement des bords

 1 nbsp;html> 2  3  4 <meta> 5 <title>下拉框定位二三事</title> 6 <style> 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } 8 .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; padding-bottom: 300px; overflow: hidden; } 9 .course-sidebar { width: 262px; float: left; }10 .course-sidebar > p { border: 1px solid #e6e8e9; box-shadow: 0px 1px 2px #d5d7d8; background-color: #fff; }11 .course-sidebar-type { height: 380px; }12 .course-sidebar-search { margin-top: 20px; overflow: hidden; }13 .course-search-input { width: 200px; line-height: 18px; padding: 10px; margin: 0; border: 0 none; font-size: 12px; font-family: inherit; float: left; }14 .course-sidebar-search.focus { border-color: #2ea7e0; }15 .course-search-input:focus { outline: 0 none; }16 .course-search-input::-ms-clear { display: none; }17 .course-search-btn { width: 38px; height: 38px; float: right; background: url(http://www.php.cn/); text-indent: -9em; overflow: hidden; }18 .focus .course-search-btn { background-position: 0 -38px; }19 20 .course-sidebar-result { display: none; position: absolute; width: 260px; margin: 39px 0 0 -1px; padding-left: 0; list-style-type: none; border: 1px solid #e6e8e9; background-color: #fff; box-shadow: 0px 1px 2px #d5d7d8; font-size: 12px; }21 .course-sidebar-result > li { line-height: 30px; padding-left: 12px; }22 .course-sidebar-result > li:hover { background-color: #f9f9f9; }23 .course-sidebar-result a { display: block; color: #5e5e5e; text-decoration: none; }24 .course-sidebar-result a:hover { color: #000; }25 </style>26 27 28 29 <p>30     </p><p>31         </p><p></p>32         <p>33             </p>

34                 
• 分享：CSS深入理解之float浮动
35                 
• 案例：CSS圆角进化论
36                 
• 案例：CSS Sprite雪碧图应用
37                 
• 案例：CSS3 3D 特效
38                 
• 案例：如何用CSS进行网页布局
39             

40             41             搜索42         43     44 45 <script>46 (function() {47 var input = document.getElementsByTagName("input")[0],48 result = document.getElementById("result");49 50 if (input && result) {51 input.onfocus = function() {52 this.parentNode.className = "course-sidebar-search focus";53 if (this.value != "") {54 // show datalist55 result.style.display = "block";56 }57 };58 input.onblur = function() {59 if (this.value == "") {60 this.parentNode.className = "course-sidebar-search";61 }62 // hide datalist63 result.style.display = "none";64 };65 66 // IE7 that wrap a p for avoid bad effect from float67 if (!document.querySelector) {68 var p = document.createElement("p");69 input.parentNode.insertBefore(p, input);70 p.appendChild(result);71 }72 // events of datalist73 if ("oninput" in input) {74 input.addEventListener("input", function() {75 if (this.value.trim() != "") {76 result.style.display = "block";77 } else {78 result.style.display = "none";79 }80 });81 } else {82 // IE6-IE883 input.onpropertychange = function(event) {84 event = event || window.event;85 if (event.propertyName == "value" && /focus/.test(this.parentNode.className)) {86 if (this.value != "") {87 result.style.display = "block";88 } else {89 result.style.display = "none";90 }91 }92 }93 }94 }95 96 })();97 </script>98 99 

Réalisez le centrage de l'image et une idée de positionnement des bords, vous pouvez utiliser un absolu illimité, qui utilise la capacité de suivi de   le

  dans le code, c'est très important

Voir le code

4. Alignement et positionnement de l'image du fichier

 1 nbsp;html> 2  3  4 <meta> 5 <title>居中、边缘定位二三事</title> 6 <style> 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } 8 .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; } 9 .course-content { float: right; position: relative; width: 920px; min-height: 1200px; background: #fff; }10 .course-list-x { padding: 20px 10px; overflow: hidden; }11 .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }12 13 .goto_top_diaocha, .goto_top_app, .goto_top_feed { display: block; width: 48px; height: 48px; margin-top: 10px; background: url(http://www.php.cn/) no-repeat; }14 .goto_top_diaocha { background-position: -48px 0; }15 .goto_top_diaocha:hover { background-position: -48px -50px; }16 .goto_top_app { background-position: -96px 0; }17 .goto_top_app:hover { background-position: -96px -50px; }18 .goto_top_feed { background-position: -144px 0; }19 .goto_top_feed:hover { background-position: -144px -50px; }20 21 .course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; }22 .course-loading { position: absolute; margin-left: -26px; }23 24 .course-fixed-x { height: 0; text-align: right; overflow: hidden; }25 .course-fixed { display: inline; position: fixed; margin-left: 20px; bottom: 100px; }26 </style>27 28 29 30 <p>31     </p><p>32         </p><p>33             </p><p></p>34             <p></p>35             <p></p>36             <p></p>37             <p></p>38             <p></p>39         40         <p>41              <img  class="course-loading lazy" src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/5453077400015bba00010001.gif" alt="Compréhension approfondie et absolue du CSS" >42         </p>43         <p>44              </p><p>45                 <a></a>46                 <a></a>47                 <a></a>48             </p>49         50     51 52 53 

Réel Dans le projet, certains endroits ont des étoiles et d'autres non. Si vous voulez avoir des problèmes avec le texte, vous pouvez. utilisez absolu

Pour l'icône devant la boîte aux lettres et le texte qui dépasse la boîte, vous pouvez utiliser absolu. L'absolu

Il fournit une nouvelle idée de mise en page

Afficher le code

4. L'absolu est séparé du flux de documents

L'animation doit être utilisée sur l'absolu autant que possible, car l'absolu est séparé du flux de documents, de sorte que l'animation n'affectera pas les autres éléments

 1 nbsp;html> 2  3  4 <meta> 5 <title>文本图标对齐与定位二三事</title> 6 <style> 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } 8 a { color: #50B6E5; } 9 .constr { width: 1200px; margin-left: auto; margin-right: auto; }10 .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; }11 .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; }12 .regist-main { width: 600px; margin-left: auto; margin-right: auto; }13 .regist-group { margin-top: 20px; overflow: hidden; }14 .regist-label { width: 70px; padding-top: 10px; float: left; }15 .regist-cell { display: table-cell; *display: inline-block; }16 .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; }17 .regist-code-input { width: 130px; }18 .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; }19 .regist-btn:hover { background-color: #33a646; }20 .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://www.php.cn/) no-repeat center; }21 22 .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }23 .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }24 .regist-warn { padding-left: 20px; color: #be3948; }25 .regist-warn > .icon-warn { position: absolute; margin-left: -20px; }26 </style>27 28 29 30 <p>31     </p><p>注册</p>32     <p>33         </p><p>34             </p><p>35                 <label><span>*</span>登录邮箱</label>36                 </p><p>37                     <input><span>38                         <i></i>邮箱格式不准确（演示）39                     </span>40                 </p>41             42             <p>43                 <label><span>*</span>登录密码</label>44                 </p><p>45                     <input><span>46                         请输入6-16位密码，区分大小写，不能使用空格47                     </span>48                 </p>49             50             <p>51                 <label><span>*</span>用户昵称</label>52                 </p><p>53                     <input>54                 </p>55             56             <p>57                 <label>手机号码</label>58                 </p><p>59                     <input>60                 </p>61             62             <p>63                 <label><span>*</span>验 证 码</label>64                 </p><p>65                     <input><img  src="/static/imghwm/default1.png" data-src="http://img.mukewang.com/545308540001678401500040.jpg" class="lazy" alt="Compréhension approfondie et absolue du CSS" >66                 </p>67             68             <p>69                 <label> </label>70                 </p><p>71                     <input><label>我已阅读并同意<a>慕课协议</a>。</label>72                     </p><p>73                         <a>立即注册</a>74                     </p>75                 76             77         78     79 80 81 

Pour une compréhension plus approfondie des articles liés à l'absolu CSS, veuillez prêter attention à le site PHP chinois !