国内自拍在线,久久久夜色精品,欧美日韩一区三区,国产黄a三级三级三级看三级男男,aaa一级片,久久久久久久久一区二区三区,中文一区在线

    電話

    0411-39943997

仟億科技
客服中心
  • 電話
  • 電話咨詢:0411-39943997
  • 手機(jī)
  • 手機(jī)咨詢:15840979770
    手機(jī)咨詢:13889672791
網(wǎng)絡(luò)營(yíng)銷 >更多
您現(xiàn)在的位置:首頁(yè) > 新聞中心 > 常見問題

網(wǎng)頁(yè)設(shè)計(jì)如何寫出完美CSS代碼

作者:billionnet 發(fā)布于:2012/3/5 19:13:17 點(diǎn)擊量:

  每個(gè)人都可能編寫CSS代碼,甚至你現(xiàn)在已經(jīng)讓它為你地項(xiàng)目工作了。我們?cè)谥幸惨恢迸c大家討論,學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)CSS編碼與CSS技巧。但是CSS還可能更好嗎?開始用這5個(gè)Tips改進(jìn)你地CSS吧!

一、關(guān)于CSS重置

  首先,很認(rèn)真地告訴你,總是要重置某些分類。無論你是使用 Eric Meyer Reset、YUI Reset或者你自己編寫地重置代碼,只要使用就對(duì)了。

  它能很簡(jiǎn)單地移除所有元素地填充(padding)和邊距(margin):

 Example Source Code [www.]
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

  Eric Meyer Reset和YUI Reset都是非常強(qiáng)大地,但是對(duì)于我而言,它們走地太遠(yuǎn)了。我覺地你最終需求重置一切,然后重新定義所有元素地屬性。這就是為什么Eric Meyer推薦更有效地使用(重置樣式表),而你不要只是使用他地重置樣式表,要它拖放到你地項(xiàng)目中。調(diào)整它(地重置樣式表),建立屬于自己地重置樣式表。

  噢,請(qǐng)停止使用:

 Example Source Code [www.]
* { margin: 0; padding: 0; }

  花更多地時(shí)間去制作它,當(dāng)你移除了填充(padding)你認(rèn)為單選按鈕會(huì)發(fā)生什么變化?表單元素有時(shí)能夠做些時(shí)髦地事情,所以最有效地方式就是要他們獨(dú)立。

二、CSS屬性地排序

  一個(gè)小地測(cè)試
  這個(gè)例子就是要讓你思考如何更快地找到右邊距屬性?

 Example Source Code [www.]
Example#1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
Example#2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

  你不能告訴我Example#2不能更快地找到右邊距屬性。根據(jù)字母排序你地元素屬性。一致地創(chuàng)建你地CSS,要幫助你節(jié)省花費(fèi)在尋找一個(gè)特殊屬性地時(shí)間。

  我知道一些人用這樣地方法去組織代碼,其他人又用另一種方法去組織,但是在我地公司,我們協(xié)商一致做出決定,所有地代碼都要按照字母排序來組織。通過這樣組織代碼與其他人協(xié)同工作一定是有幫助地。當(dāng)我碰到屬性沒有按照字母排序地層疊樣式表我每一次都會(huì)退縮。

三、CSS樣式地組織

  你應(yīng)該組織你地樣式表以致相關(guān)地內(nèi)容靠在一起,更簡(jiǎn)單地找到想要地。使用更有效地注解。舉個(gè)例子,這是我如何構(gòu)造我地層疊樣式表:

 Example Source Code [www.]
/*****Reset*****/
移除元素地填充(padding)和邊距(margin)。
/*****Basic Elements*****/
定義基本元素地樣式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/
定義簡(jiǎn)單地風(fēng)格,好像浮動(dòng)地某一側(cè), 移除元素地下邊距, 等當(dāng)然,它們大部分都與我們希望地語(yǔ)義不相關(guān),但是它們是高效處置代碼所必須地。
/*****Basic Layout*****/
定義基本地模板: header, footer等. 幫助定義網(wǎng)頁(yè)布局地基本元素
/*****Header*****/
定義所有Hearder元素
/*****Content*****/
定義所有內(nèi)容框內(nèi)地元素
/*****Footer*****/
定義所有Footer地元素
/*****Etc*****/
定義其他地選擇器。通過注解和歸類相似元素地分組,要更快地找到你想要地。

四、保持一致性

  無論你決定使用什么方式去編寫代碼,保持一致。我已經(jīng)對(duì)全部放在1行VS多行地CSS編寫編寫方式地爭(zhēng)論感到乏味和疲倦。這是不需求爭(zhēng)辯地。每個(gè)人都有自己地觀點(diǎn),所以選擇一種你喜歡地工作方式,并在所有地樣式表中保持一致。

  就我個(gè)人而言,我要使用兩者結(jié)合地方式。如果一個(gè)選擇器超過了3個(gè)屬性,我要截?cái)嗨捎枚嘈械胤绞骄帉憽?/p>

 Example Source Code [www.]
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; } 

  所以找到你喜歡地工作方式然后保持一致。

五、從正確地地方開始

  在完成標(biāo)記語(yǔ)句之前不要去嘗試靠近你地樣式表。

  當(dāng)我準(zhǔn)備分割一張網(wǎng)頁(yè)地時(shí)候,創(chuàng)建CSS文件之前,我需求預(yù)覽并且標(biāo)記body開標(biāo)簽到body地閉合標(biāo)簽之間地所有文件。我不會(huì)增加額外地DIV ,ID,或者類選擇器。我要會(huì)添加一些一般地DIV,就好像hearder、content、footer.因?yàn)槲抑肋@些東西是現(xiàn)實(shí)存在地。

  通過先標(biāo)記文件,你要不會(huì)碰到本已注定地divities1和classitis2麻煩!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未譯)。

  利用CSS子選擇器指定子元素;不要只是機(jī)械地給元素添加類或者ID選擇器。記住:沒有一個(gè)良好地格式化文件(或者標(biāo)記結(jié)構(gòu))CSS是無價(jià)值地。
  



分享到:


Copyright@ 2011-2016 版權(quán)所有:大連千億科技有限公司 遼ICP備11013762-3號(hào)   google網(wǎng)站地圖   百度網(wǎng)站地圖   網(wǎng)站地圖

公司地址:大連市沙河口區(qū)中山路692號(hào)辰熙星海國(guó)際2317 客服電話:0411-39943997 QQ:2088827823 37482752

法律聲明:未經(jīng)許可,任何模仿本站模板、轉(zhuǎn)載本站內(nèi)容等行為者,本站保留追究其法律責(zé)任的權(quán)利! 隱私權(quán)政策聲明