首頁 > web前端 > css教學 > 主體

門戶網站建構CSS框架的規則_經驗交流

WBOY
發布: 2016-05-16 12:04:29
原創
1665 人瀏覽過

第一部:關於建構CSS框架我們要實現的目的:

1. 實現標準化,具備主流平台適應性的前端實現;
2.快速開發,在站點風格確定後,前端不應該成為整個項目裡瓶頸;
3.重構的需求,盡可能的讓類別和區塊樣式可重複使用;
4. 分離結構和表現的需求,遵守了語義化結構的約定;
5.架構完全符合金融網特色的CSS框架。
6.對程式碼進行必要的搜尋引擎優化。

第二部:關於CSS命名的一些約定:

1.不使用大寫形式的類別名稱和id名;
2.盡可能使用描述性的英文單字的組合作為類別名稱和id名;
3.id名及類別名稱的多個英文單字之間使用「_」短橫線分隔;
4.按區域進行描述編號例:main01_div01_ul01 (可以理解為主體第一區域第一DIV下的第一個UL)

下來我們要對整個網站及設計稿進行分析,去做符合自己門戶結構特色的CSS架構

我們已新浪網 為例子:

進行站點結構分析:

整頁分為:首頁,更多頁,內容頁,專題頁,資料中心,新聞中心,頻道頁,廣告…

我們將這些頁面整理,去發現他們的公共部分,這些被發現的地方有:CSS的樣式,及區域,模組的碎片,我們需要做的是把這些公有的部分提出來。

觀察後我們可以把CSS分成以下幾類:

主體樣式表:sjweb.css
font(字體樣式,字號,顏色的集合)
layout(框架結構集合)
global(全域預設樣式集合)
component(組成頁面部分樣式表,模組碎片集合)
這些講統的被import到sjweb.css主體樣式表裡, 主體樣式表做為一個loader 加載新的外來樣式,
例如廣告樣式表。
這樣這些頁面只需要寫一點點 屬於自己特殊要求的CSS樣式程式碼就可以了。

在建構這個CSS框架的時候有很多細節的東西最好能統一化,例如:行間距,模組之間間隔距離等。

下面是某門戶網站的首頁結構圖:

A> 

規則:
1.所有area之間,模組之間,間距上下左右為:8 Pixel ;
2.新聞列表顏色#333 ;
3.新聞列表行間距20 pixel;
…等等

調整環境:IE7,ff,IE6,IE5.x,Opera。

PS:其實更多是你在建造的時候細節上的問題,好了不多說了。呵呵

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板