abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雙飛翼布局</title> <style> body{ width:800px; min-height: 1000px; margin: 0 auto; background-color: lightblue; } .header{ width: inherit; height: 60px; background-color: burlywood; /*取消header上下邊的默認margin*/ margin-top: 0; margin-bottom: 0; /*取消header內(nèi)邊距左邊默認寬度*/ padding-left: 0; padding-top: 20px; } .header .content { width: inherit; height: 40px; background-color: inherit; margin: 0 auto; } /*頭部內(nèi)容區(qū)中的導航*/ .header .content .nav { display: table; margin:0 auto; padding-left: 0; } .header .content .nav .item { /*去掉列表前的小圓點*/ list-style-type: none; /*設置列表為橫排顯示的塊級元素*/ display: inline-block; /*設置列表項目對于nav橫向居中*/ padding: 0 25px; /*列表項目的邊框*/ /*border: 1px solid red;*/ /*background-color: coral;*/ border-radius: 15%; /*盒子背景的陰影顏色，格式為： x軸 Y軸 Z軸 顏色，且Z軸不能為負數(shù)，其他的可以*/ box-shadow:3px 3px 6px blueviolet; background-color: azure; /*給每個列表項目一個左右外邊距，上下為0，左右各15，才能保證居中顯示。*/ margin: 0 15px; } .header .content .nav .item .qq { color: #ff1473; /* 去掉鏈接標簽默認的下劃線 */ text-decoration: none; /*設置行高*/ line-height: 40px; /*設置字體大小*/ /*font-size: 30px;*/ /*設置字符間距為5px*/ letter-spacing:5px; } .header .content .nav .item:hover { /* 當鼠標移動到字體上將導航item上背景成黃綠色*/ background-color: aquamarine; } .header .content .nav .item .qq:hover { /* 當鼠標移動到字體上將導航文本設置為系統(tǒng)根字體大小的1.2倍 */ font-size: 1.2rem; } /*------------以下是主體部分-------------*/ .container { background-color: aquamarine; width: inherit; margin: 4px auto; /*overflow 屬性規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情。 hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。 也有把float浮動效果消除的效果，把浮動動態(tài)頁面變成文檔流級別。 clear：是清除浮動，注意兩者區(qū)別*/ overflow: hidden; } .main { width: inherit; background-color: blue; margin:0 auto; float:left; } .center { background-color: green; width:inherit; min-height: 400px; margin:0 auto; /*左右各設置一個left和right的寬度，文本框剛好設置成顯示在最中間框內(nèi)。*/ /*padding-left: 200px;*/ /*padding-right: 200px;*/ padding:0 200px; } .left { width: 200px; background-color: yellow; min-height: 400px; /*統(tǒng)一往左浮動，浮動-100%剛好到最左邊*/ float: left; margin-left:-100%; } .right { width: 200px; background-color: red; min-height: 400px; /*統(tǒng)一往左浮動，浮動-200px剛好到最右邊*/ float:left; margin-left: -200px; } /*---------以下是底部------------*/ .foot { width:inherit; height: 60px; background-color: yellowgreen; /*減小上下外邊距-12，按道理只要減少上邊距就可以，上邊主體上下各給了一個4px,按道理應該同級塌陷*/ margin: -12px auto; } .foot .content { width:inherit; height:60px; margin: 0 auto; } .foot .content p{ text-align: center; line-height: 60px; } .foot .content p a{ text-decoration: none; color: dimgray; } .foot .content a:hover { color: white; } </style> </head> <body> <div class="header"> <div class="content"> <ul class="nav"> <li class="item"><a class="qq" href="">首頁</a> </li> <li class="item"><a class="qq" href="">新聞</a> </li> <li class="item"><a class="qq" href="">下載</a> </li> <li class="item" ><a class="qq" href="">學習</a> </li> <li class="item"><a class="qq" href="">留言</a> </li> </ul> </div> </div> <div class="container"> <div class="main"> <div class="center">中間部位</div> </div> <div class="left">左邊部分</div> <div class="right">右邊邊部分</div> </div> <div class="foot"> <div class="content"> <p> <a href="">? XXXXXXX版權(quán)所有</a> | <a href="">0551-88889999</a> | <a href="">皖I(lǐng)CP2016098801-1</a> </p> </div> </div> </body> </html>
Correcting teacher：查無此人Correction time：2019-07-09 14:54:01
Teacher's summary：完成的不錯。你這一行代碼也太長了，需要優(yōu)化展現(xiàn)格式。繼續(xù)加油