?

做前端也有幾年時間了，不敢說能把他看地多透，但是多多少少還是有些自己的東西。下面以 Tudou.com 的首頁為例，總結總結。

就制作而言，我將一張頁面分為四層：框架、布局、模塊、列表和數據塊。

一、框架

頁面的框架基本上都是：“頭”、“主體”、“尾”。但是對于一些頁面如Tudou.com，由于布局的需要，還應在“頭”的下面還要加個“菜單”。

二、布局（以下用#ID表示頁面元素）

#Head和#Foot里的就不說了，具體查看演示頁面源碼。

布局說的是將#Main里的內容分成幾大塊。我們看Tudou.com，#Main里典型的左右結構，我們用#Layout_1，#Layout_2表示。如圖

三、模塊

布局#Layout_1，#Layout_2里的塊就是模塊了，

按我的理解，模塊至少要有一個ID，Class則要視頁面設計，給需要重用的加上。

關于模塊的ID名稱，要取個有意義的名字，當然偷懶的可以用#Col_1，#Col_2，。。。

模塊的Class名稱用.cols_1，.cols_2，。。。

模塊內部的如下圖

四、列表和數據塊

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

按我的理解，頁面上的信息其實就是不同類型的列表。我們應將典型的列表方式提取出來，放在公用樣式里（public.css）。

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

.list-v 垂直列表方式 (圖片和文字成垂直排列)

.list-h 水平列表方式 (圖片和文字成水平排列)

.list-t 文字列表方式

數據塊其實是微格式的一個變相應用，給不同的數據元素定義固定的結構。

Tudou.com 需要定義的數據塊有：

.mVideo (視頻)

.mList (豆單)

.mUser (用戶)

比如 .mVideo 應該是這樣的：

<div class=“mVideo”>
??? <div class=“p”><a href=“” title=“”><img src=“” alt=“阿聯又掛彩 有望首發戰公牛” /></a></div>
??? <div class=“d”>
??????? <div class=“d_name”><a href=“” title=“”>阿聯又掛彩 有望首發戰公牛</a></div>
??????? <div class=“d_user”><a href=“” title=“”>阿聯又掛彩 有望首發戰公牛</a></div>
??????? <div class=“d_length”>06:88</div>
??????? <div class=“d_time”>發布時間：<span>2007-10-08 14:31</span></div>
??????? <div class=“d_intro”>阿聯又掛彩阿聯又掛彩阿聯又掛彩</div>
??????? <div class=“d_honor”>榮譽：<span><img src=“” alt=“&#199;&#191;” /></span></div>
??????? <div class=“d_view”>人氣：<span>222</span></div>
??????? <div class=“d_comment”>評論：<span>323</span></div>
??????? <div class=“d_favorite”>收藏：<span>32</span></div>
??????? <div class=“d_type”>類型：<span><a href=“” title=“”>&#181;&#231;&#211;°</a><a href=“” title=“”>&#181;&#231;&#202;&#211;&#190;&#231;</a></span></div>
??????? <div class=“d_tag”>標簽：<span><a href=“” title=“”>Twins</a><a href=“” title=“”>&#209;&#221;&#179;&#170;&#187;á</a></span></div>
??????? <div class=“d_subject”>專題：<span><a href=“” title=“”>±&#172;&#193;&#207;</a></span></div>
??? </div>
</div>

最后，附上關鍵字表，就是一些用于公共定義的ID和Class名稱。
ID

#B-* // Body用

#Head, #Main, #Foot //布局用ID

#Message // 系統消息用

#Logo, #Toolbar, #Search, #Menu // Head內元素

#Layout_*, #Group_*, #Col_* // Main內元素

#Links, #CopyRight // Foot內元素

#B* // 廣告位，與class=”b”結合使用

#Plugin // Banner用

Class

.txt, .btn, .label_checkbox, .label_input, .handle // 表單內元素

.meat // 模塊主體元素

.list_*(.list_v, .list_h, .list-t, .list_top, …) // 列表元素，詳見“列表”

.m // 更多，可延伸至“絕對定位于右上角”的元素

.s1, .s2, … // 用于子單元塊需各自定義樣式的元素，如菜單、排行榜等

.s // 特殊元素，如果一個元素相對于兄弟節點特殊，則用之

.b // 廣告位

.p, .d, .d_*, .h // 數據塊內元素，分別為圖片、詳細、詳細內元素、操作

.handle // 操作元素

.m_*(.mVideo, .mComment, .mUser, .mSubject, …) // 數據塊元素

.*_fix // *元素的補丁元素

.current // 當前元素

?

轉載于:https://www.cnblogs.com/Top1/archive/2009/08/27/1555255.html

總結

以上是生活随笔為你收集整理的【Top1】Tudou.com首页网页设计的制作方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。