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

本文目錄一覽：

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

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

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

body

div id="wrapper"

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

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

div id="footer"/div!--頁腳--

/div

/body

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

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

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

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

DIVCSS怎么做網(wǎng)頁

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

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

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

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

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

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

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

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

html?xmlns=""

head

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

title一個簡單的CSS網(wǎng)頁/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"一個簡單網(wǎng)頁/span/div

/body

/html

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

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

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

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

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

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

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

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