Taobao Duan Zhengchuns CSS Notes Collection_Experience Exchange

Stellen Sie sich vor, Sie fassen die Erfahrungen beim Schreiben von CSS und XHTML in den letzten Jahren zusammen und fassen sie in einem „beispiellosen Artikel“ zusammen, den Sie mit allen teilen können. Leider bin ich schon sehr alt und kann wirklich nicht mehr tun, was ich will. Also änderte ich meine Meinung und dachte, dass ich es in Form von Notizen präsentieren könnte, sodass ich mir keine Sorgen machen muss, dass ich es nicht aufschreiben kann.

Lassen Sie uns nun über einen kleinen Trick auf der Taobao-Homepage sprechen.

Horizontale und vertikale Linien zwischen Kategorien

Seit langer Zeit gab es nur drei vertikale Linien zwischen Kategorien .

1. Hintergrundbild
   Legen Sie einen Abstand für das Tag a fest und positionieren Sie es rechts mit einem Hintergrundbild von 1 Pixel Breite und Höhe.
   Nachteil: Der letzte muss immer noch Klasse verwenden, um den Hintergrund auszublenden. Das

2. -Symbol
   wird mit einem „|“-Symbol zwischen jedem Tag gefüllt.
   Nachteile: HTML-Dateien werden größer, die Dateipflege wird umständlich und ist in HTML bedeutungslos.

3. Der Rand auf der rechten Seite des a-Tags.
   Dasselbe wie das Hintergrundbild, aber stattdessen „border-right“ verwenden. Die Nachteile sind die gleichen wie oben.

Als jemand das sah, hat er möglicherweise die Taobao-Homepage geöffnet und Firebug verwendet, um den Quellcode anzuzeigen und zu sehen, wie es gemacht wurde.

Tatsächlich besteht die aktuelle Methode darin, uls overflow:hidden und dann lis margin-left:-1px zu verwenden. Dieser Ansatz kann gleichzeitig die oben genannten Mängel vermeiden.
Ich weiß nicht, warum ich das nicht schon einmal gemacht habe. Könnte es sein, dass ich der Erste war, der eine solche Praxis entdeckte?
Egal, wer diese Methode schon einmal verwendet hat, um vertikale Linien zwischen Kategorien zu implementieren.
Kurz nach dem Start der Taobao-Homepage verwendeten jedoch auch einige Peer-Websites diese Methode bei der Überarbeitung ihrer Homepage.
Es ist in Ordnung, wenn Sie diese Website nicht lesen. Klasse ist wirklich ein bisschen viel zu schreiben. Das Laden des HTML-Codes macht viel mehr Arbeit.
Jedenfalls blockiert mein Gehirn automatisch eine Webseite, die für eine Homepage 1,17 m laden muss.

Die Methode zum Abrunden von Ecken.

Für diese abgerundeten Ecken haben die Frontend-Entwickler zu viel Aufwand betrieben. Außerdem müssen wir die Anzahl der http-Verbindungen berücksichtigen CSS- und HTML-Codes.
Was veröffentlicht wird, ist der aktuelle Plan, die bestehende Methode mit abgerundeten Ecken zu ersetzen. Die allgemeine Schreibmethode ist jedoch wie folgt Der Vorteil ist, dass es nur eins ist. Bilder können bis zu einem gewissen Grad beliebig skaliert werden. Der Nachteil ist, dass es mehr bedeutungslose HTML-Codes gibt:

.c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(http://www.php.cn/);/*Background image*/

background -repeat:no-repeat;

}
.c{
width:200px;/*Temporär festgelegte Breite*/
background-position:0 -4px>}
. c i{
display :block;
}
.c i{
background-position:right 0;
. c b{
display:block;
background-position:0 unten;
margin:0 0 0 4px;
background-position:right bottom;
.c p{
margin:0 0 0 4px;
padding:0 4px 0 0 ;
< i>< /i>
Taste drücken Taste Taste Taste Taste
< /b>< ; /p>



Globale Definition der Tabelle

Unterschrift: Diese Beschriftung hat auf der linken Seite eine Lücke von 1 Pixel. Der Fehler ist sehr ärgerlich kann mir vorstellen, ist -1px Marge

table{
border-collapse:collapse;
}
table caption,table td,table th{
border:1px solid #a2bbdd;/*border color*/
background :#c3d9ff;/*Hintergrundfarbe*/
}
table caption{
text-align:left;
border-bottom:none; }
< /caption> 🎜>< /th>
<  /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
.Es ist wirklich schwer, 10 zu erfinden. Zählen Sie einfach das Löschen nutzloser Zeilenumbrüche und Leerzeichen als eins.
Eines Tages diskutierten alle im Team über das Problem der „vertikalen Zentrierung unbekannter Bilder“ und kamen plötzlich auf die Idee der Verwendung des Attributs „vertikal-align:middle“ implementiert, daher habe ich mir die Zeit genommen, das folgende unausgereifte Beispiel zu erstellen:

CSS:

p{
width:140px
height:140px;
text-indent:-8px;
line-height:138px;
*font-size:120px;
*text-indent:-60px;
img{
width:100px;
Vertical-align :middle;
}
HTML :

< p>& nbsp; Position sollte nicht verwendet werden, da eine große Anzahl von Bildern zum Durchsuchen angezeigt wird. Der Prozessor verbraucht beim Rendern mehr Ressourcen.

Der Nachteil besteht darin, dass nbsp; ausgegeben wird und die Berechnungsformeln für Schriftgröße und Schrifteinzug nicht sehr einfach sind (daher sind die oben genannten Zahlen alle zusammengesetzt^_^). 🎜> Später sah Xiaoma diese Idee und verbrachte einige Zeit damit, den Code zu aktualisieren. Er ersetzte das langweilige nbsp durch :after-Ausgabe.

CSS:

.tb-p-c{
display: block;
height:140px;
line-height:140px; 🎜> text-align:center;
*font-size:123px
}
.tb-p-c img{
Vertical-align:middle>}
.tb- p-c:after {
Inhalt: „.“;
Schriftgröße: 12px;
Rand links: -5px; >

Auf diese Weise verschwindet das lästige nbsp. Jeder hat ein besseres Verständnis der Rendering-Methode von Vertical-Align: Middle. Viele Kameraden entdeckten auch, dass die After-Pseudoklasse auch zum Hacken verwendet werden kann

Daher hat die Mitte des Kreises erneut CSS aktualisiert:

CSS:

.tb-p-c {
display: table-cell;
width:140px;
text-align:center; display: block;
*font-size: 122px;
.tb-p-c img {
Vertical-align:middle; Dies ist das dritte. Aus Zeitgründen habe ich den obigen Code nicht getestet. Der Grund dafür ist, dass der Browser das Gefühl hat, dass er mehrmals gerendert wird, also habe ich ihn nicht getestet.
Diese Diskussion hat uns viele Vorteile gebracht, wenn sich alle beteiligen, wird es mehr Wege und Perspektiven geben, die wir noch nicht entdeckt haben. Seien Sie nicht geizig, posten Sie mehr Antworten und verbessern Sie sich gemeinsam.