網(wǎng)頁(yè)制作HTML盡量減少對(duì)CSS的依賴發(fā)布者：本站     時(shí)間：2021-02-08 10:02:08

結(jié)構(gòu)與表現(xiàn)相關(guān)內(nèi)容簡(jiǎn)介

網(wǎng)站建設(shè)中html結(jié)構(gòu) css表現(xiàn) javascrip行為 網(wǎng)頁(yè)布局要考慮到結(jié)構(gòu)，表現(xiàn)，行為分離原則，首先重點(diǎn)放在結(jié)構(gòu)和語(yǔ)義化上面，再考慮CSS，JS等，便于后期維護(hù)和分析……

結(jié)構(gòu)與表現(xiàn)相分離的思想

1. 初級(jí)的開發(fā)人員思路及制作方法：div層層嵌套；
2. 中級(jí)的開發(fā)人員思路及制造方法：去掉多余的div,進(jìn)行簡(jiǎn)化；
3. 高級(jí)的開發(fā)人員思路及制造方法：最大化的簡(jiǎn)化html的結(jié)構(gòu)，然后用css進(jìn)行設(shè)置，減少html與css的契合度。
   步驟：
   先按結(jié)構(gòu)和語(yǔ)義編寫代碼
   然后進(jìn)行css樣式設(shè)置
   減少HTML與CSS契合度

overflow:
visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。
scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

text-indent文本縮進(jìn)到目標(biāo)位置，可以不要給文本再另外套標(biāo)簽。減少冗余代碼

拿到一個(gè)網(wǎng)頁(yè)設(shè)計(jì)圖的時(shí)候，首先關(guān)注網(wǎng)頁(yè)的文字內(nèi)容以及內(nèi)容模塊間的關(guān)系。
把重點(diǎn)放在編寫語(yǔ)義化的html代碼上，而不要過(guò)多考慮設(shè)計(jì)圖上的樣式，
等到html按內(nèi)容編寫完成之后，再考慮樣式的實(shí)現(xiàn)。
在不改變現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上，完成設(shè)計(jì)圖要求的視覺效果
margin可以是負(fù)值，通過(guò)負(fù)值，可以使該內(nèi)容進(jìn)行移動(dòng)！實(shí)現(xiàn)四個(gè)方向的移動(dòng)。
在結(jié)構(gòu)（HTML）和樣式（css）中，可以先把內(nèi)容通過(guò)HTML寫出來(lái)，再利用margin移動(dòng)位置，實(shí)現(xiàn)排版，降低樣式和結(jié)構(gòu)的耦合，并且減少代碼

網(wǎng)頁(yè)換膚及總結(jié)

盡量減少html對(duì)css的依賴

網(wǎng)頁(yè)換膚：相同的html結(jié)構(gòu)，不同的css樣式