如何创建一个简易的HTML网页框架
背景：
在我們初步學(xué)習(xí)了web前端開發(fā)的一些知識(shí)時(shí)，我們可能會(huì)考慮構(gòu)建一個(gè)簡(jiǎn)單的html網(wǎng)站，但是，如何著手去開始我們的網(wǎng)站，對(duì)于新手來說可能是個(gè)問題。
在這篇文章中，我將介紹我在構(gòu)建一個(gè)簡(jiǎn)易的網(wǎng)頁時(shí)，首先去做的事情。
當(dāng)然，我本身也并非專業(yè)的前端設(shè)計(jì)師，寫此文章主要為了分享我的一些學(xué)習(xí)過程中的經(jīng)驗(yàn)，所寫內(nèi)容可能也會(huì)存在思想局限以及紕漏，也希望大家批評(píng)指出。`
第一步：畫出草圖
在開始我們的編程之前，我覺得更關(guān)鍵的是設(shè)計(jì)出我們的網(wǎng)頁效果，即使是最簡(jiǎn)單的框架圖，也能夠降低我們?cè)诰帉懘a過程中的難度。
首先，我會(huì)先思考我的網(wǎng)頁需要包括哪些內(nèi)容，分為哪幾塊，要達(dá)到的作用有什么。
當(dāng)然，我們有時(shí)候會(huì)很難想象自己能夠設(shè)計(jì)出那么多不一樣的網(wǎng)站，經(jīng)常會(huì)走向一個(gè)思維定勢(shì)的地步，我個(gè)人的建議是，可以參考互聯(lián)網(wǎng)上已有的網(wǎng)站，獲取一定的經(jīng)驗(yàn)。而這，在我看來，對(duì)于一個(gè)初學(xué)者可以起到事半功倍的效果。
在我們的文章中，我列舉了下圖這樣的一個(gè)簡(jiǎn)單的網(wǎng)頁設(shè)計(jì)效果。
第二步：板塊分析
對(duì)于一個(gè)基本的網(wǎng)頁，其基本上由三個(gè)部分組成，頭部header，內(nèi)容content，尾部footer。
因此，首先我們將網(wǎng)頁分成了三個(gè)部分，也就是①圖中的導(dǎo)航欄在內(nèi)的前兩行，②中間的三個(gè)大方塊，③尾部的聯(lián)系我們。
對(duì)于我們分好的板塊，我們用div標(biāo)簽來表示框架。
這樣，我們就可以首先編寫最初的代碼輪廓。
當(dāng)然，編寫完成這樣的代碼之后，我們?cè)诰W(wǎng)頁上什么都看不見，因此，我們需要在css內(nèi)給添加一些效果。
其中，#id是指向標(biāo)簽id的css效果添加方法。
我們可以看到網(wǎng)頁的效果將是這個(gè)樣子：
第三步：具體分析
在完成初步的分塊之后，我們需要按照內(nèi)容細(xì)分模塊。
首先，header包括兩行，需要分成兩塊。content1與content2
其次，content包括三個(gè)大塊：
第一塊content1包括一個(gè)圖片content1img、文字content1txt和鏈接content1link，所以再細(xì)分三塊
第二塊content2與第三塊content3分別包括一個(gè)文字content2txt、content3txt與鏈接content3txt、content3link，所以均分為兩塊
最后，footer不需要再劃分。
第四步：具體實(shí)現(xiàn)
<!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><!-- 最核心的三個(gè)模塊 --><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效果 ：
/* 消除默認(rèn)樣式 */ *{margin: 0;padding: 0; } #header{/* 寬度占屏幕100%，這樣縮放瀏覽器不會(huì)影響效果 */width: 100%;/* 給標(biāo)簽設(shè)計(jì)高度，否則內(nèi)部為空的標(biāo)簽將無法顯示出來 *//* height: 50px; 內(nèi)部子標(biāo)簽有高度，這里就不用了*//* 給模塊添加背景顏色，否則我們無法看到網(wǎng)頁布局的效果 *//* background-color: cyan; 去掉大模塊的顏色*/ } #header1{/* 寬度繼承父標(biāo)簽 */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;/* 左側(cè)占10%，寬度80%，右側(cè)剩10%，達(dá)到居中效果 */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; }呈現(xiàn)效果：
最終，我們也就呈現(xiàn)出這樣的網(wǎng)頁效果了：
希望本文在記錄我的方法的同時(shí)，也能夠幫助到你。
感謝您的閱讀
總結(jié)
以上是生活随笔為你收集整理的如何创建一个简易的HTML网页框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 以技术为驱动力，百度智能云数据众包专注做
- 下一篇： windows系统下文件批量重命名方法