Koleksi Nota CSS Taobao Duan Zhengchun_Pertukaran Pengalaman

Bayangkan meringkaskan pengalaman menulis css dan xhtml dalam beberapa tahun yang lalu, dan ringkaskannya menjadi "artikel yang tiada tandingannya" untuk dikongsi dengan semua orang. Malangnya, saya sudah sangat tua, dan saya benar-benar tidak dapat melakukan apa yang saya mahu. Jadi saya mengubah fikiran saya dan berfikir bahawa saya boleh membentangkannya dalam bentuk nota, jadi saya tidak perlu risau tentang tidak dapat menulisnya.

Sekarang mari kita bercakap tentang helah kecil di laman utama Taobao.

Garis mendatar dan menegak antara kategori

Sejak dahulu kala, hanya terdapat tiga garisan menegak antara kategori .

1. Imej latar belakang
   Tetapkan padding pada teg dan letakkannya di sebelah kanan dengan imej latar belakang 1px lebar dan tinggi.
   Kelemahan: Yang terakhir masih perlu menggunakan kelas untuk menyembunyikan latar belakang.

2. simbol
   diisi dengan simbol "|" di antara setiap tag.
   Kelemahan: Fail HTML menjadi lebih besar, penyelenggaraan fail menjadi menyusahkan, dan ia tidak bermakna dalam HTML.

3. Boder di sebelah kanan tag a.
   Sama seperti imej latar belakang, tetapi sebaliknya gunakan sempadan-kanan. Kelemahannya adalah sama seperti di atas.

Melihat ini, seseorang mungkin telah membuka halaman utama Taobao dan menggunakan pepijat api untuk melihat kod sumber untuk melihat cara ia dilakukan.

Malah, kaedah semasa ialah menggunakan limpahan ul:hidden dan kemudian margin-kiri li:-1px. Pendekatan ini dapat mengelakkan kelemahan di atas pada masa yang sama.
Saya tidak tahu mengapa saya tidak melakukan ini sebelum ini. Mungkinkah saya orang pertama yang menemui amalan sedemikian?
Tidak kira siapa yang pernah menggunakan kaedah ini sebelum ini untuk melaksanakan garis menegak antara kategori.
Walau bagaimanapun, tidak lama selepas halaman utama Taobao dilancarkan, beberapa tapak web rakan sebaya turut menggunakan kaedah ini dalam semakan halaman utama mereka.
Tidak mengapa jika anda tidak membaca tapak web itu. Kelas sebenarnya agak banyak untuk menulis. Memuatkan html menjadi lebih banyak kerja.
Apa pun, otak saya secara automatik akan menyekat halaman web yang perlu memuatkan 1.17m untuk halaman utama.

Kaedah membulatkan sudut

Untuk sudut bulat ini, pembangun bahagian hadapan telah melakukan terlalu banyak usaha. Kami juga perlu mempertimbangkan bilangan sambungan http css dan kod html. Kuantiti dan semantik
Apa yang disiarkan adalah rancangan baru-baru ini untuk menggantikan kaedah sudut bulat yang sedia ada tetapi kaedah penulisan umum adalah seperti berikut Kelebihannya ialah ianya mudah diselenggara. Hanya ada satu Gambar pun boleh sewenang-wenangnya skali ke satu tahap yang merugikan ialah terdapat lebih banyak kod html yang tidak bermakna .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{

lebar:200px;/*Lebar ditentukan sementara*/
kedudukan latar: 0 -4px
; c i{
paparan :blok;
tinggi:4px;
}
.c i i{
margin:0 0 0 4px
kedudukan latar:kanan 0;
. c b{
paparan:blok;
tinggi:4px;
kedudukan latar belakang:0 bawah;
kedudukan latar belakang:
}
.c p{
margin:0 0 0 4px
padding:0 4px 0 0;
< p class="c">
Butang i><
Tekan butang butang butang butang butang butang butang butang
< ; /p>



Takrifan global bagi jadual

caption Label ini akan mempunyai jurang 1px di sebelah kiri di bawah Firefox Pepijat ini sangat menjengkelkan boleh fikirkan ialah -1px margin

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
.Es ist wirklich schwierig, 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 Idee, das Attribut Vertical-Align:Middle zu verwenden, wurde 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:12px ;
*font-size:120px;
*text-indent:-60px; align:middle;
}
HTML :

< p>& nbsp; Es war nicht beabsichtigt, die Position zu verwenden, 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.

Infolgedessen hat die Mitte des Kreises das CSS erneut 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 Upgrade. Aus Zeitgründen habe ich den obigen Code nicht getestet. Der Grund dafür ist, dass der Browser den Eindruck hat, dass er mehrmals gerendert wird, daher 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.