網頁布局對改善網站的外觀非常重要,請慎重設計您的網頁布局,大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）,大多數網站可以使用 <div> 或者 <table> 元素來創建多列，CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀，
e.g:雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具，
HTML 布局 - 使用<div> 元素/div 元素是用于分組 HTML 元素的塊級元素
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div id="container" style="width:800px"> 6 7 <div id="header" style="background-color:#FFA500;"> 8 <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> 9 10 <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> 11 <b>Menu</b><br> 12 HTML<br> 13 CSS<br> 14 JavaScript</div> 15 16 <div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;"> 17 Content goes here</div> 18 19 <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 20 Copyright © w3cschool.cn</div> 21 22 </div> 23 24 </body> 25 </html>
HTML 布局 - 使用table表格
使用 HTML <table> 標簽是創建布局的一種簡單的方式;大多數站點可以使用 <div> 或者 <table> 元素來創建多列，CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀，即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化資料 - 表格不是布局工具！
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <table width="500" border="0"> 6 <tr> 7 <td colspan="2" style="background-color:#FFA500;"> 8 <h1>Main Title of Web Page</h1> 9 </td> 10 </tr> 11 12 <tr> 13 <td style="background-color:#FFD700;width:100px;"> 14 <b>Menu</b><br> 15 HTML<br> 16 CSS<br> 17 JavaScript 18 </td> 19 <td style="background-color:#eeeeee;height:200px;width:400px;"> 20 Content goes here</td> 21 </tr> 22 23 <tr> 24 <td colspan="2" style="background-color:#FFA500;text-align:center;"> 25 Copyright © w3cschool.cn</td> 26 </tr> 27 </table> 28 29 </body> 30 </html>
HTML 布局/使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護，通過編輯單一的檔案，就可以改變所有頁面的布局，同時由于創建高級的布局非常耗時，使用模板是一個快速的選項，通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們），
拓展：網頁簡單布局之結構與表現原則案例
概括：一開始我們接觸網頁制作的時候，就了解到html代表結構、css代表樣式、javascript代表行為，網頁制作中，我們一直強調結構與表現相分離的原則，這里面的結構一般指HTML，此外分離是說把它們寫在不同的檔案加以參考嗎？當然不是，在這里的學習中了解到，分離不單是一種方法更是一種思想，簡而言之，一個平面二維坐標，其中x軸代表技術發展，y軸代表網頁制作需求，分離是根據技術發展和我們的網頁制作需求完成的！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/55488.html
標籤：Html/Css