寫了半天竟然沒了！！！！好氣好氣!
課程介紹：
認識佈局：
-以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置
-佈局模式有多種，不同的製作者會有不同的佈局設計
爲什麼要學習網頁佈局：
-製作一個網頁的基礎
課程包含內容：
-行佈局
-多列布局
-聖盃佈局
-雙飛翼佈局
學習本門課程需要掌握的知識：
-HTML和CSS基礎
-會使用DIV+CSS進行排版
-熟悉float屬性，position屬性
經典的行佈局：
-基礎的行佈局
-行佈局自適應
-行佈局自適應限制最大寬 max-width：xx px;
-行佈局垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行佈局</title> <style type="text/css"> body{ margin:0;padding:0; background:#fff; text-align:center;/*文字居中*/ } .container{ width:800px; height:200px; background:#4c77f2; position:absolute; top:50%; left:50%;/*以上只是div的左上角處於網頁的最中間*/ margin-top:-100px;/*height高度的一半*/ margin-left:-400px;/*width寬度的一半*/ } </style> </head> <body> <div class="container">這是頁面內容</div> </body> </html>
經典的行佈局：
-行佈局固定寬
-行佈局部位自適應
-行佈局導航隨屏幕滾動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行佈局</title> <style type="text/css"> body{ margin:0; padding:0; color:#fff; text-align:center; font-size:16px; } .header{ width:100%; height:50px; background:#333; margin:0 auto; line-height:50px; position:fixed;} .banner{ width:800px; height:300px; background:#30a475; margin:0 auto; line-height:300px; padding-top:50px;} .container{ width:800px; height:1000px; background:#4c77f2; margin:0 auto; } .footer{ width:800px; height:50px; background:#333; margin:0 auto; line-height:50px; } </style> </head> <body> <div class="header">這是頁面的頭部</div> <div class="banner">這是頁面的banner圖</div> <div class="container">這是頁面的內容</div> <div class="footer">這是頁面的底部</div> </body> </html>
經典的列布局：
-兩列布局固定；
-兩列布局自適應；
-三列布局固定；
-三列布局自適應；
兩列：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行佈局</title> <style type="text/css"> body{ margin:0; padding:0; color:#fff; } .container{ width:1005px; height:1000px; margin:0 auto; } .left{ width:600px; height:1000px; background:#1a5acd; float:left; } .right{ width:400px; height:1000px; background:#5880f9; float:right; </style> </head> <body> <div class="container"> <div class="left">這是頁面的左側</div> <div class="right">這是頁面的右側</div> </div> </body> </html>
三列：
中間那一列，可以放在right後，也可以放在左面，
float值爲left。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行佈局</title> <style type="text/css"> body{ margin:0; padding:0; color:#fff; } .container{ width:80%; height:1000px; margin:0 auto; } .left{ width:30%; height:1000px; background:#67b581; float:left; } .middle{ width:40%; height:1000px; background:#175bd8; float:left; } .right{ width:30%; height:1000px; background:#67b581; float:right; } </style> </head> <body> <div class="container"> <div class="left">這是頁面的左側</div> <div class="middle">這是頁面的中間</div> <div class="right">這是頁面的右側</div> </div> </body> </html>
混合佈局：
-混合佈局固定；
-混合佈局自適應；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行佈局</title> <style type="text/css"> head{ margin:0; padding:0; font-size:16px; color:#fff; text-align:center; } .header{ width:800px; height:50px; background:#5880f9; margin:0 auto; line-height:50px; } .container{ width:800px; height:1000px; margin:0 auto; } .left{ width:200px; height:1000px; background:#67b581; float:left; } .right{ width:600px; height:1000px; background:#d0d0d0; float:right; } .footer{ width:800px; height:100px; background:#ed817e; margin:0 auto; line-height:100px; } </style> </head> <body> <div class="header">這是頁面的頭部</div> <div class="container"> <div class=" left">這是頁面的左側</div> <div class="right">這是頁面的右側</div> </div> <div class="footer">這是頁面的底部</div> </body> </html>