css網頁佈局基礎
阿新 • • 發佈：2020-08-21
一、認識佈局
- 以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置
- 佈局模式有多種,不同的製作者會有不同的佈局設計
二、主要內容
- 行佈局
- 多列布局
- 聖盃佈局
- 雙飛翼佈局
三、經典的行佈局
1.經典的行佈局
- 基礎的行佈局
- 行佈局自適應
- 行佈局自適應限制最大寬
- 行佈局垂直水平居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <經典的行佈局-1style> 7 body{ 8 margin:0;padding: 0;color: #fff;text-align: center; 9 } 10 .container{width:800px; height: 200px;background: #4c77f2; 11 position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -400px;} 12 </style> 13 </head> 14 <body> 15 <div class="container">這是頁面內容</div> 16 </body> 17 </html>
2.經典的行佈局
- 行佈局固定寬
- 行佈局某部位自適應
- 行佈局導航隨螢幕滾動
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <經典的行佈局-2style> 7 body{margin: 0;padding: 0;color: #fff;text-align: center;font-size: 16px;} 8 .header{width: 100%; height: 50px;background: #333;margin: 0 auto;line-height: 50px;position: fixed;} 9 .banner{width: 800px;height: 300px;background: #30a457;margin:0 auto;line-height: 300px;} 10 .container{width: 800px;height: 1000px;background: #4c77f2;margin: 0 auto;} 11 .footer{width: 800px;height:100px;background: #333;margin: 0 auto;line-height: 100px;} 12 </style> 13 </head> 14 <body> 15 <div class="header">這是頁面的頭部</div> 16 <div class="banner">這是頁面的banner圖</div> 17 <div class="container">這是頁面的內容</div> 18 <div class="footer">這是頁面的底部</div> 19 </body> 20 </html>
3.經典的列布局
- 兩列布局固定
- 兩列布局自適應
- 三列布局固定
- 三列布局自適應
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{margin:0;padding: 0;color: #fff;} 8 .container{width: 90%;height: 1000px;margin:0 auto;} 9 .left{width: 60%;height: 1000px;background: #1a5acd;float: left;} 10 .right{width:40%;height: 1000px;background: #95BAFD;float:right;} 11 </style> 12 </head> 13 <body> 14 <div class="container"> 15 <div class="left">這是頁面的左側</div> 16 <div class="right">這是頁面的右側</div> 17 </div> 18 </body> 19 </html>兩列布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{margin:0;padding: 0;color: #fff;} 8 .container{width: 90%;height: 1000px;margin:0 auto;} 9 .left{width: 30%;height: 1000px;background: #15E469;float: left;} 10 .right{width:20%;height: 1000px;background:#15E469;float:right;} 11 .middle{width:50% ;height: 1000px;background:#4C98FF;float: left;} 12 </style> 13 </head> 14 <body> 15 <div class="container"> 16 <div class="left">這是頁面的左側</div> 17 <div class="middle">這是頁面的中間</div> 18 <div class="right">這是頁面的右側</div> 19 </div> 20 </body> 21 </html>三列布局
四、混合佈局
- 混合佈局固定
- 混合佈局自適應
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{margin:0;padding: 0;color: #fff;font-size: 16px; text-align: center;} 8 .header{width: 100%;height: 50px;background:#5880f9;margin:0 auto;line-height: 50px;} 9 .banner{width: 100%;height: 200px; background:#8b8d91;margin: 0 auto;line-height: 100px;} 10 .container{width: 100%;height: 1000px;margin:0 auto;} 11 .left{width: 60%;height: 1000px;background:#95BAFD;float: left;} 12 .right{width:40%;height: 1000px;background: #1a5acd;float:right;} 13 .footer{width: 100%;height: 100px; background:#ed817e;margin: 0 auto;line-height: 100px;} 14 </style> 15 </head> 16 <body> 17 <div class="header">這是頁面的頭部</div> 18 <div class="banner">這是頁面的banner圖</div> 19 <div class="container"> 20 <div class="left">這是頁面的左側</div> 21 <div class="right">這是頁面的右側</div> 22 </div> 23 <div class="footer">這是頁面的底部</div> 24 </body> 25 </html>混合佈局
五、聖盃佈局
1.產生
聖盃佈局是由國外的Kevin Cornell提出的一個佈局模型概念
在國內由淘寶UED的工程師傳播開來
2.佈局要求
- 三列布局，中間寬度自適應,兩邊定寬
- 中間欄要在瀏覽器中優先展示渲染
- 允許任意列的高度最高
- 用最簡單的CSS、最少的HACK語句
3.流程方式
- Middle部分首先要放在container的最前部分
- 然後是Left,right
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 body{min-width: 700px;} 9 .header,.footer{float: left;width: 100%;background:#ddd;height: 40%;line-height: 40px;text-align: center;} 10 .container{padding: 0 220px 0 200px;} 11 .left,.middle,.right{position: relative;float: left;min-height: 300px;} 12 .middle{width: 100%;background:#1a5acd;} 13 .left{width: 200px;background: #f00;margin-left: -100%;left: -200px;} 14 .right{width: 220px;background: #30a457;margin-left: -220px;right: -220px;} 15 </style> 16 </head> 17 <body> 18 <div class="header"> 19 <h4>header</h4> 20 </div> 21 <div class="container"> 22 <div class="middle"> 23 <h4>middle</h4> 24 <p>這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間</p> 25 </div> 26 <div class="left"> 27 <h4>left</h4> 28 <p>這是頁面的左側</p> 29 </div> 30 <div class="right"> 31 <h4>right</h4> 32 <p>這是頁面的右側</p> 33 </div> 34 </div> 35 <div class="footer"> 36 <h4>footer</h4> 37 </div> 38 </body> 39 </html>聖盃佈局
六、雙飛翼佈局
1.產生
經淘寶UED的工程師針對聖盃佈局改良後得出雙飛翼佈局
去掉相對佈局,只需要浮動和負邊距
2.流程方式
main要放最前邊，其次是sub extra
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 body{min-width: 700px;} 9 .header,.footer{float: left;width: 100%;height:40px;background:#ddd;line-height: 40px;text-align: center;} 10 .sub,.main,.extra{float: left;min-height: 300px;} 11 .main{width: 100%;min-height: 300px;} 12 .main-inner{margin-left:200px;margin-right: 220px;background: #30a457;min-height: 300px; } 13 .sub{width: 220px;background: #f00;margin-left: -100%;} 14 .extra{width: 220px;background: #1a5acd;margin-left: -220px;} 15 </style> 16 </head> 17 <body> 18 <div class="header"> 19 <h4>header</h4> 20 </div> 21 <div class="main"> 22 <div class="main-inner"> 23 <h4>main</h4> 24 <p>這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間 25 這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間這是頁面的中間</p> 26 </div> 27 </div> 28 <div class="sub"> 29 <h4>sub</h4> 30 <p>這是頁面的左側</p> 31 </div> 32 <div class="extra"> 33 <h4>extra</h4> 34 <p>這是頁面的右側</p> 35 </div> 36 <div class="footer"> 37 <h4>footer</h4> 38 </div> 39 </body> 40 </html>雙飛翼佈局