網(wǎng)站制作中做門(mén)戶(hù)網(wǎng)站怎樣寫(xiě)CSS才簡(jiǎn)潔規(guī)范呢

2016-11-04    分類(lèi): 網(wǎng)站制作

大型門(mén)戶(hù),海量信息平臺(tái)及多模塊,多區(qū)域化網(wǎng)站,更需要對(duì)CSS,XHTML的標(biāo)準(zhǔn)化,符合語(yǔ)意的HTML框架,復(fù)用性強(qiáng)的CSS代碼,這些才能保障你的網(wǎng)站,具有很好的“地基”。
一部:關(guān)于構(gòu)建CSS框架我們要實(shí)現(xiàn)的目的:
1.實(shí)現(xiàn)標(biāo)準(zhǔn)化,具備主流平臺(tái)適應(yīng)性的前端實(shí)現(xiàn);
2.快速開(kāi)發(fā),在站點(diǎn)風(fēng)格確定后,前端不應(yīng)該成為整個(gè)項(xiàng)目里瓶頸;
3.重構(gòu)的需求,盡可能的讓類(lèi)和區(qū)塊樣式可重用;
4.分離結(jié)構(gòu)和表現(xiàn)的需求,遵守了語(yǔ)義化結(jié)構(gòu)的約定;
5.構(gòu)架完全符合金融網(wǎng)特色的CSS框架。
6.對(duì)代碼進(jìn)行必要的搜索引擎優(yōu)化
第二部:關(guān)于CSS命名的一些約定:
1.不使用大寫(xiě)形式的類(lèi)名和id名;
2.盡可能使用描述性的英文單詞的組合作為類(lèi)名和id名;
3.id名及類(lèi)名的多個(gè)英文單詞之間使用“_”短橫線分隔;
4.按區(qū)域進(jìn)行描述編號(hào) 例:main01_div01_ul01 (可以理解為主體一區(qū)域 一DIV下的一個(gè)UL)
下來(lái)我們要對(duì)整個(gè)網(wǎng)站及設(shè)計(jì)稿進(jìn)行分析,去做符合自己門(mén)戶(hù)結(jié)構(gòu)特色的CSS框架。我們以新浪網(wǎng)為例子進(jìn)行站點(diǎn)結(jié)構(gòu)分析,整個(gè)頁(yè)面分為:首頁(yè),更多頁(yè),內(nèi)容頁(yè),專(zhuān)題頁(yè),數(shù)據(jù)中心,新聞中心,頻道頁(yè),廣告……
我們對(duì)這些頁(yè)面進(jìn)行整理,去發(fā)現(xiàn)他們的公共部分:CSS的樣式,及區(qū)域,模塊的碎片。我們需要做的是把這些公有的部分提出來(lái),我們可以把CSS分以下幾類(lèi):
主體樣式表:sjweb.css
font(字體樣式,字號(hào),顏色的集合)
layout(框架結(jié)構(gòu) 集合)
global(全局默認(rèn)樣式集合)
component(組成頁(yè)面部分樣式表,模塊碎片集合)
這些講統(tǒng)統(tǒng)的被import到sjweb.css主體樣式表里,主體樣式表做為一個(gè)loader加載新的外來(lái)樣式,比如廣告樣式表。
這樣這些頁(yè)面只需要寫(xiě)一點(diǎn)點(diǎn) 屬于自己特殊要求的CSS樣式代碼就可以了。
在構(gòu)建這個(gè)CSS框架的時(shí)候有很多細(xì)節(jié)的東西好能統(tǒng)一化,比如:行間距,模塊之間間隔距離等。
規(guī)則:
1.所有area之間,模塊之間,間距上下左右為:8 Pixel ;
2.新聞列表顏色#333 ;
3.新聞列表行間距20 pixel;

……等等

分享題目:網(wǎng)站制作中做門(mén)戶(hù)網(wǎng)站怎樣寫(xiě)CSS才簡(jiǎn)潔規(guī)范呢
文章來(lái)源:http://www.bm7419.com/news11/60061.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站制作

廣告

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

成都做網(wǎng)站