做前端也有幾年時(shí)間了，不敢說(shuō)能把他看地多透，但是多多少少還是有些自己的東西。就制作而言，我將一張頁(yè)面分為四層：框架、布局、模塊、列表和數(shù)據(jù)塊。

一、框架

頁(yè)面的框架基本上都是：“頭”、“主體”、“尾”。但是對(duì)于一 些頁(yè)面如Tudou.com，由于布局的需要，還應(yīng)在“頭”的下面還要加個(gè)“菜單”。 二、布局（以下用#ID表示頁(yè)面元素）

#Head和#Foot里的就不說(shuō)了，具體查看演示頁(yè)面源碼。

布局說(shuō)的是將#Main里的內(nèi)容分成幾大塊。我們看 Tudou.com，#Main里典型的左右結(jié)構(gòu)，我們用#Layout_1，#Layout_2表示。

三、模塊

布局#Layout_1，#Layout_2里的塊就是模塊了，按我的理 解，模塊至少要有一個(gè)ID，Class則要視頁(yè)面設(shè)計(jì)，給需要重用的加上。關(guān)于模塊的ID名稱(chēng)，要取個(gè)有意義的名字，當(dāng)然偷懶的可以 用#Col_1，#Col_2，。。。模塊的Class名稱(chēng)用.cols_1，.cols_2，。。。

四、列表和數(shù)據(jù)塊

模塊的主體是由列表組成的，而列表里則包含數(shù)據(jù)塊。

按我的理解， 頁(yè)面上的信息其實(shí)就是不同類(lèi)型的列表。我們應(yīng)將典型的列表方式提取出來(lái)，放在公用樣式里（public.css）。

以Tudou.com為 例，需要定義到public.css里的列表至少要有以下三種：

1. .list-v 垂直列表方式 (圖片和文字成垂直排列) 2. .list-h 水平列表方式 (圖片和文字成水平排列) 3. .list-t 文字列表方式 數(shù)據(jù)塊其實(shí)是微格式的一個(gè)變相應(yīng)用， 給不同的數(shù)據(jù)元素定義固定的結(jié)構(gòu)。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前標(biāo)題：框架、布局、模塊、列表和數(shù)據(jù)塊
網(wǎng)站URL：http://www.rwnh.cn/news3/309903.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化、定制開(kāi)發(fā)、App設(shè)計(jì)、靜態(tài)網(wǎng)站

廣告

聲明：本網(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)