遮天,雪鹰领主

主頁(yè) > 知識(shí)庫(kù) > 客齊集OEM的CSS解析與開(kāi)發(fā)經(jīng)驗(yàn)

客齊集OEM的CSS解析與開(kāi)發(fā)經(jīng)驗(yàn)

客齊集OEM的CSS解析
這個(gè)OEM是客齊集推出來(lái)的，如果你有一個(gè)域名，那么你就可以定制自已的網(wǎng)站了。由于是要讓站工自已定制，所以開(kāi)放了HTML以及CSS、JS等代碼。但默認(rèn)的CSS是CSS是不能改的。
在寫(xiě)這個(gè)CSS時(shí)，我盡量用最少的標(biāo)簽，這樣很站對(duì)CSS不是很熟的站長(zhǎng)也可以定制。另外布局時(shí)和寫(xiě)CSS時(shí)，總的思想的就是從大的到小，從小到細(xì)。
這個(gè)布局和CSS是一次寫(xiě)成的，沒(méi)有更改過(guò)，所以有一些地主還是可以優(yōu)化的，這樣的代碼也不是最優(yōu)的。但是，這樣的布局的CSS是可以讓站長(zhǎng)定義成各式各樣的。一會(huì)我給大家看一些例子。
以下是這個(gè)CSS的解析，很合適于初學(xué)者看。
程序代碼
@charset "utf-8";
/*定義全局,在這定義了全局中的標(biāo)簽*/
* {margin:0px;padding:0px;}
/*
在這里定義了全局的文字大小為12PX,行高180%;這樣的行高看起來(lái)眼睛不會(huì)太累。
在這里，我把宋體放在了Verdana字體的后邊，是為了中頁(yè)面中的數(shù)字和英文能以英文字體顯示，這樣會(huì)漂亮一些；有些人不加宋體，但這樣會(huì)有問(wèn)題的，最起碼我的測(cè)試結(jié)果是這樣的。
另外，我加了背景色，是因?yàn)樵谀承┎僮飨到y(tǒng)下的某些瀏覽器中，如果要不加背景，那么他的背景就會(huì)是其它的色。
我在這里還定義了整體文字色。沒(méi)有用黑色是為了讓眼睛舒服一些；
最重要的一些為是加了textalign；這個(gè)是讓BODY中的內(nèi)容全是居中，與里邊一個(gè)大的DIV塊合用，就可以實(shí)在如果頁(yè)面內(nèi)容是定寬的，那么在IE和FIREFOX等瀏覽器中內(nèi)容總在網(wǎng)頁(yè)的中間，主要是為了解決IE和FIREFOX中的差別，這里把文字弄成居中，然后我們?cè)僭贐ODY中加一個(gè)大的DIV塊，把這個(gè)DIV的塊寫(xiě)成文字左對(duì)齊，
*/
body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋體", Arial,Sans; text-align:center; background:#FFF; color:#666;}
/*
這里定義了全局的文字鏈接樣式，我用了簡(jiǎn)寫(xiě)的形式，樣式是和客齊集主站是一樣的
*/
a:link,a:visited{color:#000099; text-decoration: underline;}
a:hover,a:active{color:#000;text-decoration: none;background-color: #FED762;}
/*
由于布局中將會(huì)用到很多的UL和LI，而UL和LI本身的樣式并不好看，所以在這里我們?nèi)コ斜硇↑c(diǎn)以及邊距等
*/
ul,li{ list-style:none;}
/*
這里定義圖片的邊?？?yàn)?，這里全局定義一下。后邊有加邊框的，另外再加，主要的思想還是從大到小。
*/
img{ border:0;}
/*
這個(gè)是就包在BODY里的最大也是最外邊的一個(gè)DIV塊，有了就可以控制整個(gè)網(wǎng)頁(yè)內(nèi)容的寬度了。與BODY合用，就可以實(shí)現(xiàn)自動(dòng)居中了。定義整個(gè)網(wǎng)站的寬度和水平居中
1、這里定義了文字全部為左對(duì)齊。
2、用MARGIN來(lái)實(shí)現(xiàn)在FIREFOX中居中。
3、用OVERFLOW是擔(dān)心有些人定義的內(nèi)容會(huì)太寬而影響了布局。所以縊出就自動(dòng)隱藏了；
*/
#wrapper{ text-align:left;margin:0 auto; width:1000px; overflow:hidden;}
/*
INFO這里又加了一個(gè)寬為百分百的DIV塊，加他是為了讓有些站長(zhǎng)可以把布局定制成全屏的，右邊定寬，左邊自動(dòng)適用而加的。并是解決一行兩列的的前題基礎(chǔ)。
這里我加了FLOAT，是為了“以毒攻毒”就是用浮動(dòng)來(lái)解決浮動(dòng)。因?yàn)橛疫呉惨痈?dòng)；
*/
#info{ width:100%; float:left; }
/*
這里是導(dǎo)航條
用BODER來(lái)加上邊的綠色
*/
#nav{width:100%; text-align:center; border-top:5px solid #5DB30A; background:#FAFAFA; line-height:2.2}
/*
這里用了絕對(duì)定位，因?yàn)橐还灿腥齻€(gè)以上的頁(yè)面要用這個(gè)，很有可能他會(huì)受其它內(nèi)容的影響，所以就定義為絕對(duì)定位，這樣基本上不會(huì)受到影響。
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區(qū)標(biāo)題文字的大小。色彩等。主要是為了讓站長(zhǎng)直接加文字LOGO就可以了。
標(biāo)題*/
#header h2{ font-size:35px; margin-top:0px; font-weight:bold; color:#404040}
/*
以下LEFT和RIGHT是完成一行兩列布局為。我在LEFT外邊加了一個(gè)INFO。是為什么讓定制更靈活一些，可以實(shí)現(xiàn)頁(yè)面適度自動(dòng)適應(yīng)。
左邊大塊
這里的LEFT距右邊305PX，由于他外邊有一個(gè)百分之百的DIV。所以，這樣就給右邊一列留下了305的寬度。就樣LEFT就可以自適應(yīng)了。
*/
#left{ margin-right:305px;color:#000; font-size:14px;}
/*這個(gè)是LEFT里邊的一個(gè)最大的DIV。這個(gè)是為是解決不同版本瀏覽器對(duì)PADDING的解釋和計(jì)算的方法的不同*/
#leftbox{ padding:10px; font-size:14px;}
/*右邊大塊
由于他前邊的INFO的寬已經(jīng)是百分百了，而里邊的LEFT又給他留了一個(gè)305PX的空子。所以讓他距左邊負(fù)的305PX就正好和LEFT挨上了。在這里寫(xiě)了300PX，是和左邊大塊離開(kāi)5PX；這樣看上去更舒服。
這里我定義了寬是289PX；再加上PADDING左右的各5PX；是299PX；為了安全，我少寫(xiě)一個(gè)像素。
*/
#right{  margin-left:-300px; float:left; width:289px; padding:5px;background:#F7F7F7; margin-top:24px;}
/*
這是搜索那一條，沒(méi)有什么好說(shuō)的。
搜索那一條*/
#search{ padding:0 0 10px 0; text-align:left}
/*定義標(biāo)題文字大小*/
h1{ font-size:16px;}
/*
在這里，定議了
公用的三個(gè)CSS，他們都是布局中常用的。分別為水平換行，左浮動(dòng)和右浮動(dòng)
這樣命名很簡(jiǎn)單，而且字符最短，這樣論在CSS文件中，還是頁(yè)面中，最能作到代碼盡量少。
*/
.c{clear:both; height:0px; overflow:hidden;}
.l{ float:left;}
.r{ float:right;}
/*這里定義了一個(gè)文字大小，由于上邊定義的很多都是12PX；可能或一定會(huì)有部分地方要用小字的，所以提前寫(xiě)在這里。*/
.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;}
/*++++++++++++++++++++++++++++++++++++++++++++++++++
以上就是定義的全局。然后在下邊又分別對(duì)首頁(yè)，LIST頁(yè)面，以及單個(gè)信息的頁(yè)面作了單獨(dú)的CSS；
可以看出，用了上邊的基礎(chǔ)，下邊單個(gè)頁(yè)面CSS寫(xiě)起就方便多了。而且只要很少的代碼就可以了?？赡苁醉?yè)的代碼會(huì)多一些；
下邊的這些就不一一說(shuō)明了。很簡(jiǎn)單的東西。
*/
/*單個(gè)頁(yè)面部分*/
.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頁(yè)面部分*/
#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;}
/*綠色的時(shí)間*/
.listbox p{color: #008000;}
/*大標(biāo)題*/
#leftbox h2{font-size:14px; margin-top:10px;}
#leftbox span{ margin-left:10px;}
/*首頁(yè)頁(yè)面部分*/
#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完*/
說(shuō)一說(shuō)我個(gè)人在寫(xiě)布局和CSS的一點(diǎn)感受吧！說(shuō)明，只是個(gè)人的感受！
1、了解用戶群，如果你的用戶是白領(lǐng)都是學(xué)生。那么你沒(méi)有必要去考慮IE5以下的版本。那樣你會(huì)累死的。
2、一行三列或一行二列自動(dòng)適應(yīng)，這個(gè)例子就可以了，他在IE6，IE7，F(xiàn)IREFOX等的效果都是一樣的。沒(méi)有必要有一堆代碼去寫(xiě)一個(gè)自動(dòng)適應(yīng)。
3、布局最難的就是布表單了。表單中的元素太多了，很難控制，特別是要適應(yīng)很多瀏覽器。這個(gè)是更難了。如果將來(lái)我遇到表單，如果不是非常簡(jiǎn)單的，那么我一定用表格，我想信，復(fù)雜的表單用表格去布局，代碼一定會(huì)小于那個(gè)人家常說(shuō)的DIV+CSS。而且有表格布這東西，維護(hù)特別的容易。
4、在CSS設(shè)計(jì)的時(shí)間，總的來(lái)說(shuō)，是標(biāo)簽從大到小來(lái)定義，布局從大塊到小塊。標(biāo)簽不一定用到很多。
5、有些人認(rèn)為不要給那些DIV或塊加上什么ID；我認(rèn)為，加ID是正確的，如果ID中有不同的標(biāo)簽，那么通過(guò)CSS來(lái)控制就在容易了。有時(shí)我們會(huì)認(rèn)為一些同樣的色彩應(yīng)該寫(xiě)在一個(gè)CLASS里。然后哪里用到那么我們就在哪里調(diào)，如果變色，一改這個(gè)CLASS就全變了。但是，我想問(wèn)，如果不全變呢，只變一塊，你怎么辦。還去改布局嗎？如果是這樣，那么結(jié)構(gòu)和表現(xiàn)分開(kāi)又有什么意義呢。
6、我們布大局可能會(huì)很簡(jiǎn)單，就像蓋房子，大的樣子幾天就起來(lái)。但細(xì)細(xì)裝修就麻煩了，又苦又累。我們常常分為了一個(gè)像素，節(jié)省一行代碼而浪費(fèi)大量的時(shí)間在上邊，我感覺(jué)時(shí)間還是要花的，但是要有一個(gè)度。
7、布局時(shí)，我們也許把布局和CSS都弄的很NB。但同事一時(shí)半會(huì)看不懂你為什么要這樣寫(xiě)，這樣多人開(kāi)發(fā)就很難了。你寫(xiě)的東西可能只有你能改。這樣就麻煩了。所以，我們一定非要布局寫(xiě)的很NB。適應(yīng)用點(diǎn)表格也是可以節(jié)省代碼的。而且都能看懂。

標(biāo)簽：遼源海東東莞陽(yáng)泉南充喀什濱州邯鄲

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《客齊集OEM的CSS解析與開(kāi)發(fā)經(jīng)驗(yàn)》，本文關(guān)鍵詞客,齊集,OEM,的,CSS,解析,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。

濮阳杆衣贸易有限公司

客齊集OEM的CSS解析與開(kāi)發(fā)經(jīng)驗(yàn)