門(mén)戶(hù)網(wǎng)站怎樣寫(xiě)CSS

申請(qǐng)免費(fèi)試用、咨詢(xún)電話：400-8352-114

    門(mén)戶(hù)網(wǎng)站的信息多模塊也多，因此對(duì)CSS的寫(xiě)法應(yīng)更加規(guī)范化，以便為網(wǎng)站打好基礎(chǔ)。這篇文章就由景德鎮(zhèn)網(wǎng)站建設(shè)公司分享門(mén)戶(hù)網(wǎng)站怎樣寫(xiě)CSS。

一、關(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。