這篇文章主要介紹了網(wǎng)頁(yè)布局之結(jié)構(gòu)與表現(xiàn)原則的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

公司主營(yíng)業(yè)務(wù)：網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出南譙免費(fèi)做網(wǎng)站回饋大家。

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

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í)的開(kāi)發(fā)人員思路及制作方法：div層層嵌套；

2. 中級(jí)的開(kāi)發(fā)人員思路及制造方法：去掉多余的div,進(jìn)行簡(jiǎn)化；

3. 高級(jí)的開(kāi)發(fā)人員思路及制造方法：最大化的簡(jiǎn)化html的結(jié)構(gòu)，然后用css進(jìn)行設(shè)置，減少html與css的契合度。
   步驟：
   先按結(jié)構(gòu)和語(yǔ)義編寫(xiě)代碼
   然后進(jìn)行css樣式設(shè)置
   減少HTML與CSS契合度

overflow:
visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。
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)放在編寫(xiě)語(yǔ)義化的html代碼上，而不要過(guò)多考慮設(shè)計(jì)圖上的樣式，
等到html按內(nèi)容編寫(xiě)完成之后，再考慮樣式的實(shí)現(xiàn)。
在不改變現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上，完成設(shè)計(jì)圖要求的視覺(jué)效果
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寫(xiě)出來(lái)，再利用margin移動(dòng)位置，實(shí)現(xiàn)排版，降低樣式和結(jié)構(gòu)的耦合，并且減少代碼
 

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

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

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

下面是一些灰牛WEB同學(xué)的分享 

一開(kāi)始我們接觸網(wǎng)頁(yè)制作的時(shí)候，就了解到html代表結(jié)構(gòu)、css代表樣式、javascript代表行為，網(wǎng)頁(yè)制作中，我們一直強(qiáng)調(diào)結(jié)構(gòu)與表現(xiàn)相分離的原則，這里面的結(jié)構(gòu)一般指HTML，此外分離是說(shuō)把它們寫(xiě)在不同的文件加以引用嗎？當(dāng)然不是，在這里的學(xué)習(xí)中了解到，分離不單是一種方法更是一種思想，簡(jiǎn)而言之，一個(gè)平面二維坐標(biāo)，其中x軸代表技術(shù)發(fā)展，y軸代表網(wǎng)頁(yè)制作需求，分離就是根據(jù)根據(jù)技術(shù)發(fā)展和我們的網(wǎng)頁(yè)制作需求完成的！

舉例：比方說(shuō)我們蓋房子，html就相當(dāng)房子的結(jié)構(gòu)，css相當(dāng)于后期的裝修，網(wǎng)頁(yè)都是基于一張效果來(lái)完成的，在我們?yōu)g覽網(wǎng)頁(yè)的時(shí)候，根據(jù)效果圖不同，樣式不同，所以我們?yōu)g覽的頁(yè)面是五花八門(mén)的，那么我們?nèi)绾蝸?lái)布局好網(wǎng)頁(yè)？首先不要考慮過(guò)多的css樣式，盡量讓我們的html結(jié)構(gòu)合理簡(jiǎn)潔和語(yǔ)義化，然后再添加完善css樣式！

當(dāng)我們拿到頁(yè)面時(shí)，不同的制作者對(duì)結(jié)構(gòu)結(jié)構(gòu)樣式有不同的鏈接，根據(jù)這個(gè)結(jié)構(gòu)樣式了解深度的不同，暫定劃分為：初級(jí)、中級(jí)、高級(jí)三個(gè)不同的層次；

比方說(shuō)這樣一個(gè)常見(jiàn)的對(duì)話(huà)框，有3個(gè)單元，首先我們需要完成一個(gè)單元，另外的進(jìn)行CTRL+V；如果是初級(jí)制作者拿到頁(yè)面后，一般按照上面的方框進(jìn)行劃分，一個(gè)大的div里面包含2個(gè)小的div，左右浮動(dòng)，左側(cè)放img，右側(cè)放p,h等標(biāo)簽，至于時(shí)間因子通過(guò) position屬性定位實(shí)現(xiàn),那下面就用代碼說(shuō)明下 

<div class="demo1">
            <div class="fl">
                <img src="../../images/head02.jpg" alt="">
            </div>
            <div class="fr">
                <span>10分鐘前</span>
                <h7>漸行漸遠(yuǎn)漸無(wú)書(shū)</h7>
                <p>
                你是不是每天腦子里盤(pán)踞許多揮之不去的想法覺(jué)得自己很忙，仔細(xì)想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習(xí)慣，照顧好自己，追隨自己的夢(mèng)想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因?yàn)楫?dāng)你改變時(shí)，你周?chē)囊磺卸几淖兞?，高效能的人有哪些?xí)慣值得我們學(xué)習(xí)？    
                </p>
            </div>
        </div>
        <div class="demo2">
                <img src="../../images/head02.jpg" alt="">
            <div class="fr">
                <span>10分鐘前</span>
                <h7>漸行漸遠(yuǎn)漸無(wú)書(shū)</h7>
                <p>
                你是不是每天腦子里盤(pán)踞許多揮之不去的想法覺(jué)得自己很忙，仔細(xì)想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習(xí)慣，照顧好自己，追隨自己的夢(mèng)想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因?yàn)楫?dāng)你改變時(shí)，你周?chē)囊磺卸几淖兞?，高效能的人有哪些?xí)慣值得我們學(xué)習(xí)？    
                </p>
            </div>
        </div>
        <div class="demo3">
                <img src="../../images/head02.jpg" alt="">
                <span class="time">10分鐘前</span>
                <h7>漸行漸遠(yuǎn)漸無(wú)書(shū)</h7>
                <p>
                你是不是每天腦子里盤(pán)踞許多揮之不去的想法覺(jué)得自己很忙，仔細(xì)想想又不知道自己真正地在忙些什么，而養(yǎng)成良好的習(xí)慣，照顧好自己，追隨自己的夢(mèng)想，才能提高生產(chǎn)力，這也意味著改善你與家人和朋友的關(guān)系，因?yàn)楫?dāng)你改變時(shí)，你周?chē)囊磺卸几淖兞?，高效能的人有哪些?xí)慣值得我們學(xué)習(xí)？    
                </p>
            </div>
        </div>

=>3個(gè)不同的demo代表3種不同的頁(yè)面結(jié)構(gòu)||書(shū)寫(xiě)頁(yè)面結(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;
        }

=>初級(jí)制作者css

/*初級(jí)*/
        .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;
        }

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

/*中級(jí)*/
        .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;
        }

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

/*高級(jí)*/
        .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 #CCCCCC;
        }
        .demo3 span{
            position: absolute;
            top: 10px;
            right: 20px;
        }

結(jié)論：拿到一張網(wǎng)頁(yè)設(shè)計(jì)圖的時(shí)候，首先要觀(guān)察文字和內(nèi)容模塊之間的關(guān)系，重點(diǎn)放在編寫(xiě)語(yǔ)義化html代碼上，而不要過(guò)多地考慮設(shè)計(jì)間的布局樣式，等到html代碼編輯完成，再考慮如何實(shí)現(xiàn)，力求在不改變現(xiàn)有頁(yè)面結(jié)構(gòu)的基礎(chǔ)上完成設(shè)計(jì)圖稿要求呈現(xiàn)的視覺(jué)效果!

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“網(wǎng)頁(yè)布局之結(jié)構(gòu)與表現(xiàn)原則的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章標(biāo)題：網(wǎng)頁(yè)布局之結(jié)構(gòu)與表現(xiàn)原則的示例分析
本文路徑：http://aaarwkj.com/article14/psosde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、定制開(kāi)發(fā)、虛擬主機(jī)、做網(wǎng)站、商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)