客齐集OEM的CSS解析与开发经验(客齐是什么意思)

客齐集OEM的CSS解析 这个OEM是客齐集推出来的，如果你有一个域名，那么你就可以定制自已的网站了。由于是要让站工自已定制，所以开放了HTML以及CSS、JS等代码。但默认的CSS是CSS是不能改的。 在写这个CSS时，我尽量用最少的标签，这样很站对CSS不是很熟的站长也可以定制。另外布局时和写CSS时，总的思想的就是从大的到小，从小到细。 这个布局和CSS是一次写成的，没有更改过，所以有一些地主还是可以优化的，这样的代码也不是最优的。但是，这样的布局的CSS是可以让站长定义成各式各样的。一会我给大家看一些例子。 以下是这个CSS的解析，很合适于初学者看。 程序代码 @charset "utf-8"; /*定义全局,在这定义了全局中的标签*/ * {margin:0px;padding:0px;} /* 在这里定义了全局的文字大小为PX,行高%;这样的行高看起来眼睛不会太累。 在这里，我把宋体放在了Verdana字体的后边，是为了中页面中的数字和英文能以英文字体显示，这样会漂亮一些；有些人不加宋体，但这样会有问题的，最起码我的测试结果是这样的。 另外，我加了背景色，是因为在某些操作系统下的某些浏览器中，如果要不加背景，那么他的背景就会是其它的色。 我在这里还定义了整体文字色。没有用黑色是为了让眼睛舒服一些； 最重要的一些为是加了textalign；这个是让BODY中的内容全是居中，与里边一个大的DIV块合用，就可以实在如果页面内容是定宽的，那么在IE和FIREFOX等浏览器中内容总在网页的中间，主要是为了解决IE和FIREFOX中的差别，这里把文字弄成居中，然后我们再在BODY中加一个大的DIV块，把这个DIV的块写成文字左对齐， */ body{ font-size:px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center; background:#FFF; color:#;} /* 这里定义了全局的文字链接样式，我用了简写的形式，样式是和客齐集主站是一样的 */ a:link,a:visited{color:#; text-decoration: underline;} a:hover,a:active{color:#;text-decoration: none;background-color: #FED;} /* 由于布局中将会用到很多的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:px; overflow:hidden;} /* INFO这里又加了一个宽为百分百的DIV块，加他是为了让有些站长可以把布局定制成全屏的，右边定宽，左边自动适用而加的。并是解决一行两列的的前题基础。 这里我加了FLOAT，是为了“以毒攻毒”就是用浮动来解决浮动。因为右边也要加浮动； */ #info{ width:%; float:left; } /* 这里是导航条 用BODER来加上边的绿色 */ #nav{width:%; text-align:center; border-top:5px solid #5DBA; background:#FAFAFA; line-height:2.2} /* 这里用了绝对定位，因为一共有三个以上的页面要用这个，很有可能他会受其它内容的影响，所以就定义为绝对定位，这样基本上不会受到影响。 bykijiji的图片位置 */ #bykijiji{position: absolute; margin-left:px; margin-top:-px;} /* 主体大块*/ #main{text-align:left;margin:0 auto;} /*底部大块*/ #footer{border-top:1px solid #CDCDCD; padding:px 0; clear:both; text-align:center;margin:0 auto;} /*头部大块*/ #header{ clear:both} /* 这里定义了HEADER区标题文字的大小。色彩等。主要是为了让站长直接加文字LOGO就可以了。 标题*/ #header h2{ font-size:px; margin-top:0px; font-weight:bold; color:#} /* 以下LEFT和RIGHT是完成一行两列布局为。我在LEFT外边加了一个INFO。是为什么让定制更灵活一些，可以实现页面适度自动适应。 左边大块 这里的LEFT距右边PX，由于他外边有一个百分之百的DIV。所以，这样就给右边一列留下了的宽度。就样LEFT就可以自适应了。 */ #left{ margin-right:px;color:#; font-size:px;} /*这个是LEFT里边的一个最大的DIV。这个是为是解决不同版本浏览器对PADDING的解释和计算的方法的不同*/ #leftbox{ padding:px; font-size:px;} /*右边大块 由于他前边的INFO的宽已经是百分百了，而里边的LEFT又给他留了一个PX的空子。所以让他距左边负的PX就正好和LEFT挨上了。在这里写了PX，是和左边大块离开5PX；这样看上去更舒服。 这里我定义了宽是PX；再加上PADDING左右的各5PX；是PX； 为了安全，我少写一个像素。 */ #right{ margin-left:-px; float:left; width:px; padding:5px;background:#F7F7F7; margin-top:px;} /* 这是搜索那一条，没有什么好说的。 搜索那一条*/ #search{ padding:0 0 px 0; text-align:left} /*定义标题文字大小*/ h1{ font-size:px;} /* 在这里，定议了 公用的三个CSS，他们都是布局中常用的。分别为水平换行，左浮动和右浮动 这样命名很简单，而且字符最短，这样论在CSS文件中，还是页面中，最能作到代码尽量少。 */ .c{clear:both; height:0px; overflow:hidden;} .l{ float:left;} .r{ float:right;} /*这里定义了一个文字大小，由于上边定义的很多都是PX；可能或一定会有部分地方要用小字的，所以提前写在这里。*/ .f{ font-size:px;} /*这义SMALL的文字大小。*/ small{font-size:px;color:#;font-weight: normal; padding-left:5px;} .h_hr{ height:1px; overflow:hidden; margin:px 5px; background:#CDCDCD;} /*++++++++++++++++++++++++++++++++++++++++++++++++++