本篇文章給大家談?wù)勅绾斡胐iv制作簡(jiǎn)易網(wǎng)頁(yè)，以及如何用div制作簡(jiǎn)易網(wǎng)頁(yè)對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、簡(jiǎn)述如何通過div布局網(wǎng)頁(yè)
• 2、DIVCSS怎么做網(wǎng)頁(yè)
• 3、如何快速用css加div做一個(gè)簡(jiǎn)單網(wǎng)頁(yè)
• 4、怎么可以最簡(jiǎn)單的使用div+css制作網(wǎng)頁(yè)框架

簡(jiǎn)述如何通過div布局網(wǎng)頁(yè)

首先創(chuàng)建好整體框架

body

div id="wrapper"

div id="header"/div!--頭部--

div id="container"/div!--內(nèi)容部分--

div id="footer"/div!--頁(yè)腳--

/div

/body

接著在這個(gè)框架下開始寫入信息，如logo以及導(dǎo)航信息，以及內(nèi)容，以及頁(yè)腳

編寫好后，再編寫css樣式，

創(chuàng)建一個(gè)style.css的樣式，在這個(gè)樣式表里面寫入網(wǎng)頁(yè)標(biāo)簽的顏色，大小，背景

最后測(cè)試網(wǎng)站完成

DIVCSS怎么做網(wǎng)頁(yè)

第一、float屬性：DIV（層）默認(rèn)是占據(jù)一整行，對(duì)于常見的兩列或多列布局的設(shè)計(jì)，需要能夠正確設(shè)置float及width屬性實(shí)現(xiàn)效果。多列布局結(jié)束后如果跟了一個(gè)占據(jù)通欄的層，此時(shí)需要設(shè)置clear屬性清除層浮動(dòng)。

第二、盒模式：層具有寬度width、高度height、邊框border、內(nèi)間距padding和外間距margin等屬性，而層實(shí)際占據(jù)的空間是上述屬性值相加的大小，合理運(yùn)用這些屬性能實(shí)現(xiàn)緊湊而又美觀的網(wǎng)頁(yè)布局。

第三、層嵌套：有經(jīng)驗(yàn)的網(wǎng)頁(yè)設(shè)計(jì)師都知道層不宜嵌套過多，一般不超過3層，嵌套過多的會(huì)導(dǎo)致代碼復(fù)雜冗余、維護(hù)困難及運(yùn)行慢的問題。另外，在多列布局時(shí)完全可以用層浮動(dòng)實(shí)現(xiàn)，不需要整體設(shè)置一個(gè)ie層來嵌入。

單獨(dú)提下瀏覽器兼容的話題。DIV+CSS相比TABLE布局，更容易出現(xiàn)多種瀏覽器不兼容的問題，主要原因是不同的瀏覽器對(duì)web標(biāo)準(zhǔn)默認(rèn)值不同。國(guó)內(nèi)主流是ie，firefox及chrome用的較少，在兼容性測(cè)試方面，首先需要保證在ie多版本不出現(xiàn)問題，這里設(shè)計(jì)到一些方法和技巧，可以針對(duì)具體問題在網(wǎng)站查找解決辦法。

總結(jié)：DIV+CSS相比TABLE有根多的優(yōu)勢(shì)，網(wǎng)頁(yè)設(shè)計(jì)師應(yīng)該及早摒棄TABLE方式，這樣更有利于督促自己深入學(xué)習(xí)DIV+CSS知識(shí)。學(xué)習(xí)并使用DIV+CSS的網(wǎng)頁(yè)設(shè)計(jì)方式并不難，只要了解一些基礎(chǔ)知識(shí)，然后多做幾個(gè)案例就能逐漸理解掌握。

如何快速用css加div做一個(gè)簡(jiǎn)單網(wǎng)頁(yè)

CSS和DIV分開，也可以放在同一個(gè)文件中，下面就是一個(gè)簡(jiǎn)單的CSS+DIV網(wǎng)頁(yè)

!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""

html?xmlns=""

head

meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/

title一個(gè)簡(jiǎn)單的CSS網(wǎng)頁(yè)/title

style?type="text/css"

!--

.jiandan?{

????font-size:?16px;

????font-weight:?bold;

????color:#f00;

}

.aa{width:500px;height:200px;?border:1px?solid?#00f;}

--

/style

/head

body

div?class="aa"span?class="jiandan"一個(gè)簡(jiǎn)單網(wǎng)頁(yè)/span/div

/body

/html

怎么可以最簡(jiǎn)單的使用div+css制作網(wǎng)頁(yè)框架

1、布局先把大框架確定，再逐步把內(nèi)部的細(xì)節(jié)構(gòu)建出來，從層級(jí)關(guān)系來看就是由外往內(nèi)布局；

2、如果你對(duì)divcss不是很熟悉，那么你可以先以圖片作為背景圖片代替

3、如果對(duì)布局定位不是很熟練，那么可以暫時(shí)以絕對(duì)位置來布局

4、自己不熟悉的情況下，在設(shè)計(jì)平面頁(yè)面的時(shí)候就要先考慮到自己是否有能力寫出這個(gè)頁(yè)面的布局出來，或者說自己寫出來的不出問題；比如圓角、陰影、半透明效果、模塊錯(cuò)位疊加等等；

其實(shí)頁(yè)面布局是否簡(jiǎn)單只是相對(duì)而言的，精通的人和新手的看法肯定不同，從長(zhǎng)遠(yuǎn)來看，新手還是不要取巧，寫divcss代碼的時(shí)候不要怕出錯(cuò)，不要怕難，碰到了問題就去尋找解決的方法，針對(duì)問題然后去解決問題是最好的解決方式，當(dāng)你不再碰到問題或者很少碰到問題的時(shí)候，就說明你已經(jīng)精通或者離精通不遠(yuǎn)了

還有一點(diǎn)要說一下，學(xué)習(xí)得有一個(gè)喜歡的態(tài)度，不要當(dāng)做負(fù)擔(dān)或者任務(wù)來學(xué)習(xí)，當(dāng)你對(duì)一個(gè)東西感興趣的時(shí)候你會(huì)學(xué)習(xí)的很快；就好比讀書的時(shí)候某些學(xué)生某一科的成績(jī)一直很好，絕大部分人其實(shí)都是感興趣才會(huì)學(xué)的那么好

關(guān)于如何用div制作簡(jiǎn)易網(wǎng)頁(yè)和如何用div制作簡(jiǎn)易網(wǎng)頁(yè)的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。