您現在的位置是:電腦技術吧?>? 組裝維修 ??>??完美的代碼,完美178代碼??>??正文詳情

完美的代碼,完美178代碼

雋英縱2019-11-08 13:11:52 人圍觀
簡介完美后花園代碼如果你是一個網站管理員,你必須希望提高你的網站的可移植性,并且代碼是簡單和干凈的。現在,80%的網站都是用div CSS構建的,也許每個人都會編寫或使用CSS,完美國

如果您是一個站長,一定希望自己網站可移植性增強,并且代碼簡單,潔凈,現在所有的網站,80%都是采用div css來構架的。

  也許大家都會寫,或是使用css,但是很多時候我們也許沒有考慮到,造成了代碼重復。

  今天我們一起來探討一下,怎么寫完美的css代碼。

  一、關于 CSS重置  首先,很認真的告訴你,總是要重置某些分類。

無 論你是使用?Eric?Meyer?Reset、YUI?Reset或者你自己編寫的重置代碼,只要使用就對了。

  它能很簡單的移除所有元素的填充(padding)和邊距(margin):  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都是非常強大的,但是對于我而 言,它們走的太遠了。

我覺得你最終需要重置一切,然后重新定義所有元素的屬性。

這就是為什么Eric?Meyer推薦更有效的使用(重置樣式表),而你不 要只是使用他的重置樣式表,將它拖放到你的項目中。

調整它(的重置樣式表),建立屬于自己的重置樣式表。

  噢,請停止使用:  *?{?margin:?0;?padding:?0;?}  花更多的時間去制作它,當你移除了填充(padding)你認為單選按鈕會發生什么變 化?表單元素有時能夠做些時髦的事情,所以最有效的方式就是將他們獨立。

  二、 CSS屬性的排序  一個小的測試  這個例子就是要讓你思考如何更快的找到右邊距屬性?  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不能更快的找到右邊距屬性。

根據字母排序你的元素屬性。

一致的創建你的CSS,將幫助你節省花費在尋找一個特殊屬性的時間。

  我知道一些人用這樣的方法去組織代碼,其他人又用另一種方法去組織,但是在我的公司, 我們協商一致做出決定,所有的代碼都將按照字母排序來組織。

通過這樣組織代碼與其他人協同工作一定是有幫助的。

當我碰到屬性沒有按照字母排序的層疊樣式表 我每一次都會退縮。

  三、CSS樣式的組織  你應該組織你的樣式表以致相關的內容靠在一起,更簡單的找到想要的。

使用更有效的注 解。

舉個例子,這是我如何構造我的層疊樣式表:  /*****Reset*****/  移除元素的填充(padding)和邊距(margin)。

  /*****Basic?Elements*****/  定義基本元素的樣式:?body,?h1-h6,?ul,?ol,?a,?p,?等.  /*****Generic?Classes*****/  定義簡單的風格,好像浮動的某一側,?移除元素的下邊距,?等當然,它們大部分都與我們希望的語義 不相關,但是它們是高效處理代碼所必須的。

  /*****Basic?Layout*****/  定義基本的模板:?header,?footer等.?幫助定義網頁布局的基本元素  /*****Header*****/  定義所有Hearder元素  /*****Content*****/  定義所有內容框內的元素  /*****Footer*****/  定義所有Footer的元素  /*****Etc*****/  定義其他的選擇器。

通過注解和歸類相似元素的分組,將更快的找到你想要的。

  四、保持一致性  無論你決定使 用什么方式去編寫代碼,保持一致。

我已經對全部放在1行VS多行的CSS編寫編寫方式的爭論感到乏味和疲倦。

這是不需要爭辯的。

每個人都有自己的觀點,所 以選擇一種你喜歡的工作方式,并在所有的樣式表中保持一致。

  就我個人而言,我 采取一行。

  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;?}  所以找到你喜歡的工作方式然后保持一致。

  五、從正確的地方開始  在完成標記語言之前不要去嘗試靠近你的樣式表。

  當我準備分割一張網頁的時候,創建CSS文件之前,我需要預覽并且標記body開標簽到 body的閉合標簽之間的所有文檔。

我不會增加額外的DIV?,ID,或者類選擇器。

我將會添加一些一般的DIV,就好像hearder、 content、footer.因為我知道這些東西是現實存在的。

  通過先標記 文檔,你將不會碰到本已注定的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子選擇器指定子元素;不要只是機械的給元素添加類或者 ID選擇器。

記住:沒有一個良好的格式化文檔(或者標記結構)CSS是無價值的

版權聲明:本文由 雋英縱 整理編輯。

原標題:完美雙機代碼,完美解鎖最新代碼

轉載注明出處:http://www.dn9ww09s.icu/assemble/11575.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 顯示器怎么校準顏色,顯示器顏色校準

    顯示器怎么校準顏色,顯示器顏色校準 相關圖片顯示器最佳顏色設置我相信很多用戶對顯示器的顏色非常敏感。如果有飛蛾,一定很不習慣使用。然后使用顯示器的顏色校正軟件。它可以幫助用戶通過軟件修改屏幕的顏色,而無需使...

  • 中國總設計師是誰,中國總設計師

    中國總設計師是誰,中國總設計師 相關圖片殲15總設計師在魅族論壇里有這樣一個身份證。他叫十一月雨。他的頭就像一張剪影照片11月雨曾在2009-2011年活躍在魅族論壇上。他負責魅族當時推出的第一款也是唯一一款智能手殲2o總...

  • 電腦鍵盤打字錯亂,聯想電腦鍵盤打字錯亂

    電腦鍵盤打字錯亂,聯想電腦鍵盤打字錯亂 相關圖片電腦鍵盤輸入字母錯亂近日,有用戶發現筆記本電腦的鍵盤按鍵突然失靈。鍵盤上的數字和字母放錯地方了。U變成4,我變成5,O變成6,J變成1,K變成2,l變成3,m變成0。使用這些字母,...

  • 常見誤區,有哪些常見的誤區

    常見誤區,有哪些常見的誤區 相關圖片常見的飲食誤區目前,HTML5還處于初稿階段,一些新的標簽元素的解釋經常發生變化,甚至標簽的添加和刪除也很頻繁(比如hgroup)。同時,現有的大型門戶網站沒有很好的例子可以5大...

  • 無線上網卡筆記本,筆記本無線上網卡怎么收費

    無線上網卡筆記本,筆記本無線上網卡怎么收費 相關圖片無線網卡筆記本現代社會已經滿足了人們的基本需求,隨之而來的是人們對質量的要求。無論是衣食住行,還是吃喝玩樂。人們逐漸放棄了衣食住行和上網的基本要求。一些用戶提出了...

  • css浮動代碼,css清除浮動代碼

    css浮動代碼,css清除浮動代碼 相關圖片css 怎么向上浮動對于一個經常使用CSS設計頁面的前端設計師來說,清除浮動似乎是一項基本技能,但是清除浮動的方法和代碼有很多。今天,在許多大型項目上共享一個流行的和采用的...

  • 筆記本雙顯卡切換,筆記本雙顯卡怎么設置

    筆記本雙顯卡切換,筆記本雙顯卡怎么設置 相關圖片筆記本雙顯卡怎么只用獨顯由于CPU集成顯卡的性能有限,無法與獨立顯卡相匹配。此外,當雙顯卡計算機運行某些游戲時,也可能由于兼容性而導致游戲無法安裝或閃回。所以使用筆記...

  • 電腦開機進不去系統,電腦開機進不了系統怎么辦

    電腦開機進不去系統,電腦開機進不了系統怎么辦 相關圖片開機進不去系統隨著互聯網的發展,我們離不開計算機,但是在使用計算機的過程中,我們會遇到一些問題。漸漸地,一些用戶已經掌握了很多電腦故障排除的方法,那么在電腦開機后...

  • 文字豎排,怎么讓文字豎排

    文字豎排,怎么讓文字豎排 相關圖片豎排文字怎么設置有時,我們需要在網頁的某個區域垂直排列、垂直排列和水平排列文本。當然,我們已經習慣了。對于垂直排列,我們暫時找不到主意。哈哈,就跟水平排列一樣簡單...

  • 怎么調屏幕亮度,屏幕亮度調節

    怎么調屏幕亮度,屏幕亮度調節 相關圖片w7怎么調節屏幕亮度很多網友認為電腦顯示器的亮度不是太亮就是太暗。他們想調整屏幕的亮度,但有些用戶找不到調整顯示器亮度的方法。計算機屏幕的亮度也關系到計算機的節能降耗...

熱評文章

  • 電腦老是自動重啟,電腦偶爾自動重啟

    電腦老是自動重啟,電腦偶爾自動重啟 相關圖片電腦關機自動重啟是什么原因如果電腦已經使用了很長時間,一些用戶會遇到這樣的問題。如果他們無緣無故地使用它,他們將藍屏或重新啟動它。此時,用戶可能會感到害怕。如果他...

  • 臺式電腦無線網卡驅動,電腦無線網卡驅動

    臺式電腦無線網卡驅動,電腦無線網卡驅動 相關圖片臺式機網卡驅動在哪里如今網絡越來越普及,人們也開始追求便捷舒適的上網方式,而無線互聯網,沒有了網線的束縛,變得更加自由便捷。要解決桌面計算機無法訪問Internet和無法被計...

  • 新版防控指南,CDS指南

    新版防控指南,CDS指南 相關圖片AHA指南物質運動在物質設計的世界里,動態效用是一種優雅而流動的方式,用來描述空間關系、功能和意圖,為什么動態效果很重要?動態效果可以向我們展示一個應用程序是如何組成...

  • 電腦顯示沒安裝音頻設備,怎么安裝電腦音頻設備

    電腦顯示沒安裝音頻設備,怎么安裝電腦音頻設備 相關圖片提示未安裝音頻設備計算機是一種非常重要的電子設備,也是我們生活和學習的工具之一。但有時用戶在使用電腦時會發現電腦里沒有聲音。當他們點擊電腦下面的揚聲器時,沒有安裝...

  • div左右對齊,div對齊方式

    div左右對齊,div對齊方式 相關圖片css水平居中對齊例如:divdiviv/div/div要在父div中水平對齊子div。如果您在CSS中編寫div{text align:Center;},您可以在ie中瀏覽而不html對齊...

  • 筆記本怎樣用流量上網,筆記本能用流量上網嗎

    筆記本怎樣用流量上網,筆記本能用流量上網嗎 相關圖片筆記本怎么用流量筆記本的出現給我們帶來了極大的便利,但同時也會遇到沒有網絡的尷尬局面。一些用戶不想購買網卡,而那些移動流量較大的用戶不知道在哪里使用,所以他們可以...

  • 網頁設計圖片,圖片設計

    網頁設計圖片,圖片設計 相關圖片折頁設計圖片從人類歷史開始,故事就在我們的交流中發揮了巨大的作用。僅僅因為我們在屏幕上講故事,而不是幾千年前圍坐在篝火旁,故事的吸引力還是一樣的。最有趣的是,故事...

  • 藍屏修復,系統藍屏怎么修復

    藍屏修復,系統藍屏怎么修復 相關圖片經常藍屏怎么辦藍屏的原因是什么?為什么電腦上經常出現藍屏?接下來,我會告訴你電腦藍屏的原因,希望能幫你排除故障,解決問題。電腦藍屏怎么了?電腦一打開,就出現藍屏問...

  • 筆記本處理器性能排行榜,筆記本處理器排行榜

    筆記本處理器性能排行榜,筆記本處理器排行榜 相關圖片十大筆記本電腦排名現在的趨勢是筆記本越來越普及,因為在日常操作和基本業務、娛樂、計算等操作中,筆記本電腦是完全稱職的但我們應該選擇什么品牌呢就性價比而言,宏碁和神...

  • div文字居中對齊,div內文字上下居中

    div文字居中對齊,div內文字上下居中 相關圖片cssdiv文字行居中CSS不依賴于容器的底部來對齊文本布局參數,一個好的方法也更好。即使用position屬性來解決問題。請看下面的代碼,并使用位置的相對和絕對定位函數輕松地在didiv文字...

關注微信

变脸官网查询