Collection de notes CSS_Experience Exchange de Taobao Duan Zhengchun

Imaginez résumer l'expérience d'écriture de CSS et de Xhtml au cours des dernières années, et résumez-la dans un « article sans précédent » à partager avec tout le monde. Malheureusement, je suis déjà très vieux et je suis vraiment incapable de faire ce que je veux. J’ai donc changé d’avis et j’ai pensé que je pourrais le présenter sous forme de notes, pour ne pas avoir à m’inquiéter de ne pas pouvoir l’écrire.

Parlons maintenant d'une petite astuce sur la page d'accueil de Taobao.

Lignes horizontales et verticales entre les catégories

Depuis longtemps, il n'y avait que trois lignes verticales entre les catégories. .

1. Image de fond
   Définissez un remplissage sur la balise a et positionnez-la à droite avec une image de fond de 1px de largeur et de hauteur.
   Inconvénient : Le dernier doit quand même utiliser la classe pour masquer l'arrière-plan. Le symbole

2. 
   est rempli du symbole "|" entre chaque balise.
   Inconvénients : les fichiers HTML deviennent plus volumineux, la maintenance des fichiers devient fastidieuse et cela n'a aucun sens en HTML.

3. La bordure sur le côté droit de la balise a.
   Identique à l'image d'arrière-plan, mais utilisez plutôt la bordure droite. Les inconvénients sont les mêmes que ci-dessus.

En voyant cela, quelqu'un a peut-être ouvert la page d'accueil de Taobao et utilisé Firebug pour afficher le code source et voir comment cela a été fait.

En fait, la méthode actuelle consiste à utiliser le overflow:hidden de ul puis le margin-left:-1px de li. Cette approche peut en même temps éviter les inconvénients ci-dessus.
Je ne sais pas pourquoi je ne l’ai pas fait avant. Se pourrait-il que j’aie été le premier à découvrir une telle pratique ?
Peu importe qui a déjà utilisé cette méthode pour implémenter des lignes verticales entre les catégories.
Cependant, peu de temps après le lancement de la page d'accueil de Taobao, certains sites Web homologues ont également utilisé cette méthode lors de la révision de leur page d'accueil.
Ce n'est pas grave si vous ne lisez pas ce site Web. Le cours, c'est vraiment un peu trop à écrire. Charger le code HTML devient beaucoup plus de travail.
De toute façon, une page d'accueil doit charger une page Web de 1,17 m, et mon cerveau la bloquera automatiquement.

La méthode d'arrondi des coins.

Pour ce coin arrondi, les développeurs front-end ont fait trop d'efforts. Nous devons également prendre en compte le nombre de connexions http, ainsi que le nombre de connexions http. codes css et html. Quantité et sémantique.
Ce qui est publié est le plan récent visant à remplacer la méthode des coins arrondis existante. Il peut y avoir de nombreuses situations qui n'ont pas été prises en compte. Mais la méthode d'écriture générale est la suivante. L'avantage est qu'il est facile à maintenir. Il n'y en a qu'un. Les images peuvent également être arbitrairement mises à l'échelle dans une certaine mesure. L'inconvénient est qu'il y a plus de codes html dénués de sens. .c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(http://www.php.cn/);/*Image d'arrière-plan*/
background -repeat:no-repeat;
}

.c{

width:200px;/*Largeur temporairement déterminée*/
background-position:0 -4px
}
. c i{
display :block;
hauteur:4px;
}
.c i i{
margin:0 0 0 4px;
.c b{
display:block;
hauteur:4px;
background-position:0 bottom;
.c b b{
margin:0 0 0 4px;
background-position:right bottom;
}
.c p{
margin:0 0 0 4px
padding:0 4px 0 0
}
html ;
< p class="c">
< i>< /i>< /i>
Appuyez sur le bouton bouton bouton bouton bouton bouton bouton bouton
< ; /p>



Définition globale du tableau

légende Cette étiquette aura un espace de 1px à gauche sous Firefox Le bug est très ennuyeux La seule méthode simple que j'ai. je peux penser à une marge de -1px

css :

table{
border-collapse:collapse;
}
légende du tableau,table td,table th{
border:1px solid #a2bbdd;/*border color*/
background :#c3d9ff;/*Couleur d'arrière-plan*/
}
légende du tableau{
text-align:left
border-bottom:none
margin-left:-1px; >}
html :
<

<
/td>
<

Deux balises à prendre au sérieux

La balise acronyme est idéale pour expliquer les noms, mais elle est trop peu utilisée (j'ai toujours voulu l'utiliser, alors je l'ai notée. .)
css :
acronym{cursor:help}
html :
Texte. . < /acronym>
J'ai oublié sur quel site Web j'ai vu la balise ins utilisée pour afficher plus de liens dans h2. Plus tard, j'ai vérifié le livre et tout le monde a pensé que c'était un peu inapproprié et controversé. Le composant CSS n'a pas encore été écrit... Je dois fournir
html :
< h2>Title< a xhref="http://ued.taobao.com/blog/ # " href="http://ued.taobao.com/blog/#" >Plus>>< /a>< /ins>< /h2>

Droit de propriété Mise en œuvre de " Plus" sur le côté



J'ai fait une fois l'effet montré dans l'image ci-dessus, et j'ai utilisé position pour positionner relativement le côté droit de la balise h2. De cette façon, le code sera effectivement être trop Plusieurs lignes. En fait, cela peut être réalisé en utilisant une méthode plus simple :

Par exemple, le code html est le suivant :

< #" >Titre< /a> 20px;
}
span{
position:absolute;
droite:0;
haut:0;
affichage:bloc;
height:20px;
}
De cette façon, vous pouvez obtenir plus sur le côté droit. En fait, cela peut être encore plus simple :

h2{
height:20px; }
span{
float:right ;
display:block;
margin:-10px 0 0 0; utilise le nombre négatif de margin-top pour y parvenir, car le flotteur par défaut La ligne s'enroulera sous la balise h2, alors laissez-la sauter toute seule. C'est tout pour le code. N'est-ce pas très simple ? J'ai dit que c'était très simple ! Parce que c'est très simple, je ne publierai pas de page de test séparée

ps : je pense que nous devrions avoir un éditeur comme Blue Ideal à un moment donné...

Ordre des attributs css de Taobao. normes d'écriture

Les collègues du département précédent avaient chacun un ensemble de normes d'écriture, ce qui rendait très difficile la lecture du code CSS de chacun, nous avons donc mis en œuvre un ensemble de normes d'écriture, qui peuvent également vous être utiles.


*{
/*Propriétés d'affichage*/
afficher
position
flotteur
effacer
curseur
…

/*Modèle de boîte*/
marge
remplissage
largeur
hauteur

/*Typesetting*/
alignement vertical
espace blanc
texte- décoration
text-align
…

/*text*/
color
police
content

/*border background Pourquoi utiliser Boder et background Le la raison pour laquelle nous le mettons à la fin est que la fréquence des modifications sera plus fréquente qu'avant, il est donc plus pratique de le vérifier à la fin, haha. */
frontière
fond
}
En dernière analyse, la spécification de l'ordre d'écriture des attributs est : Dieu - Monstre - Comment va ta silhouette ! - Type de vêtement (bikini ? Veste matelassée ?) - Style vestimentaire (noir ? blanc ? Boutons ? Fermetures éclair ?) - Quels produits cosmétiques et coiffures sont utilisés
Cette norme d'écriture n'est pas une norme d'écriture promue par les fabricants de navigateurs, donc. il se peut que cela ne soit pas reconnu par la majorité des promoteurs de normes. Mais ce sont ceux qui, selon quelques frères, correspondent le mieux à l’environnement Taobao existant.

L'abréviation du code CSS

La syntaxe de l'abréviation CSS est utile aux novices, et les vétérans n'ont pas besoin de la lire

0px ne nécessite pas d'unités, directement. : margin:0
L'abréviation du modèle de boîte, la syntaxe est margin : top right bottom left;. Elle peut même être abrégée en margin : top (right left) bottom, bien sûr les valeurs​​pour le droite et gauche doivent être identiques
Le dernier élément de l'attribut CSS ";" No. est omis. (Non recommandé ^_^)
Remplacez la largeur de police normale par 400 et remplacez gras par 700.
La valeur de couleur hexadécimale, si la valeur de chaque chiffre est la même, peut être abrégée de moitié, par exemple : #000000 peut être abrégé en #000 ; #0044DD peut être abrégé en #04D
Abréviation de ; border, la syntaxe est border:width style color, similaire à boder:1px solid red;
L'abréviation de background, la syntaxe est la position de pièce jointe de répétition d'image couleur Similaire à : background:#f00 url(background.gif) non. -repeatfixed 0 0(Pourquoi je n'écris jamais fixe ?)
L'abréviation de font, similaire à font:italic small-caps bold 1em/140% "SimSun", sans-serif, peut être omise dans la police la plus simple : 12px "SimSun".
list L'abréviation de l'attribut, syntaxe style liste : carré à l'intérieur de l'url (image.gif), mais généralement nous ne l'utilisons pas
.C'est vraiment difficile d'en rattraper 10. Il suffit de compter la suppression des sauts de ligne et des espaces inutiles pour une seule
Un jour, tout le monde discutait du problème du "centrage vertical des images inconnues" dans l'équipe, et a soudain eu l'idée. d'utiliser l'attribut vertical-align:middle. Implémenté, j'ai donc pris le temps de faire l'exemple immature suivant :

CSS :

p{
width:140px; 🎜> hauteur:140px;
text-indent:-8px;
text-align:center
line-height:138px
background:red
font-size:12px;
*font-size:120px;
*text-indent:-60px
}
img{
width:100px
height:100px; :milieu;
}
HTML :

  n'était pas d'utiliser la position, après tout, un grand nombre d'images sont affichées pour la navigation. Le processeur consommera plus de ressources lors du rendu.

L'inconvénient est qu'il génère un résultat dénué de sens, et les formules de calcul de font-size et font-indentd ne sont pas très simples (donc les nombres ci-dessus sont tous inventés ^_^
Plus tard, Xiaomi a vu cette idée et a passé du temps à mettre à jour le code. Il a remplacé le nbsp ennuyeux par la sortie :after Voir le code ci-dessous.

CSS :

.tb-p-c{
display: block;
width:140px; 🎜> text-align:center;
*font-size:123px
}
.tb-p-c img{
vertical-align:middle
}
.tb- p-c:after {
contenu : "." 
visibilité : caché
taille de la police : 12px ;
marge gauche : -5px ; >

De cette façon, le nbsp ennuyeux disparaît. Tout le monde comprend mieux la méthode de rendu de vertical-align:middle. De nombreux camarades ont également découvert que la pseudo-classe after peut également être utilisée pour le piratage

En conséquence, le centre du cercle a de nouveau mis à niveau CSS :

CSS :

. .tb-p-c {
display: table-cell;
vertical-align:middle;
width:140px
height:140px; display: block;
*font-size: 122px;
background:red;
.tb-p-c img {
vertical-align:middle
}
C'est la troisième fois pour cette mise à niveau, en raison de contraintes de temps, je n'ai pas testé le code ci-dessus. La raison est que l'affichage est utilisé pour le rendu. J'ai l'impression que le navigateur effectuera le rendu plusieurs fois, je ne l'ai donc pas testé.
Cette discussion nous a apporté beaucoup de gains. Je crois que si tout le monde participe, il y aura plus de voies et de perspectives que nous n'avons pas découvertes. Ne soyez pas avare, tout le monde, postez plus de réponses et améliorez-vous ensemble.