Keqiji OEM의 CSS 분석 및 개발 경험_경험 교류

Keqiji OEM의 CSS 분석
Keqiji에서 출시한 OEM입니다. 도메인 이름이 있으면 웹사이트를 맞춤 설정할 수 있습니다. 웹마스터가 직접 커스터마이징할 수 있는 부분이므로 HTML, CSS, JS 등의 코드가 오픈됩니다. 그러나 기본 CSS는 CSS이므로 변경할 수 없습니다.
이 CSS를 작성할 때 CSS에 익숙하지 않은 웹마스터도 맞춤 설정할 수 있도록 최소한의 태그를 사용하려고 노력했습니다. 또한 CSS를 레이아웃하고 작성할 때 일반적인 아이디어는 큰 것에서 작은 것으로, 작은 것에서 작은 것으로 이동하는 것입니다.
이 레이아웃과 CSS는 한 번 작성되었으며 변경되지 않았으므로 일부 집주인은 여전히 ​​​​최적화할 수 있으며 이러한 코드는 최적이 아닙니다. 그러나 이러한 레이아웃의 CSS는 웹마스터가 다양한 방식으로 정의할 수 있습니다. 잠시 후에 몇 가지 예를 보여드리겠습니다.
다음은 이 CSS에 대한 분석으로, 초보자에게 매우 적합합니다.
프로그램 코드

@charset "utf-8"; 
/*定义全局,在这定义了全局中的标签*/ 
 * {margin:0px;padding:0px;} 
 /*

여기에서는 전역 텍스트 크기가 12PX로 정의되어 있으며 줄 높이는 180%입니다. 이러한 줄 높이는 눈에 너무 피곤하지 않습니다.
여기서는 페이지의 숫자와 영어가 영어 글꼴로 표시될 수 있도록 Verdana 글꼴 뒤에 Song 글꼴을 넣었는데, Song 글꼴을 추가하지 않는 분들도 계시겠지만, 이렇게 하면 문제가 발생합니다. 적어도 내 테스트 결과는 그랬다.
또한 특정 운영 체제의 일부 브라우저에서는 배경을 추가하지 않으면 배경이 다른 색상으로 표시되기 때문에 배경색을 추가했습니다.
여기서는 전체 텍스트 색상도 정의합니다. 검은색을 사용하지 않는 이유는 눈을 더 편안하게 하기 위해서입니다.
가장 중요한 것은 텍스트 정렬을 추가하는 것입니다. 이는 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;} 
 /*

전역 텍스트 링크 스타일은 다음과 같습니다. 여기서는 축약형을 사용했습니다. 스타일은 Keqiji 메인 사이트와 동일합니다

*/ 
 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는 일부 웹마스터가 레이아웃을 전체 화면으로 맞춤 설정할 수 있도록 너비가 100%인 DIV 블록을 추가했습니다. 오른쪽은 너비가 고정되어 있고 왼쪽은 자동으로 적용됩니다. 그리고 1행 2열의 전제문제를 풀기 위한 기초가 됩니다.
여기에 FLOAT를 추가한 것은 "불로 불을 싸우다", 즉 float를 사용하여 float의 문제를 해결하기 위함입니다. 오른쪽에도 플로트가 필요하기 때문입니다.

 */ 
 #info{ width:100%; float:left; } 
 /*

탐색 모음은 다음과 같습니다.
BODER를 사용하여 측면에 녹색을 추가합니다.

*/ 
 #nav{width:100%; text-align:center; border-top:5px solid #5DB30A; background:#FAFAFA; line-height:2.2} 
 /*

여기서는 절대 위치 지정을 사용하는데, 이를 사용하는 페이지가 3개 이상이므로 다른 컨텐츠에 의해 영향을 받을 가능성이 매우 높기 때문에 기본적으로 영향을 받지 않도록 절대 위치 지정으로 정의합니다.
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 영역의 제목 텍스트 크기를 정의합니다. 색상 등 주된 이유는 웹마스터가 직접 로고 텍스트를 추가할 수 있도록 하기 위함입니다.

标题*/ 
 #header h2{ font-size:35px; margin-top:0px; font-weight:bold; color:#404040} 
 /*

다음 LEFT와 RIGHT를 입력하면 행 1개와 열 2개 레이아웃이 완성됩니다. LEFT 외부에 INFO를 추가했습니다. 이것이 페이지가 자동으로 적절하게 조정될 수 있도록 사용자 정의가 더욱 유연해진 이유입니다.
왼쪽의 큰 블록
여기서 LEFT는 오른쪽에서 305PX 떨어져 있습니다. 바깥쪽에 100% DIV가 있기 때문입니다. 따라서 오른쪽 열의 너비는 305로 남습니다. 이런 식으로 LEFT는 적응성이 있을 수 있습니다.

 */ 
 #left{ margin-right:305px;color:#000; font-size:14px;} 
 /*

LEFT에서 가장 큰 DIV입니다. 브라우저 버전별로 PADDING의 해석 및 계산 방식 차이를 해결하기 위한 것입니다*/

#leftbox{ padding:10px; font-size:14px;} 
 /*右边大块

앞의 INFO 너비는 이미 100%이고 안쪽 너비는 LEFT는 그에게 또 다른 305PX 구멍을 남겼습니다. 따라서 왼쪽에서 음의 305PX가 LEFT 바로 옆에 있습니다. 여기에는 왼쪽 블록에서 5PX 떨어진 300PX를 썼습니다. 이것이 더 편안해 보입니다.
여기서는 너비를 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）！