土豆網前端概況(4)_網頁設計教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
推薦:新聞門戶之導航易用性排名NO.1網易http://www.163.com/網易是目前所見到的最便于查看的導航。導航內容按分類排列,又以該類別最受關注的頻道作為分類標題,這樣就避免了個別頻道沒有
B、 盒狀(box)模型結構
盒裝模型是建立在頁面布局的基礎上,承載內容和數據的最直接頁面基礎結構,主要分為容器、標題、內容、底部三個部分。
一個典型的盒裝模型效果分為側欄效果和主欄效果兩種風格,統一的HTML結構,通過CSS來控制樣式上顯示的不同,這一部分在樣式層主要討論。
在首頁以及少量非凡頁面上,會有額外的風格,但是依然以盒狀模型為基礎。
解析如下:
HTML片段如下:
C、包裝(pack)模型
對于站內存在的視頻、豆單、播客、小組、話題討論等等,都有既定的統一表現風格,因此在盒裝模型以外,單獨設立了面向這些常用內容的模型結構,因為是打包處理,所以稱之為包裝模型。
包裝模型基本風格一致,但是在各處的顯示略有不同,同時還會涉及在個人主頁上自定義樣式等,是需要符合全站出處可用的封裝模型。
常見的有:
包裝模型最重要的變化來自于樣式層的處理,其結構本身很簡單,就不做解析了,以下是一個視頻包的HTML片段范例:
分享:給“用戶體驗”降溫近兩年,“用戶體驗”這個詞成了時髦,很多設計師和公司產品宣傳,都打出“用戶體驗”的牌,甚至天天把用戶體驗掛嘴邊。動不懂就大講用戶體驗設計,炒概念,它
相關網頁設計教程:
- 相關鏈接:
- 教程說明:
網頁設計教程-土豆網前端概況(4)
。




