Beispiel für die Verwendung von CSS3 zum Erstellen eines animierten Pikachu-Hintergrundbilds
|
Text OK, als nächstes ist es Zeit, die Renderings zu zeigen. Erst wenn Sie die Bilder gesehen haben, werden Sie daran interessiert sein, sie zu verstehen, sonst wird es langweilig und Sie werden kein Interesse daran haben, sie anzusehen.
PS: Da die Größe meiner Animation relativ groß ist (720 x 1280), habe ich sie um die Hälfte reduziert, um diese GIF-Animation aufzunehmen. Tatsächlich wäre es jedoch besser, es in der Originalgröße anzuzeigen. Dazu können Sie es von der Adresse herunterladen, die ich am Ende des Artikels angebe. Kommen wir zurück zum Thema. Eigentlich ist dieser Animationseffekt nicht schwer. Man sieht, dass der Aufbau sehr einfach und übersichtlich ist. Obwohl es einfach ist, ist die Wirkung dennoch sehr gut, weshalb ich bereit bin, es zu tun. Ok, da es so einfach ist, schauen wir uns die HTML-Struktur an, in der ich es implementiert habe:
<div Klasse="pikachu_container">
<div Klasse="Header">
<div Klasse="header_main">
<span class="Batterie"></span>
<span class="clock" id="nowTime">09:00</span>
</div>
</div>
<div Klasse="Zeit">
<h1>09:00</h1>
<p id="date">3. September 2015</p>
<p>Niedliches Pikachu-Handy-Hintergrundbild</p>
</div>
<div Klasse="Körper">
<div Klasse="Augen">
<div Klasse="leftEye"></div>
<div Klasse="rightEye"></div>
</div>
<div Klasse="Nase"></div>
<div Klasse="Wange">
<div Klasse="leftCheek"></div>
<div Klasse="rightCheek"></div>
</div>
<div Klasse="Mund">
<div Klasse="Mund_Haupt">
<div Klasse="Zunge"></div>
</div>
</div>
<div Klasse="Hände">
<div Klasse="linkeHand">
<div Klasse="leftHand_main">
<span></span>
<span></span>
<span></span>
<span></span>
<div Klasse="leftshadow"></div>
</div>
</div>
<div Klasse="rechteHand">
<div Klasse="rightHand_main">
<span></span>
<span></span>
<span></span>
<span></span>
<div Klasse="rightshadow"></div>
</div>
</div>
</div>
<div Klasse="Box">
<div Klasse="Hauptbox">
<div Klasse="box_circle"></div>
</div>
</div>
</div>
<p class="Autor">@JR</p>
</div>Der Grundaufbau ist relativ übersichtlich. Er gliedert sich in Batterie und Uhrzeit oben, Uhrzeit und Datum in der Mitte sowie Pikachus Körper. Pikachus Körper ist in Augen, Nase, Mund, Wangen, Hände und Ball unterteilt. Nachdem Sie die HTML-Struktur erstellt haben, können Sie den CSS-Stil entsprechend der Größe der einzelnen Bildteile schreiben, die Sie gemessen haben. Anschließend werde ich den CSS-Implementierungscode jedes Teils mit Ihnen teilen: Zuerst initialisieren
*{
Rand: 0;
Polsterung: 0;
}
Körper{
Schriftfamilie: „Microsoft YaHei“;
Farbe: #fff;
}
.pikachu_container{
Breite: 720px;
Höhe: 1280px;
Hintergrund: RGB (251,205,60);
Position: relativ;
Überlauf: versteckt;
Rand: 0 automatisch;
}Top Akku und Laufzeit
.pikachu_container .header{
Breite: 100 %;
Höhe: 50px;
Zeilenhöhe: 50px;
Position: relativ;
oben: 0;
links: 0;
}
.pikachu_container .header .header_main{
Breite: 160px;
Höhe: 100 %;
Position: absolut;
rechts:0;
oben: 0;
Schriftgröße: 30px;
Überlauf: versteckt;
}
.header .header_main .battery{
Anzeige: Inline-Block;
Breite: 34px;
Höhe: 18px;
Rand: 3px durchgezogen #fff;
Rahmenradius: 5px;
Position: absolut;
oben: 50 %;
links: 23px;
Rand oben: -12px;
}
.header .header_main .battery:nach{
Inhalt:'';
Anzeige: Inline-Block;
Breite: 5px;
Höhe: 14px;
Hintergrund:#fff;
Position: absolut;
oben: 2px;
rechts: 2px;
-webkit-animation:Laden 2 s linear unendlich;
-moz-animation: Laden 2 s linear unendlich;
-o-Animation: Laden 2 s linear unendlich;
-ms-animation:Laden 2s linear unendlich;
Animation: 2 s lineares Laden, unendlich;
}
@-webkit-keyframes wird aufgeladen
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
@-moz-keyframes wird aufgeladen
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
@-o-keyframes wird aufgeladen{
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
@-ms-keyframes wird aufgeladen{
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
@keyframes wird aufgeladen{
0 %{
Breite: 5px;
}
100 %{
Breite: 30px;
}
}
.header .header_main .battery:vorher{
Inhalt:'';
Anzeige:Block;
Breite: 3px;
Höhe: 12px;
Hintergrund:#fff;
Rahmen oben links – Radius: 4px;
Rahmen unten links, Radius: 4px;
Position: absolut;
oben: 3px;
links: -6px;
}
.header .header_main .clock{
Position: absolut;
rechts: 14px;
oben: 0;
}Zentrales Datum und Uhrzeit
.pikachu_container .Zeit{
Breite: 100 %;
Höhe: 250px;
Position: relativ;
oben: 70px;
links: 0;
Textausrichtung: zentriert;
}
.pikachu_container .time h1{
Schriftgröße: 90px;
Buchstabenabstand: 8px;
Textschatten: -1px 2px 3px rgba (0,0,0,0,5);
}
.pikachu_container .time p:n-ter-Typ(1){
Schriftgröße: 30px;
Rand oben: 10px;
}
.pikachu_container .time p:n-ter-Typ(2){
Schriftgröße: 26px;
Rand oben: 8px;
-webkit-animation:textShake 1s unendlich;
-moz-animation:textShake 1s unendlich;
-o-animation:textShake 1s unendlich;
-ms-animation:textShake 1s unendlich;
Animation: Textshake, 1 s, unendlich;
}
@-webkit-keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
-webkit-transform:rotate(1deg) translate3d(2px,-2px,0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
-webkit-transform:rotate(0deg) translate3d(0px,0px,0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
-webkit-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@-moz-keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
-moz-transform:drehen(1Grad) übersetzen3d(2px,-2px,0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
-moz-transform:drehen(0Grad) übersetzen3d(0px,0px,0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
-moz-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@-o-keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
-o-transform:drehen(1Grad) übersetzen3d(2px,-2px,0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
-o-transform:drehen(0Grad) übersetzen3d(0px,0px,0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
-o-transform:drehen(-1Grad) übersetzen3d(-2px,2px,0);
}
}
@-ms-keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
-ms-transform:drehen(1deg) übersetzen3d(2px,-2px,0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
-ms-transform:drehen(0Grad) übersetzen3d(0px,0px,0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
-ms-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@keyframes textShake{
0 %, 20 %, 40 %, 60 %, 80 %, 100 % {
transformieren: drehen (1 Grad) übersetzen3d (2px, -2px, 0);
}
5 %, 15 %, 25 %, 35 %, 45 %, 55 %, 65 %, 75 %, 85 %, 95 % {
transformieren: drehen (0 Grad) übersetzen3d (0px, 0px, 0);
}
10 %, 30 %, 50 %, 70 %, 90 % {
transformieren: drehen (-1 Grad) übersetzen3d (-2px, 2px, 0);
}
}Pikachus Augen
.pikachu_container .body{
Breite: 100 %;
Höhe: 940px;
Position: relativ;
oben: 50px;
links: 0;
}
.Körper .Augen{
Position: relativ;
}
.body .eyes .linkesAuge, .body .eyes .rechtesAuge{
Breite: 85px;
Höhe: 85px;
Rand: 5px durchgezogen rgb(2,0,1);
Hintergrund: RGB (51,51,51);
Randradius: 50 %;
Position: absolut;
oben: 40px;
}
.body .eyes .linkesAuge{
links: 150px;
}
.body .eyes .rechtesAuge{
rechts: 150px;
}
.body .eyes .leftEye:nachher,.body .eyes .rightEye:nachher{
Inhalt:'';
Anzeige:Block;
Breite: 40px;
Höhe: 40px;
Hintergrund:#fff;
Rand: 5px durchgezogen rgb(2,0,1);
Randradius: 50 %;
Position: absolut;
oben: 2px;
links: 2px;
-webkit-animation:eyeMove 3s unendlich;
-moz-animation:eyeMove 3s unendlich;
-o-animation:eyeMove 3s unendlich;
-ms-animation:eyeMove 3s unendlich;
Animation: Augenbewegung 3 s unendlich;
}
@-webkit-keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}
@-moz-keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}
@-o-keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}
@-ms-keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}
@keyframes eyeMove{
0 %, 100 % {
oben: 2px;
links: 2px;
}
30 %, 60 %, 70 % {
oben: 0px;
links: 17px;
}
40 %
oben: 0px;
links: 21px;
}
50 %{
oben: 0px;
links: 13px;
}
80 %, 90 % {
oben: 17px;
links: 17px;
}
}Pikachus Nase
.Körper .Nose{
Position: absolut;
Breite: 28px;
Höhe: 18px;
Hintergrund: RGB (51,51,51);
Rand: 4px durchgezogen rgb(2,0,1);
Rahmenradius: 36px/26px;
links: 50 %;
oben: 100px;
Rand links: -18px;
-webkit-animation:noseMove 3s unendlich;
-moz-animation:noseMove 3s unendlich;
-o-animation:noseMove 3s unendlich;
-ms-animation:noseMove 3s unendlich;
Animation: Nasenbewegung 3 s unendlich;
}
@-webkit-keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}
@-moz-keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}
@-o-keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}
@-ms-keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}
@keyframes noseMove{
0 %, 49 %, 51 %, 100 % {
Breite: 28px;
Höhe: 18px;
Rand links: -18px;
}
50 %{
Breite: 34px;
Höhe: 20px;
Rand links: -21px;
}
}Pikachus Wange
.Körper .Wange{
Position: relativ;
}
.body .cheek .leftCheek, .body .cheek .rightCheek{
Breite: 120px;
Höhe: 120px;
Rand: 5px durchgezogen rgb(2,0,1);
Hintergrund: RGB (231,74,57);
Randradius: 50 %;
Position: absolut;
oben: 170px;
-webkit-animation:cheekMove 3s unendlich;
-moz-animation:cheekMove 3s unendlich;
-o-animation:cheekMove 3s unendlich;
-ms-animation:cheekMove 3s unendlich;
Animation: Wangenbewegung 3 s unendlich;
}
@-webkit-keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
@-moz-keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
@-o-keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
@-ms-keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
@keyframes cheekMove{
0 %, 46 %, 54 %, 100 % {
Breite: 120px;
Höhe: 120px;
oben: 170px;
}
50 %{
Breite: 100px;
Höhe: 100px;
oben: 180px;
}
}
.body .cheek .leftCheek{
links: 60px;
}
.body .cheek .rightCheek{
rechts: 60px;
}Pikachus Mund
.Körper .Mund{
Position: relativ;
Breite: 180px;
Höhe: 220px;
links: 50 %;
oben: 180px;
Rand links: -90px;
}
.Körper .Mund .Mund_main{
Position: absolut;
links: 0;
oben: 0px;
Breite: 180px;
Höhe: 220px;
Hintergrund: RGB (132,37,41);
Rand: 4px durchgezogen rgb(2,0,1);
Rahmen oben rechts, Radius: 15px 15px;
Rahmen unten links – Radius: 250px 570px;
Rahmen unten rechts – Radius: 250px 590px;
Überlauf: versteckt;
-webkit-animation:mouthMove 3s unendlich;
-moz-animation:mouthMove 3s unendlich;
-o-animation:mouthMove 3s unendlich;
-ms-animation:mouthMove 3s unendlich;
Animation: Mundbewegung 3 s unendlich;
}
@-webkit-keyframes MundBewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
@-moz-keyframes Mundbewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
@-o-keyframes MundBewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
@-ms-keyframes MundBewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
@keyframes MundBewegung{
0 %, 46 %, 54 %, 100 % {
Höhe: 220px;
}
50 %{
Höhe: 20px;
}
}
.body .mouth:nach,.body .mouth:vor{
Inhalt:'';
Anzeige:Block;
Breite: 112px;
Höhe: 38px;
Hintergrund: RGB (251,205,60);
Rahmen unten: 4px durchgezogen rgb(2,0,1);
Position: absolut;
oben: -13px;
z-Index: 3;
}
.body .mouth:nach{
Rahmen links: 4px durchgezogen rgb(2,0,1);
Rahmen unten links – Radius: 340px 180px;
links: -30px;
-webkit-transform:rotate(-24 Grad);
-moz-transform:drehen(-24Grad);
-o-transform:drehen(-24Grad);
-ms-transform:drehen(-24Grad);
transformieren: drehen (-24 Grad);
}
.body .mouth:vor{
Rahmen rechts: 4px durchgezogen rgb(2,0,1);
Rahmen unten rechts – Radius: 340px 180px;
rechts: -30px;
-webkit-transform:drehen(24Grad);
-moz-transform:drehen(24Grad);
-o-transform:drehen(24Grad);
-ms-transform:drehen(24Grad);
transformieren: drehen (24 Grad);
}
.Körper .Mund .Zunge{
Breite: 200px;
Höhe: 200px;
Hintergrund: RGB (221,102,106);
Rand oben: 40px;
Rand links: -10px;
Rahmen oben links – Radius: 380px;
Rahmen oben rechts, Radius: 420px 380px;
Überlauf: versteckt;
}Über Pikachus Mund sollte man noch nachdenken und das Wichtigste ist, den Randradius zu verwenden, um diesen Effekt zu erzielen. Die Funktion für abgerundete Ecken ist ziemlich leistungsstark. Es hängt alles davon ab, wie Sie sie verwenden. Pikachus Ball
.Körper .Box{
Breite: 82px;
Höhe: 82px;
Rand: 3px durchgezogen #fff;
Randradius: 50 %;
Position: relativ;
Kastenschatten: 0 0 5px rgba (255,255,255,0,9);
links: 50 %;
oben: 320px;
Rand links: -44px;
-webkit-animation:box-rotate 4s ease-in-out unendlicher Wechsel;
-moz-animation:box-rotate 4s ease-in-out unendliche Abwechslung;
-o-Animation:Box-Rotate 4s, unendliche Abwechslung beim Rein-Raus-Gehen;
-ms-animation:box-rotate 4s ease-in-out unendlicher Wechsel;
Animation: Box-Rotation, 4 s, unendliches abwechselndes Ein- und Aussteigen;
}
@-webkit-keyframes box-rotate{
0 %, 90 %, 100 % {
-webkit-transform:drehen(0Grad);
}
40 %, 50 % {
-webkit-transform:drehen(360Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
@-moz-keyframes box-rotate{
0 %, 90 %, 100 % {
-moz-transform:drehen(0Grad);
}
40 %, 50 % {
-moz-transform:drehen(360Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
@-o-keyframes box-rotate{
0 %, 90 %, 100 % {
-o-transform:drehen(0Grad);
}
40 %, 50 % {
-o-transform:drehen(360Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
@-ms-keyframes box-rotate{
0 %, 90 %, 100 % {
-ms-transform:drehen(0Grad);
}
40 %, 50 % {
-ms-transform:drehen(360Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
@keyframes box-rotate{
0 %, 90 %, 100 % {
transformieren: drehen (0 Grad);
}
40 %, 50 % {
transformieren: drehen (360 Grad);
Boxschatten: 0 0 20px 5px rgba (255,255,255,0,9);
}
}
.body .box .box_main{
Breite: 80px;
Höhe: 80px;
Randradius: 50 %;
Hintergrund: RGB (236,2,3);
Rand: 1px durchgezogen #333;
Position: absolut;
oben: 0;
links: 0;
Überlauf: versteckt;
}
.body .box .box_main:vor{
Inhalt:'';
Anzeige:Block;
Breite: 80px;
Höhe: 40px;
Hintergrund:#fff;
Position: absolut;
unten: 0;
links: 0;
}
.body .box .box_main:nach{
Inhalt:'';
Anzeige:Block;
Breite: 80px;
Höhe: 12px;
Hintergrund: RGB (59,53,67);
Position: absolut;
oben: 50 %;
links: 0;
Rand oben: -6px;
}
.body .box .box_main .box_circle{
Breite: 24px;
Höhe: 24px;
Rand: 8px durchgezogenes RGB (59,53,67);
Randradius: 50 %;
Hintergrund:#fff;
Position: absolut;
links: 50 %;
oben: 50 %;
Rand links: -20px;
Rand oben: -20px;
z-Index: 5;
}
.body .box .box_main .box_circle:nach{
Inhalt:'';
Anzeige:Block;
Breite: 16px;
Höhe: 16px;
Rand: 1px durchgezogen rgb(59,53,67);
Randradius: 50 %;
Position: absolut;
oben: 50 %;
links: 50 %;
Rand links: -9px;
Rand oben: -9px;
-webkit-animation:bg_change 4s unendlich;
-moz-animation:bg_change 4s unendlich;
-o-animation:bg_change 4s unendlich;
-ms-animation:bg_change 4s unendlich;
Animation: bg_change 4s unendlich;
}
@-webkit-keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}
@-moz-keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}
@-o-keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}
@-ms-keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}
@keyframes bg_change{
0 %, 40 %, 60 %, 90 %, 100 % {
Hintergrund: keiner;
}
50 %{
Hintergrund: RGB (236,2,3);
}
}PS: Was die Hände betrifft, gibt es im Voraus viele Codes und der Artikel ist schon etwas lang, deshalb werde ich ihn nicht hochladen. Wenn Sie es benötigen, können Sie es von meinem GitHub herunterladen. In diesem Fall die GitHub-Download-Adresse: https://github.com/JR93/pikachu Originallink: https://www.cnblogs.com/jr1993/p/4779678.html Oben sind die Einzelheiten eines Beispiels für die Verwendung von CSS3 zum Erstellen eines animierten Pikachu-Hintergrundbilds aufgeführt. Weitere Informationen zur Verwendung von CSS3 zum Erstellen eines Pikachu-Hintergrundbilds finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
<<: Tutorial zur Verwendung des Hyperlink-Tags in HTML
>>: Beispiele für Clearfix und Clear
Artikel empfehlen
Detaillierte Schritte zur Yum-Konfiguration des Nginx-Reverse-Proxys
Teil.0 Hintergrund Die Intranetserver des Unterne...
Detaillierte Erklärung des Nginx Reverse-Proxy-Beispiels
1. Reverse-Proxy-Beispiel 1 1. Erzielen Sie den E...
Aktivieren Sie OCSP, um die Effizienz der https-Zertifikatsüberprüfung zu verbessern und das Problem des langsamen Zugriffs auf Let’s Encrypt SSL-Zertifikate zu lösen
In den letzten Tagen war der Zugriff auf die Webs...
Leitfaden zum Schreiben von HTML-Code
Gängige Konventions-Tags Selbstschließende Tags, ...
CenterOS7 Installations- und Konfigurationsumgebung jdk1.8 Tutorial
1. Deinstallieren Sie zuerst das mit CenterOS gel...
So laden Sie das JAR-Paket über die Webseite auf Nexus hoch
Wie lädt man das JAR-Paket in ein privates Lager ...
CSS3 Flex-Layout Justify-Content:Space-Between Die letzte Zeile wird linksbündig ausgerichtet
Bei Verwendung des Layouts justify-content:space-...
So lösen Sie das Problem der Nichtübereinstimmung des MySQL-Abfragezeichensatzes
Finden Sie das Problem Ich bin vor kurzem bei der...
Eine kurze Diskussion über verschiedene Situationen, in denen das Hinzufügen von Indizes zu MySQL nicht wirksam wird
Das Hinzufügen von Indizes kann die Abfrageeffizi...
CSS fixiert das Tag auf Containerebene (div...) an einer Position (ganz rechts auf der Seite)
Der Code sieht folgendermaßen aus: .Verfahren{ Ra...
Der Handler PageHandlerFactory-Integrated hat ein fehlerhaftes Modul ManagedPipelineHandler in seiner Modulliste
Wenn Sie ein Webprojekt entwickeln, müssen Sie II...
Beispiel für die Konfiguration von nginx zur Implementierung von SSL
Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...
Detaillierte Erklärung des Codes zum Abfragen von Daten eines bestimmten Tages, Monats oder Jahres in MySQL
Heute Wählen Sie * aus Tabellenname, wobei to_day...
Zusammenfassung verschiedener Methoden für Vue zum Erreichen dynamischer Stile
Inhaltsverzeichnis 1. Ternäres Operatorurteil 2. ...
MySQL verwendet den Befehl truncate, um alle Tabellen in einer Datenbank schnell zu löschen
1. Führen Sie zuerst die Select-Anweisung aus, um...