html學習筆記5—佈局
阿新 • • 發佈：2020-07-14
簡單佈局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .header { /*設定一個寬度*/ width: 1000px; /*設定一個高度*/ height: 150px; /*設定一個背景顏色*/ background-color: yellowgreen; /*設定居中*/ margin: 0 auto; } /*設定一個content*/ .content { /*設定一個寬度*/ width: 1000px; /*設定一個高度*/ height: 400px; /*設定一個背景顏色*/ background-color: orange; /*居中*/ margin: 10px auto; } /*設定content中小div的樣式*/ .left { width: 200px; height: 100%; background-color: skyblue; /*向左浮動*/ float: left; } .center{ width: 580px; height: 100%; background-color: yellow; /*向左浮動*/ float: left; /*設定水平外邊距*/ margin: 0 10px; } .right { width: 200px; height: 100%; background-color: pink; /*向左浮動*/ float: left; } /*設定一個footer*/ .footer { /*設定一個寬度*/ width: 1000px; /*設定一個高度*/ height: 150px; /*設定一個背景顏色*/ background-color: gray; /*居中*/ margin: 0 auto; } </style> </head> <body> <!-- 頭部div --> <div class="header"></div> <!-- 主體內容div --> <div class="content"> <!-- 左側div --> <div class="left"></div> <!-- 中間div --> <div class="center"></div> <!-- 右側div --> <div class="right"></div> </div> <!-- 底部資訊div --> <div class="footer"></div> </body> </html>