首先，建議你一點(diǎn)，與其在上一個(gè)div里面用marginbottom不如在下一個(gè)div里面用margintop，因?yàn)閙arginbottom經(jīng)常會(huì)失效，而你這樣的布局可以這樣寫 ltstyle margin0pxpadding0px bodymargin0px auto blue；答案CSS+DIV布局的常用方法有三種一 常規(guī)流式布局 元素按照自身的常規(guī)顯示方式顯示，有兩個(gè)特點(diǎn)1元素按照自身HTML元素定義的位置顯示怎么寫的怎么顯示2元素按照自身的常規(guī)顯示特性顯示，比如塊級(jí)元素垂直排；1首先新建html文檔，進(jìn)入代碼書寫界面2在lthead和ltbody的里面寫入代碼，在ltdiv里面寫入想要輸入的內(nèi)容ltdiv3書寫外層軌道css代碼bodywebkitscrollbar width20px height2px background#ccc。

用div+css制作一個(gè)登錄頁(yè)面，首先需要做的就是將這個(gè)登錄界面的布局給構(gòu)想好，然后在使用div去布局出來(lái)，一般都要結(jié)合表單，因?yàn)槭切枰蛿?shù)據(jù)庫(kù)結(jié)合的，至于的具體的界面，看下代碼lthtml lthead ltmeta charset=quotUTF8；在HTML中讓兩個(gè)div并排顯示，通常情況下有三種實(shí)現(xiàn)方式，包括1設(shè)置為行內(nèi)樣式，displayinlineblock 2設(shè)置float浮動(dòng) 3設(shè)置position定位屬性為absolute 以下為三種方式的具體實(shí)現(xiàn)代碼1設(shè)置每個(gè)div的展現(xiàn)屬性為；quotloosedtdquot 二萬(wàn)能 float 閉合關(guān)于 clear float 的原理可參見 How To Clear Floats Without Structural Markup將以下代碼加入Global CSS 中，給需要閉合的div加上 class=quotclearfixquot 即可，屢試不。

前端代碼div+css，就是現(xiàn)在一種網(wǎng)頁(yè)設(shè)計(jì)的一種實(shí)現(xiàn)方式，通過(guò)div+css，可以現(xiàn)在對(duì)一些雜亂無(wú)章的圖片和文字，進(jìn)行排版和使用，從而實(shí)現(xiàn)了人們通?？吹降钠恋木W(wǎng)頁(yè)，具體看下代碼lthead ltlink rel=quotstylesheetquot type=quottex；div displayinlineblock 如需支持ie8以下版本，用浮動(dòng)來(lái)做 widthcalc100 3 此處運(yùn)用了一個(gè)css3的表達(dá)式，將div三等分，ie8及以上可以支持，當(dāng)然也可以根據(jù)需要設(shè)置固定值 widthwebkitcalc100；lt！doctype htmllthtml lang=quotenquotltheadltmeta charset=quotUTF8quotlttitleDemolttitleltstyle*margin0border0padding0xstagemarginautowidth800pxxboxopacity07fontsize0position。

有時(shí)看別人代碼一眼能看懂，自己卻無(wú)從下手寫起有時(shí)不能理解的技術(shù)知識(shí)與問(wèn)題，怎么思考也想不明白等等本篇文章就給朋友們介紹一下各種常見的 div+css 布局方式和實(shí)踐技巧DIV + CSS布局相關(guān)內(nèi)容1 DIV+CSS布局。

* moztransition 5s easeinout*這里為了兼容其他瀏覽器* otransition 5s easeinoutbackgroundimage urlquotship_threeimagestlpngquot 可以，沒問(wèn)題CSS代碼就是上面的；DIV+CSS實(shí)例完整HTML源代碼lt！DOCTYPE html lthtml lthead ltmeta charset=quotgb2312quot lttitlediv的用法在線演示title ltstyle div margintop10px* css注釋說(shuō)明對(duì)div都設(shè)置上間距10；wrapper width100% 也可以固定寬度 height200px wrapper div displayinlineblock 如需支持ie8以下版本，用浮動(dòng)來(lái)做 widthcalc100 3 此處運(yùn)用了一個(gè)css3的表達(dá)式，將div三等分。

lt！居中層ltdiv id=quotmainquot lt！頂層ltdiv id=quottopquotltdiv lt！導(dǎo)航層ltdiv id=quotmenuquotltdiv lt！內(nèi)容外層ltdiv id=quotcontentquot lt！左ltdiv id=quotleftbarquotltdiv；ltdiv style=quotwidth284pxquot id=quotlist1quot ltdiv class=quotitemquot ltdiv class=quottopicquot 瀑布流布局 ltdiv ltdiv class=quottextquot斂身幽谷遠(yuǎn)塵埃，天光云影任徘徊不須天風(fēng)來(lái)相催，自在花兒靜靜開ltdiv ltdiv。