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

來源:互聯網
上載者:User
客齊集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解析與開發經驗_經驗交流的內容,更多相關內容請關注topic.alibabacloud.com(www.php.cn)!

  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.