在线看片电视剧免费看,精品国产一区二区三区2021,99久久久无码国产精品免费,精品人妻少妇嫩草AV无码专区

    電話(huà)

    0411-39943997

仟億科技
客服中心
  • 電話(huà)
  • 電話(huà)咨詢(xún):0411-39943997
  • 手機
  • 手機咨詢(xún):15840979770
    手機咨詢(xún):13889672791
網(wǎng)絡(luò )營(yíng)銷(xiāo) >更多

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

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

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

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

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

  它能很簡(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都是非常強大地,但是對于我而言,它們走地太遠了。我覺(jué)地你最終需求重置一切,然后重新定義所有元素地屬性。這就是為什么Eric Meyer推薦更有效地使用(重置樣式表),而你不要只是使用他地重置樣式表,要它拖放到你地項目中。調整它(地重置樣式表),建立屬于自己地重置樣式表。

  噢,請停止使用:

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

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

二、CSS屬性地排序

  一個(gè)小地測試
  這個(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不能更快地找到右邊距屬性。根據字母排序你地元素屬性。一致地創(chuàng )建你地CSS,要幫助你節省花費在尋找一個(gè)特殊屬性地時(shí)間。

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

三、CSS樣式地組織

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

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

四、保持一致性

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

  就我個(gè)人而言,我要使用兩者結合地方式。如果一個(gè)選擇器超過(guò)了3個(gè)屬性,我要截斷它采用多行地方式編寫(xiě)。

 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; } 

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

五、從正確地地方開(kāi)始

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

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

  通過(guò)先標記文件,你要不會(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子選擇器指定子元素;不要只是機械地給元素添加類(lèi)或者ID選擇器。記?。簺](méi)有一個(gè)良好地格式化文件(或者標記結構)CSS是無(wú)價(jià)值地。
  



分享到:


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

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

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

成在线人免费视频| 小婕子伦流澡到高潮H| 国产成人艳妇AA视频在线| 国产精品久久久久久久9999| 国产精品午夜无码AV体验区| 亚洲AV永久无码精品蜜芽|