一開始我們接觸網(wǎng)頁制作的時候，就了解到html代表結(jié)構(gòu)、css代表樣式、javascript代表行為，網(wǎng)頁制作中，我們一直強(qiáng)調(diào)結(jié)構(gòu)與表現(xiàn)相分離的原則，這里面的結(jié)構(gòu)一般指HTML，此外分離是說把它們寫在不同的文件加以引用嗎？當(dāng)然不是，在這里的學(xué)習(xí)中了解到，分離不單是一種方法更是一種思想，簡而言之，一個平面二維坐標(biāo)，其中x軸代表技術(shù)發(fā)展，y軸代表網(wǎng)頁制作需求，分離就是根據(jù)根據(jù)技術(shù)發(fā)展和我們的網(wǎng)頁制作需求完成的！
舉例：比方說我們蓋房子，html就相當(dāng)房子的結(jié)構(gòu)，css相當(dāng)于后期的裝修，網(wǎng)頁都是基于一張效果來完成的，在我們?yōu)g覽網(wǎng)頁的時候，根據(jù)效果圖不同，樣式不同，所以我們?yōu)g覽的頁面是五花八門的，那么我們?nèi)绾蝸聿季趾镁W(wǎng)頁？首先不要考慮過多的css樣式，盡量讓我們的html結(jié)構(gòu)合理簡潔和語義化，然后再添加完善css樣式！
當(dāng)我們拿到頁面時，不同的制作者對結(jié)構(gòu)結(jié)構(gòu)樣式有不同的鏈接，根據(jù)這個結(jié)構(gòu)樣式了解深度的不同，暫定劃分為：初級、中級、高級三個不同的層次；
比方說這樣一個常見的對話框，有3個單元，首先我們需要完成一個單元，另外的進(jìn)行CTRL+V；如果是初級制作者拿到頁面后，一般按照上面的方框進(jìn)行劃分，一個大的div里面包含2個小的div，左右浮動，左側(cè)放img，右側(cè)放p,h等標(biāo)簽，至于時間因子通過 position屬性定位實(shí)現(xiàn),那下面就用代碼說明下
1 <div class="demo1"> 2 <div class="fl"> 3 <img src="../../images/head02.jpg" alt=""> 4 </div> 5 <div class="fr"> 6 <span>10分鐘前</span> 7 <h6>漸行漸遠(yuǎn)漸無書</h6> 8 <p> 9 你是不是每天腦子里盤踞許多揮之不去的想法覺得自己很忙，仔細(xì)想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習(xí)慣，照顧好自己，追隨自己的夢想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因?yàn)楫?dāng)你改變時，你周圍的一切都改變了，高效能的人有哪些習(xí)慣值得我們學(xué)習(xí)？ 10 </p> 11 </div> 12 </div> 13 <div class="demo2"> 14 <img src="../../images/head02.jpg" alt=""> 15 <div class="fr"> 16 <span>10分鐘前</span> 17 <h6>漸行漸遠(yuǎn)漸無書</h6> 18 <p> 19 你是不是每天腦子里盤踞許多揮之不去的想法覺得自己很忙，仔細(xì)想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習(xí)慣，照顧好自己，追隨自己的夢想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因?yàn)楫?dāng)你改變時，你周圍的一切都改變了，高效能的人有哪些習(xí)慣值得我們學(xué)習(xí)？ 20 </p> 21 </div> 22 </div> 23 <div class="demo3"> 24 <img src="../../images/head02.jpg" alt=""> 25 <span class="time">10分鐘前</span> 26 <h6>漸行漸遠(yuǎn)漸無書</h6> 27 <p> 28 你是不是每天腦子里盤踞許多揮之不去的想法覺得自己很忙，仔細(xì)想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習(xí)慣，照顧好自己，追隨自己的夢想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因?yàn)楫?dāng)你改變時，你周圍的一切都改變了，高效能的人有哪些習(xí)慣值得我們學(xué)習(xí)？ 29 </p> 30 </div> 31 </div>
=>3個不同的demo代表3種不同的頁面結(jié)構(gòu)||書寫頁面結(jié)構(gòu)公共部分展示：
1 /*reset*/ 2 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微軟雅黑", "宋體", "Tahoma"} 3 4 /*公共樣式*/ 5 .demo1,.demo2{ 6 width: 600px; 7 margin-top: 20px; 8 overflow: hidden; 9 margin-bottom: 20px; 10 } 11 p{ 12 text-align: justify; 13 text-indent: 2em; 14 line-height: 24px; 15 }
=>初級制作者css
1 /*初級*/ 2 .demo1{ 3 width: 600px; 4 margin-top: 20px; 5 overflow: hidden; 6 } 7 .demo1 .fl{ 8 width: 100px; 9 float: left; 10 } 11 .demo1 .fl img{ 12 margin-left: 20px; 13 padding: 10px; 14 border: 1px solid #ccc; 15 } 16 .demo1 .fr{ 17 width:488px; 18 float: right; 19 border: 1px solid #ccc; 20 position: relative; 21 padding: 5px; 22 } 23 .demo1 .fr span{ 24 position: absolute; 25 right:18px; 26 top: 5px; 27 }
=>中級制作者css，相較于初級進(jìn)行了結(jié)構(gòu)簡化，去掉了左側(cè)的div，保留了右邊的部分；
1 /*中級*/ 2 .demo2 .fr{ 3 width:488px; 4 float: right; 5 border: 1px solid #ccc; 6 position: relative; 7 padding: 5px; 8 } 9 .demo2 .fr span{ 10 position: absolute; 11 right:18px; 12 top: 5px; 13 } 14 .demo2 img{ 15 margin-left: 20px; 16 padding: 10px; 17 border: 1px solid #ccc; 18 }
=>高級制作者css：先按照結(jié)構(gòu)和語義編寫代碼，然后再進(jìn)行css樣式設(shè)置，減少了css與html的契合度（文檔移動，圖像移出，定位屬性）
1 /*高級*/ 2 .demo3{ 3 border: 1px solid #ccc; 4 width: 488px; 5 margin-left: 100px; 6 padding: 5px; 7 position: relative; 8 } 9 .demo3 img{ 10 float: left; 11 margin:-6px 0 0 -86px; 12 padding: 10px; 13 border: 1px solid #CCCCCC; 14 } 15 .demo3 span{ 16 position: absolute; 17 top: 10px; 18 right: 20px; 19 }
結(jié)論：拿到一張網(wǎng)頁設(shè)計(jì)圖的時候，首先要觀察文字和內(nèi)容模塊之間的關(guān)系，重點(diǎn)放在編寫語義化html代碼上，而不要過多地考慮設(shè)計(jì)間的布局樣式，等到html代碼編輯完成，再考慮如何實(shí)現(xiàn)，力求在不改變現(xiàn)有頁面結(jié)構(gòu)的基礎(chǔ)上完成設(shè)計(jì)圖稿要求呈現(xiàn)的視覺效果!(點(diǎn)擊下載完整網(wǎng)頁簡單布局之結(jié)構(gòu)與表現(xiàn)原則代碼)
聯(lián)系客服
