用CSS建設網站的實例

2024-07-11 08:43:36

字體：大中小

來源：轉載

供稿：網友

本篇已得到原作者Steve Dennis的翻譯準予，在此Jorux表示感謝！
本教程主要參考Creating a CSS Layout from scratch，由Jorux翻譯，以意譯為主，其間加入了不少Jorux的個人觀點，省略了一些多余的說明，請讀者明鑒。
目錄：第一步：規劃網站，本教程將以圖示為例構建網站；第二步：創建html模板及文件目錄等；第三步：將網站分為五個div，網頁基本布局的基礎；第四步：網頁布局與div浮動等；第五步：網頁主要框架之外的附加結構的布局與表現；第六步：頁面內的基本文本的樣式(css)設置；第七步：網站頭部圖標與logo部分的設計；第八步：頁腳信息(版權等)的表現設置；第九步：導航條的制作(較難)；第十步：解決ie瀏覽器的顯示bug；
第一步：規劃網站，本教程將以圖示為例構建網站
1.規劃網站，本教程將以下圖為例構建網站。
其基本布局見下圖：
DIV CSS網頁布局實例：十步學會用CSS建站

主要由五個部分構成：
DIV CSS網頁布局實例：十步學會用CSS建站

1.Main Navigation 導航條，具有按鈕特效。 Width: 760px Height: 50px
2.Header 網站頭部圖標，包含網站的logo和站名。 Width: 760px Height: 150px
3.Content 網站的主要內容。 Width: 480px Height: Changes depending on content
4.Sidebar 邊框，一些附加信息。 Width: 280px Height: Changes depending on
5.Footer 網站底欄，包含版權信息等。 Width: 760px Height: 66px

上一頁12 3 4 5 6 7 8 下一頁閱讀全文

上一篇：CSS教程:position 絕對定位的問題

下一篇：標簽增加CSS的overflow屬性來清除浮動