客齊集OEM的CSS解析與開發經驗_經驗交流

客齊集oem的css解析
這個oem是客齊集推出來的，如果你有一個域名，那麼你就可以定制自已的網站了。由於是要讓站工自已定制，所以開放了html以及css、js等代碼。但預設的css是css是不能改的。
寫這個css時，我盡量用最少的標籤，這樣很站對css不是很熟的站長也可以定制。另外佈局時和寫css時，總的思想的就是從大的到小，從小到細。
這個佈局和css是一次寫成的，沒有更改過，所以有一些地主還是可以優化的，這樣的程式碼也不是最優的。但是，這樣的佈局的css是可以讓站長定義成各式各樣的。一會我給大家看一些例子。
以下是這個css的解析，很適合初學者看。
 程式碼

@charset "utf-8"; 
/*定义全局,在这定义了全局中的标签*/ 
 * {margin:0px;padding:0px;} 
 /*

 在這裡定義了全域的文字大小為12px,行高180%;這樣的行高看起來眼睛不會太累。
 在這裡，我把宋體放在了verdana字體的後邊，是為了中頁面中的數字和英文能以英文字體顯示，這樣會漂亮一些；有些人不加宋體，但這樣會有問題的，最起碼我的測試結果是這樣的。
 另外，我加了背景色，是因為在某些作業系統下的某些瀏覽器中，如果要不加背景，那麼他的背景就會是其它的色。
 我在這裡還定義了整體文字色。沒有用黑色是為了讓眼睛舒服一點；
 最重要的一些為是加了textalign；這個是讓body中的內容全是居中，與裡邊一個大的div塊合用，就可以實在如果頁面內容是定寬的，那麼在ie和firefox等瀏覽器中內容總在網頁的中間，主要是為了解決ie和firefox中的差別，這裡把文字弄成居中，然後我們再在body中加一個大的div塊，把這個div的塊寫成文字左對齊，

 */ 
 body{ font-size:12px; line-height:1.8; font-family:verdana, "宋体", arial,sans; text-align:center;
  background:#fff; color:#666;} 
 /*

 這裡定義了全局的文字鏈接樣式，我用了簡寫的形式，樣式是和客齊集主站是一樣的
 

*/ 
 a:link,a:visited{color:#000099; text-decoration: underline;} 
 a:hover,a:active{color:#000;text-decoration: none;background-color: #fed762;} 
 /*

 由於佈局中將會用到很多的ul和li，而ul和li本身的樣式並不好看，所以在這裡我們去除列表小點以及邊距等

 */ 
 ul,li{ list-style:none;} 
 /*

 這裡定義圖片的邊框為0，這裡全域定義一下。後邊有加邊框的，另外再加，主要的想法還是從大到小。

 */ 
 img{ border:0;}   
 /*

 這個是就包在body裡的最大也是最外邊的一個div塊，有了就可以控制整個網頁內容的寬度了。與body合用，就可以實現自動居中了。定義整個網站的寬度和水平居中
 1、這裡定義了文字全部為左對齊。
 2、用margin來實現在firefox中居中。
 3、用overflow是擔心有些人定義的內容會太寬而影響了版面。所以縵出就自動隱藏了；

 */ 
 #wrapper{ text-align:left;margin:0 auto; width:1000px; overflow:hidden;} 
 /*

 info這裡又加了一個寬為百分百的div塊，加他是為了讓有些站長可以把佈局定製成全屏的，右邊定寬，左邊自動適用而加的。並是解一行兩列的前題基礎。
 這裡我加了float，是為了「以毒攻毒」就是用浮動來解決浮動。因為右邊也要加浮；

 */ 
 #info{ width:100%; float:left; } 
 /*

 這裡是導航條
 用boder來加上邊的綠色
 

*/ 
 #nav{width:100%; text-align:center; border-top:5px solid #5db30a; background:#fafafa; line-height:2.2} 
 /*

 這裡用了絕對定位，因為一共有三個以上的頁面要用這個，很有可能他會受其它內容的影響，所以就定義為絕對定位，這樣基本上不會受到影響。
 bykijiji的圖片位置
 

*/ 
 #bykijiji{position: absolute; margin-left:550px; margin-top:-20px;}  
 /* 
 主体大块*/ 
 #main{text-align:left;margin:0 auto;} 
 /*底部大块*/ 
 #footer{border-top:1px solid #cdcdcd; padding:10px 0; clear:both; text-align:center;margin:0 auto;} 
 /*头部大块*/ 
 #header{  clear:both} 
 /*

 這裡定義了header區標題文字的大小。色彩等。主要是為了讓站長直接加文字logo就可以了。
 

标题*/ 
 #header h2{ font-size:35px; margin-top:0px; font-weight:bold; color:#404040} 
 /*

 以下left和right是完成一行兩列佈局為。我在left外邊加了一個info。是為什麼讓客製化更靈活一些，可以實現頁面適度自動適應。
 左邊大塊
 這裡的left距右邊305px，由於他外邊有一個百分之百的div。所以，這樣就給右邊一列留下了305的寬度。就樣left就可以自適應了。

 */ 
 #left{ margin-right:305px;color:#000; font-size:14px;} 
 /*

這個是left裡邊的一個最大的div。這個是為是解決不同版本瀏覽器對padding的解釋和計算的方法的不同*/
 

#leftbox{ padding:10px; font-size:14px;} 
 /*右边大块

 由於他前邊的info的寬已經是百分百了，而裡邊的left又留了一個305px的空子給他。所以讓他距左邊負的305px就剛好和left挨上了。這裡寫了300px，是和左邊大塊離開5px；這樣看起來比較舒服。
 這裡我定義了寬是289px；再加上padding左右的各5px；是299px； 為了安全，我少寫一個像素。

 */ 
 #right{  margin-left:-300px; float:left; width:289px; padding:5px;background:#f7f7f7; margin-top:24px;} 
 /*

 這是搜尋那一條，沒有什麼好說的。
 搜尋那條

*/ 
 #search{ padding:0 0 10px 0; text-align:left} 
 /*定义标题文字大小*/ 
 h1{ font-size:16px;} 
 /*

 在這裡，定議了
 公用的三個css，他們都是佈局中常用的。分別為水平換行，左浮動和右浮動
 這樣命名很簡單，而且字元最短，這樣論在css檔案中，還是頁面中，最能作到程式碼盡量少。
 

*/ 
 .c{clear:both; height:0px; overflow:hidden;} 
 .l{ float:left;} 
 .r{ float:right;} 
 /*这里定义了一个文字大小，由于上边定义的很多都是12px；可能或一定会有部分地方要用小字的，所以提前写在这里。*/ 
 .f12{ font-size:12px;} 
 /*这义small的文字大小。*/ 
 small{font-size:12px;color:#999;font-weight: normal; padding-left:5px;} 
 .h_hr{ height:1px; overflow:hidden; margin:10px 5px; background:#cdcdcd;} 
/*++++++++++++++++++++++++++++++++++++++++++++++++++

以上是定義的全域。然後在下邊又分別對首頁，list頁面，以及單一資訊的頁面作了單獨的css；
可以看出，用了上邊的基礎，下邊單頁css寫起就方便多了。而且只要很少的程式碼就可以了。可能首頁的程式碼會多一些；
下邊的這些就不一一說明了。很簡單的東西。

*/  
/*单个页面部分*/ 
 .imgbox{ text-align:center; width:200px;} 
 .imgbox img{ border:4px solid #CCC; display:block; margin:0 auto; } 
 .navbox{border-left:4px solid #f5f5f5; margin:5px 0 10px 0; padding-left:8px; } 
/*LIST页面部分*/ 
 #listnav{ background:#f7f7f7; line-height:2.0; padding-left:10px; border-bottom:1px solid #D4D4D4;} 
 .listbox{ color:#666;width:590px;font-size:12px;border-bottom: 1px dashed #CCC;} 
 /*绿色的时间*/ 
 .listbox p{color: #008000;} 
 /*大标题*/ 
 #leftbox h2{font-size:14px; margin-top:10px;} 
 #leftbox span{ margin-left:10px;} 
/*首页页面部分*/ 
 #h_center_l{ width:66%; border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD; float:left;
 margin-top:10px;} 
 #h_center_lbox{width:49%; border-right:1px solid #CDCDCD; float:left;} 
 #h_center_lboxb{width:50%;  float:right;} 
 #h_center_r{width:33%; float:right;margin-top:10px;} 
 #h_center_l h1,#h_center_r h1{ padding-left:5px; font-size:14px;} 
 #h_center_l ul,#h_center_r ul{ padding-left:19px; font-size:12px;} 
 #qcity{clear:both; margin-bottom:20px; margin-top:10px;} 
 #qcity li{ display:inline; padding-left:10px;} 
 #qcity h3{ font-size:14px; color:#000} 
 #links { border-top: 1px solid #CCC; margin-top: 15px; } 
/*广告块部分*/ 
#leftbottomad{ background:#FFFFCC; margin-left:10px; display:none} 
#pfm{padding:20px;  font-size:12px;} 
/*CSS完*/

說一說我個人在寫佈局和css的一點感受吧！說明，只是個人的感受！
1、了解用戶群，如果你的用戶是白領都是學生。那你沒有必要去考慮ie5以下的版本。那樣你會累死的。
2、一行三列或一行二列自動適應，這個例子就可以了，他在ie6，ie7，firefox等的效果都是一樣的。沒有必要有一堆程式碼去寫一個自動適應。
3、版面最難的就是布表了。表單中的元素太多了，很難控制，特別是要適應很多瀏覽器。這個是更難了。如果將來我遇到表單，如果不是非常簡單的，那麼我一定用表格，我想信，複雜的表單用表格去佈局，程式碼一定會小於那個人家常說的div css。而且有表格布這東西，維護特別的容易。
4、在css設計的時間，總的來說，是標籤從大到小來定義，佈局從大塊到小塊。標籤不一定會用到很多。
5、有些人認為不要給那些div或區塊加上什麼id； 我認為，加id是正確的，如果id中有不同的標籤，那麼透過css來控制就在容易了。有時我們會認為一些同樣的色彩應該寫在一個class裡。然後哪裡用到那我們就在哪裡調，如果變色，一改這個class就全變了。但是，我想問，如果不全變呢，就只變一塊，你怎麼辦。還去改佈局嗎？ 如果是這樣，那麼結構和表現分開又有什麼意義呢。
6、我們布大局可能會很簡單，就像蓋房子，大的樣子幾天就起來。但細細裝潢就麻煩了，又苦又累。我們常常分成了一個像素，節省一行程式碼而浪費大量的時間在上邊，我感覺時間還是要花的，但是要有一個度。
7、佈局時，我們也許把佈局和css都弄的很nb。但同事一時半會看不懂為什麼要這樣寫，這樣多人開發就很難了。你寫的東西可能只有你能改。這樣就麻煩了。所以，我們一定要佈局寫的很nb。適應用點表格也是可以節省程式碼的。而且都能看懂。

以上就是客齊集oem的css解析與開發經驗_經驗交流的內容，更多相關內容請關注php中文網（www.php.cn）！