【移動應用開發(fā)技術(shù)】網(wǎng)頁布局之結(jié)構(gòu)與表現(xiàn)原則的示例分析

【移動應用開發(fā)技術(shù)】網(wǎng)頁布局之結(jié)構(gòu)與表現(xiàn)原則的示例分析

這篇文章主要介紹了網(wǎng)頁布局之結(jié)構(gòu)與表現(xiàn)原則的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。結(jié)構(gòu)與表現(xiàn)相關(guān)內(nèi)容簡介html結(jié)構(gòu)css表現(xiàn)javascrip行為網(wǎng)頁布局要考慮到結(jié)構(gòu)，表現(xiàn)，行為分離原則，首先重點放在結(jié)構(gòu)和語義化上面，再考慮CSS，JS等，便于后期維護和分析……結(jié)構(gòu)與表現(xiàn)相分離的思想初級的開發(fā)人員思路及制作方法：div層層嵌套；中級的開發(fā)人員思路及制造方法：去掉多余的div,進行簡化；高級的開發(fā)人員思路及制造方法：最大化的簡化html的結(jié)構(gòu)，然后用css進行設置，減少html與css的契合度。步驟：先按結(jié)構(gòu)和語義編寫代碼然后進行css樣式設置減少HTML與CSS契合度overflow:visible默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。hidden內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。scroll內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。auto如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。inherit規(guī)定應該從父元素繼承overflow屬性的值。text-indent文本縮進到目標位置，可以不要給文本再另外套標簽。減少冗余代碼拿到一個網(wǎng)頁設計圖的時候，首先關(guān)注網(wǎng)頁的文字內(nèi)容以及內(nèi)容模塊間的關(guān)系。把重點放在編寫語義化的html代碼上，而不要過多考慮設計圖上的樣式，等到html按內(nèi)容編寫完成之后，再考慮樣式的實現(xiàn)。在不改變現(xiàn)有結(jié)構(gòu)的基礎上，完成設計圖要求的視覺效果margin可以是負值，通過負值，可以使該內(nèi)容進行移動！實現(xiàn)四個方向的移動。在結(jié)構(gòu)（HTML）和樣式（css）中，可以先把內(nèi)容通過HTML寫出來，再利用margin移動位置，實現(xiàn)排版，降低樣式和結(jié)構(gòu)的耦合，并且減少代碼

網(wǎng)頁換膚及總結(jié)盡量減少html對css的依賴網(wǎng)頁換膚：相同的html結(jié)構(gòu)，不同的css樣式

下面是一些灰牛WEB同學的分享

一開始我們接觸網(wǎng)頁制作的時候，就了解到html代表結(jié)構(gòu)、css代表樣式、javascript代表行為，網(wǎng)頁制作中，我們一直強調(diào)結(jié)構(gòu)與表現(xiàn)相分離的原則，這里面的結(jié)構(gòu)一般指HTML，此外分離是說把它們寫在不同的文件加以引用嗎？當然不是，在這里的學習中了解到，分離不單是一種方法更是一種思想，簡而言之，一個平面二維坐標，其中x軸代表技術(shù)發(fā)展，y軸代表網(wǎng)頁制作需求，分離就是根據(jù)根據(jù)技術(shù)發(fā)展和我們的網(wǎng)頁制作需求完成的！舉例：比方說我們蓋房子，html就相當房子的結(jié)構(gòu)，css相當于后期的裝修，網(wǎng)頁都是基于一張效果來完成的，在我們?yōu)g覽網(wǎng)頁的時候，根據(jù)效果圖不同，樣式不同，所以我們?yōu)g覽的頁面是五花八門的，那么我們?nèi)绾蝸聿季趾镁W(wǎng)頁？首先不要考慮過多的css樣式，盡量讓我們的html結(jié)構(gòu)合理簡潔和語義化，然后再添加完善css樣式！當我們拿到頁面時，不同的制作者對結(jié)構(gòu)結(jié)構(gòu)樣式有不同的鏈接，根據(jù)這個結(jié)構(gòu)樣式了解深度的不同，暫定劃分為：初級、中級、高級三個不同的層次；比方說這樣一個常見的對話框，有3個單元，首先我們需要完成一個單元，另外的進行CTRL+V；如果是初級制作者拿到頁面后，一般按照上面的方框進行劃分，一個大的div里面包含2個小的div，左右浮動，左側(cè)放img，右側(cè)放p,h等標簽，至于時間因子通過position屬性定位實現(xiàn),那下面就用代碼說明下

<div

class="demo1">

<div

class="fl">

<img

src="../../images/head02.jpg"

alt="">

</div>

<div

class="fr">

<span>10分鐘前</span>

<h7>漸行漸遠漸無書</h7>

<p>

你是不是每天腦子里盤踞許多揮之不去的想法覺得自己很忙，仔細想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習慣，照顧好自己，追隨自己的夢想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因為當你改變時，你周圍的一切都改變了，高效能的人有哪些習慣值得我們學習？

</p>

</div>

</div>

<div

class="demo2">

<img

src="../../images/head02.jpg"

alt="">

<div

class="fr">

<span>10分鐘前</span>

<h7>漸行漸遠漸無書</h7>

<p>

你是不是每天腦子里盤踞許多揮之不去的想法覺得自己很忙，仔細想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習慣，照顧好自己，追隨自己的夢想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因為當你改變時，你周圍的一切都改變了，高效能的人有哪些習慣值得我們學習？

</p>

</div>

</div>

<div

class="demo3">

<img

src="../../images/head02.jpg"

alt="">

<span

class="time">10分鐘前</span>

<h7>漸行漸遠漸無書</h7>

<p>

你是不是每天腦子里盤踞許多揮之不去的想法覺得自己很忙，仔細想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習慣，照顧好自己，追隨自己的夢想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因為當你改變時，你周圍的一切都改變了，高效能的人有哪些習慣值得我們學習？

</p>

</div>

</div>=>3個不同的demo代表3種不同的頁面結(jié)構(gòu)||書寫頁面結(jié)構(gòu)公共部分展示：/*reset*/

body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:

0;padding:

0;list-style:

none;font:12px/1.5

"Arial",

"sans-serif",

"微軟雅黑",

"宋體",

"Tahoma"}

/*公共樣式*/

.demo1,.demo2{

width:

600px;

margin-top:

20px;

overflow:

hidden;

margin-bottom:

20px;

}

p{

text-align:

justify;

text-indent:

2em;

line-height:

24px;

}=>初級制作者css/*初級*/

.demo1{

width:

600px;

margin-top:

20px;

overflow:

hidden;

}

.demo1

.fl{

width:

100px;

float:

left;

}

.demo1

.fl

img{

margin-left:

20px;

padding:

10px;

border:

1px

solid

#ccc;

}

.demo1

.fr{

width:488px;

float:

right;

border:

1px

solid

#ccc;

position:

relative;

padding:

5px;

}

.demo1

.fr

span{

position:

absolute;

right:18px;

top:

5px;

}

=>中級制作者css，相較于初級進行了結(jié)構(gòu)簡化，去掉了左側(cè)的div，保留了右邊的部分；/*中級*/

.demo2

.fr{

width:488px;

float:

right;

border:

1px

solid

#ccc;

position:

relative;

padding:

5px;

}

.demo2

.fr

span{

position:

absolute;

right:18px;

top:

5px;

}

.demo2

img{

margin-left:

20px;

padding:

10px;

border:

1px

solid

#ccc;

}

=>高級制作者css：先按照結(jié)構(gòu)和語義編寫代碼，然后再進行css樣式設置，減少了css與html的契合度（文檔移動，圖像移出，定位屬性）/*高級*/

.demo3{

border:

1px

solid

#ccc;

width:

488px;

margin-left:

100px;

padding:

5px;

position:

relative;

}

.demo3

img{

float:

left;

margin:-6px

0

0

-86px;

padding:

10px;

border:

1px

solid

#