如何创建一个简易的HTML网页框架
背景：
在我們初步學習了web前端開發的一些知識時，我們可能會考慮構建一個簡單的html網站，但是，如何著手去開始我們的網站，對于新手來說可能是個問題。
在這篇文章中，我將介紹我在構建一個簡易的網頁時，首先去做的事情。
當然，我本身也并非專業的前端設計師，寫此文章主要為了分享我的一些學習過程中的經驗，所寫內容可能也會存在思想局限以及紕漏，也希望大家批評指出。`
第一步：畫出草圖
在開始我們的編程之前，我覺得更關鍵的是設計出我們的網頁效果，即使是最簡單的框架圖，也能夠降低我們在編寫代碼過程中的難度。
首先，我會先思考我的網頁需要包括哪些內容，分為哪幾塊，要達到的作用有什么。
當然，我們有時候會很難想象自己能夠設計出那么多不一樣的網站，經常會走向一個思維定勢的地步，我個人的建議是，可以參考互聯網上已有的網站，獲取一定的經驗。而這，在我看來，對于一個初學者可以起到事半功倍的效果。
在我們的文章中，我列舉了下圖這樣的一個簡單的網頁設計效果。
第二步：板塊分析
對于一個基本的網頁，其基本上由三個部分組成，頭部header，內容content，尾部footer。
因此，首先我們將網頁分成了三個部分，也就是①圖中的導航欄在內的前兩行，②中間的三個大方塊，③尾部的聯系我們。
對于我們分好的板塊，我們用div標簽來表示框架。
這樣，我們就可以首先編寫最初的代碼輪廓。
當然，編寫完成這樣的代碼之后，我們在網頁上什么都看不見，因此，我們需要在css內給添加一些效果。
其中，#id是指向標簽id的css效果添加方法。
我們可以看到網頁的效果將是這個樣子：
第三步：具體分析
在完成初步的分塊之后，我們需要按照內容細分模塊。
首先，header包括兩行，需要分成兩塊。content1與content2
其次，content包括三個大塊：
第一塊content1包括一個圖片content1img、文字content1txt和鏈接content1link，所以再細分三塊
第二塊content2與第三塊content3分別包括一個文字content2txt、content3txt與鏈接content3txt、content3link，所以均分為兩塊
最后，footer不需要再劃分。
第四步：具體實現
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="CSS/home.css"><script src="JS/home.js" type="text/javascript"></script><title>示例</title> </head> <body><!-- 最核心的三個模塊 --><div id="header"><div id="header1"></div><div id="header2"></div></div><div id="content"><div id="content1"><div id="content1img"></div><div id="content1txt"></div><div id="content1link"></div></div><div id="content2"><div id="content2txt"></div><div id="content2link"></div></div><div id="content3"><div id="content3txt"></div><div id="content3link"></div></div></div><div id="footer"></div> </body> </html>以及css效果 ：
/* 消除默認樣式 */ *{margin: 0;padding: 0; } #header{/* 寬度占屏幕100%，這樣縮放瀏覽器不會影響效果 */width: 100%;/* 給標簽設計高度，否則內部為空的標簽將無法顯示出來 *//* height: 50px; 內部子標簽有高度，這里就不用了*//* 給模塊添加背景顏色，否則我們無法看到網頁布局的效果 *//* background-color: cyan; 去掉大模塊的顏色*/ } #header1{/* 寬度繼承父標簽 */height: 20px;background-color: aqua; } #header2{height: 30px;background-color: blueviolet; } #content{width: 100%;height: 550px;background-color:bisque;/* 采用margin來給模塊之間添加距離 */margin-top: 30px; } #content1{width: 80%;margin-top: 20px;height: 300px;background-color:lightcoral;/* 左側占10%，寬度80%，右側剩10%，達到居中效果 */margin-left:10% ; } #content1img{width: 30%;height: 150px;margin-left: 10%;margin-top: 70px;float: left;background-color: brown; } #content1txt{width: 30%;height: 100px;margin-right: 10%;float: right;margin-top: 20px;background-color: brown; } #content1link{width: 30%;height: 100px;margin-right: 10%;margin-top: 70px;float: right;background-color: brown; } #content2{width: 30%;margin-left: 10%;height: 150px;margin-top: 30px;background-color: cadetblue;float: left; } #content2txt{width: 80%;height: 70px;margin-right: 10%;float: right;margin-top: 20px;background-color: gainsboro; } #content2link{width: 80%;height: 20px;margin-right: 10%;float: right;margin-top: 20px;background-color: gainsboro; } #content3{width: 30%;margin-right: 10%;height: 150px;margin-top: 30px;background-color: cadetblue;float: right; } #content3txt{width: 80%;height: 70px;margin-right: 10%;float: right;margin-top: 20px;background-color: gainsboro; } #content3link{width: 80%;height: 20px;margin-right: 10%;float: right;margin-top: 20px;background-color: gainsboro; }#footer{width: 100%;height: 100px;background-color: greenyellow; }呈現效果：
最終，我們也就呈現出這樣的網頁效果了：
希望本文在記錄我的方法的同時，也能夠幫助到你。
感謝您的閱讀
總結
以上是生活随笔為你收集整理的如何创建一个简易的HTML网页框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 以技术为驱动力，百度智能云数据众包专注做
- 下一篇： 滴滴出行 DoKit 2.0 - 泛前端