客齊集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;}