CSS-Analyse und Entwicklungserfahrung von Keqiji OEM_Erfahrungsaustausch

CSS-Analyse von Keqiji OEM
Dieser OEM wird von Keqiji gestartet. Wenn Sie einen Domainnamen haben, können Sie Ihre eigene Website anpassen. Da es Sache des Webmasters ist, es selbst anzupassen, werden HTML, CSS, JS und andere Codes geöffnet. Aber das Standard-CSS ist CSS und kann nicht geändert werden.
Beim Schreiben dieses CSS habe ich versucht, die wenigsten Tags zu verwenden, damit auch Webmaster, die mit CSS nicht sehr vertraut sind, es anpassen können. Darüber hinaus besteht die allgemeine Idee beim Entwerfen und Schreiben von CSS darin, vom Großen zum Kleinen und vom Kleinen zum Kleinen zu wechseln.
Dieses Layout und CSS wurden einmal geschrieben und nicht geändert, sodass einige Vermieter es noch optimieren können und ein solcher Code nicht optimal ist. Allerdings kann das CSS eines solchen Layouts von Webmastern auf verschiedene Weise definiert werden. Ich zeige Ihnen gleich einige Beispiele.
Das Folgende ist die Analyse dieses CSS, das sehr gut für Anfänger geeignet ist.
Programmcode

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

Die globale Textgröße ist hier als 12PX definiert und die Zeilenhöhe beträgt 180 %; eine solche Zeilenhöhe ist für die Augen nicht zu ermüdend.
Hier habe ich die Song-Schriftart hinter die Verdana-Schriftart eingefügt, damit die Zahlen und das Englische auf der Seite in englischen Schriftarten angezeigt werden können, was schöner ist. Einige Leute fügen keine Song-Schriftart hinzu, aber das wird zu Problemen führen. Zumindest haben das meine Testergebnisse gezeigt.
Darüber hinaus habe ich eine Hintergrundfarbe hinzugefügt, da in einigen Browsern unter bestimmten Betriebssystemen der Hintergrund eine andere Farbe hat, wenn Sie keinen Hintergrund hinzufügen.
Hier definiere ich auch die Gesamttextfarbe. Der Grund für die Verwendung von Schwarz besteht darin, die Augen angenehmer zu machen.
Das Wichtigste ist, den gesamten Inhalt im BODY zu zentrieren. In Kombination mit einem großen DIV-Block im Inneren ist dies möglich Ich habe festgestellt, dass sich der Inhalt in Browsern wie IE und FIREFOX immer in der Mitte der Webseite befindet. Dies dient hauptsächlich dazu, den Unterschied zwischen IE und FIREFOX zu lösen ist zentriert, und dann fügen wir einen großen DIV-Block zum BODY hinzu, schreiben den Block dieses DIV so, dass der Text linksbündig ist,

 */ 
 body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center;
  background:#FFF; color:#666;} 
 /*

Der globale Textlinkstil ist Hier definiert. Der Stil ist derselbe wie auf der Keqiji-Hauptseite. Da im Layout und in den Stilen viel UL und LI verwendet wird von UL und LI selbst sehen nicht gut aus, daher entfernen wir hier die Listenpunkte und Ränder

*/ 
 a:link,a:visited{color:#000099; text-decoration: underline;} 
 a:hover,a:active{color:#000;text-decoration: none;background-color: #FED762;} 
 /*

Die Rahmenvorlage des Bildes ist hier als 0 definiert und wird hier global definiert . Auf der Rückseite werden Ränder hinzugefügt und weitere hinzugefügt. Die Hauptidee ist immer noch von groß nach klein.

 */ 
 ul,li{ list-style:none;} 
 /*

Dies ist der größte und äußerste DIV-Block, der im BODY enthalten ist. Damit können Sie die Breite des gesamten Webseiteninhalts steuern. In Verbindung mit BODY kann eine automatische Zentrierung erreicht werden. Definieren Sie die Breite und horizontale Zentrierung der gesamten Website
1. Hier wird festgelegt, dass der gesamte Text linksbündig ausgerichtet ist.

2. Verwenden Sie MARGIN, um eine Zentrierung in FIREFOX zu erreichen.

 */ 
 img{ border:0;}   
 /*

3. Bei der Verwendung von OVERFLOW befürchte ich, dass der von einigen Leuten definierte Inhalt zu umfangreich ist und das Layout beeinträchtigt. Daher wird es beim Hängen automatisch ausgeblendet.

INFO hat einen DIV-Block mit einer Breite von 100 % hinzugefügt. Die rechte Seite hat eine feste Breite und die linke Seite wird automatisch angewendet. Und es ist die Grundlage für die Lösung der Voraussetzungsfragen einer Zeile und zwei Spalten.
Ich habe hier FLOAT hinzugefügt, um „Feuer mit Feuer zu bekämpfen“, also Float zu verwenden, um das Float-Problem zu lösen. Denn auch rechts wird ein Schwimmer benötigt;

 */ 
 #wrapper{ text-align:left;margin:0 auto; width:1000px; overflow:hidden;} 
 /*

Hier ist die Navigationsleiste
Verwenden Sie BODER, um die grüne Farbe an der Seite hinzuzufügen

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

Hier wird die absolute Positionierung verwendet. Da dies auf mehr als drei Seiten verwendet wird, ist es sehr wahrscheinlich, dass es von anderen Inhalten beeinflusst wird. Daher wird es als absolute Positionierung definiert, sodass es grundsätzlich nicht beeinflusst wird.
bykijijis Bildposition

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

Dies definiert die Größe des Titeltextes im HEADER-Bereich. Farbe usw. Der Hauptgrund besteht darin, dem Webmaster das direkte Hinzufügen von Text-LOGO zu ermöglichen.

*/ 
 #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} 
 /*

Das folgende LINKS und RECHTS vervollständigt das Layout von einer Zeile und zwei Spalten. Ich habe außerhalb LINKS eine INFO hinzugefügt. Aus diesem Grund wird die Anpassung flexibler gestaltet, sodass sich die Seite automatisch entsprechend anpassen kann.
Der große Block auf der linken Seite

Der LINKE ist hier 305PX von rechts entfernt, da sich außerhalb davon ein 100%-DIV befindet. Somit verbleibt eine Breite von 305 für die rechte Spalte. Auf diese Weise kann LEFT adaptiv sein.

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

Dies ist der größte DIV in LEFT. Dies dient dazu, die Unterschiede in den Interpretations- und Berechnungsmethoden von PADDING in verschiedenen Browserversionen zu lösen*/

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

Da die Breite der INFO vorne bereits 100 % beträgt und die Breite innen LINKS hinterließ ihm ein weiteres 305PX-Loch. Daher liegt der negative 305PX von der linken Seite direkt neben LINKS. Ich habe hier 300PX geschrieben, was 5PX vom linken Block entfernt ist; das sieht komfortabler aus.
Hier definiere ich die Breite als 289PX; links und rechts von PADDING schreibe ich 299PX;

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

Dies ist der Suchbegriff, es gibt nichts zu sagen.
Suchen Sie danach

*/ 
 #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）！