登录  /  注册
首页 > web前端 > css教程 > 正文

客齐集OEM的CSS解析与开发经验_经验交流

PHP中文网
发布: 2016-05-16 12:08:12
原创
1208人浏览过

客齐集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)!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号