Expérience d'analyse et de développement CSS de Keqiji OEM_Échange d'expériences

Analyse CSS de Keqiji OEM
Cet OEM est lancé par Keqiji Si vous avez un nom de domaine, vous pouvez personnaliser votre propre site Web. Puisqu'il appartient aux webmasters de le personnaliser eux-mêmes, les codes HTML, CSS, JS et autres sont ouverts. Mais le CSS par défaut est CSS et ne peut pas être modifié.
Lors de l'écriture de ce CSS, j'ai essayé d'utiliser le moins de balises, afin que les webmasters qui ne sont pas très familiers avec le CSS puissent également le personnaliser. De plus, lors de la conception et de l’écriture de CSS, l’idée générale est d’aller du grand au petit et du petit au petit.
Cette mise en page et CSS ont été écrits une seule fois et n'ont pas été modifiés, donc certains propriétaires peuvent toujours l'optimiser, et un tel code n'est pas optimal. Cependant, le CSS d'une telle mise en page peut être défini par les webmasters de différentes manières. Je vais vous montrer quelques exemples dans un instant.
Voici l'analyse de ce CSS, qui convient très bien aux débutants.
Code du programme

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

La taille globale du texte est définie ici comme 12PX et la hauteur de ligne est de 180%, une telle hauteur de ligne ne sera pas trop fatigante pour les yeux.
Ici, j'ai mis la police Song derrière la police Verdana afin que les chiffres et l'anglais sur la page puissent être affichés dans des polices anglaises, ce qui sera plus beau. Certaines personnes n'ajoutent pas la police Song, mais cela posera des problèmes. C'est du moins ce que montrent les résultats de mes tests.
De plus, j'ai ajouté une couleur de fond car dans certains navigateurs sous certains systèmes d'exploitation, si vous n'ajoutez pas de fond, le fond sera d'une autre couleur.
Je définis également ici la couleur globale du texte. La raison pour laquelle nous n'utilisons pas de noir est de rendre les yeux plus confortables ;
La chose la plus importante est d'ajouter un alignement de texte ; cela consiste à centrer tout le contenu dans le BODY, et lorsqu'il est combiné avec un grand bloc DIV à l'intérieur, cela peut être réalisé que si le contenu de la page est Si la largeur est fixe, alors dans les navigateurs tels que IE et FIREFOX, le contenu est toujours au milieu de la page Web. Il s'agit principalement de résoudre la différence entre IE et FIREFOX. Ici, le texte. est centré, puis on ajoute un grand bloc DIV au BODY , on écrit le bloc de ce DIV pour que le texte soit aligné à gauche,

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

Le style global du lien de texte est. défini ici. J'ai utilisé la forme abrégée. Le style est le même que celui du site principal de Keqiji

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

Puisque beaucoup d'UL et LI seront utilisés dans la mise en page, et les styles. de UL et LI eux-mêmes ne sont pas beaux, donc ici nous supprimons les points et les marges de la liste

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

Le modèle de bordure de l'image est défini ici à 0, et il est défini globalement ici . Il y a des bordures ajoutées à l'arrière et d'autres supplémentaires. L'idée principale est toujours du grand au petit.

 */ 
 img{ border:0;}   
 /*

Il s'agit du bloc DIV le plus grand et le plus externe inclus dans le BODY. Avec lui, vous pouvez contrôler la largeur de l'ensemble du contenu de la page Web. Utilisé avec BODY, un centrage automatique peut être obtenu. Définir la largeur et le centrage horizontal de l'ensemble du site Web
1. Ici, il est défini que tout le texte est aligné à gauche.
2. Utilisez MARGIN pour réaliser le centrage dans FIREFOX.
3. Lors de l'utilisation de OVERFLOW, je crains que le contenu défini par certaines personnes ne soit trop large et n'affecte la mise en page. Il sera donc automatiquement masqué lors de l'accrochage ;

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

INFO a ajouté un bloc DIV d'une largeur de 100%. Il est ajouté pour que certains webmasters puissent personnaliser la mise en page en plein écran. le côté droit a une largeur fixe et le côté gauche est automatiquement appliqué. Et c'est la base pour résoudre les questions préalables d'une ligne et de deux colonnes.
J'ai ajouté FLOAT ici pour "combattre le feu par le feu", c'est-à-dire utiliser float pour résoudre le problème du float. Parce qu'il faut aussi un flotteur à droite

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

Voici la barre de navigation
Utilisez BODER pour ajouter la couleur verte sur le côté

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

Le positionnement absolu est utilisé ici, car plus de trois pages l'utilisent, il est très probable qu'il soit affecté par d'autres contenus, il est donc défini comme un positionnement absolu, de sorte qu'il ne sera fondamentalement pas affecté.
position de l'image de 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} 
 /*

Ceci définit la taille du texte du titre dans la zone HEADER. Couleur etc La raison principale est de permettre au webmaster d'ajouter directement du texte LOGO.

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

Les GAUCHE et DROITE suivantes complètent la disposition d'une ligne et de deux colonnes. J'ai ajouté une INFO en dehors de GAUCHE. C'est pourquoi la personnalisation est rendue plus flexible afin que la page puisse s'adapter automatiquement en conséquence.
Le gros bloc à gauche
La GAUCHE ici est à 305PX de la droite, car il y a un DIV 100% à l'extérieur. Cela laisse donc une largeur de 305 pour la colonne de droite. De cette façon, LEFT peut être adaptatif.

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

C'est le plus grand DIV de GAUCHE. Il s'agit de résoudre les différences dans les méthodes d'interprétation et de calcul du PADDING dans les différentes versions des navigateurs*/

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

Car la largeur de l'INFO devant est déjà de 100%, et la largeur à l'intérieur GAUCHE lui a laissé un autre trou de 305PX. Par conséquent, le 305PX négatif du côté gauche est juste à côté de GAUCHE. J'ai écrit 300PX ici, ce qui est à 5PX du bloc de gauche ; cela semble plus confortable.
Ici, je définis la largeur comme 289PX ; plus 5PX à gauche et à droite de PADDING ; c'est 299PX par sécurité, j'écris un pixel de moins ;

 */ 
 #right{  margin-left:-300px; float:left; width:289px; padding:5px;background:#F7F7F7; margin-top:24px;} 
 /*

C'est l'élément de recherche, il n'y a rien à dire.
Recherchez celui-là

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