Verwenden Sie HTML und CSS, um Ihren eigenen warmen Mann „Dabai“ zu erstellen.

Verwenden Sie HTML und CSS, um Ihren eigenen warmen Mann „Dabai“ zu erstellen.

Das Endergebnis sieht so aus, ist es nicht süß …

PS: Am besten ist es, wenn du schon ein bisschen HTML- und CSS-Wissen hast, aber es macht nichts, wenn du ein Neuling bist, es ist auch ok, wenn ein Neuling auf einen „Newbie“ trifft!

1. Vorbereitung

Gehen Sie zum Verzeichnis /home/shiyanlou/ und erstellen Sie ein neues leeres Dokument:

Nennen Sie es Baymax.html (andere Namen sind OK, aber das Suffix muss .html sein):

Verwenden Sie gedit, um den Code zu öffnen und für die Bearbeitung vorzubereiten:

2. Schreiben Sie HTML

Geben Sie den folgenden Code ein:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!doctype html >   
  2. < html >   
  3.     <Kopf> < Meta​​   Zeichensatz = " utf -8" > < Titel > Baymax < / Titel > </Kopf>   
  4. < Textkörper >   
  5.   
  6.       < div   id = "baymax" >   
  7.   
  8.          <!-- Definieren Sie den Kopf, einschließlich zwei Augen und Mund -->   
  9.          < div   id = "Kopf" >   
  10.              < div   id = "Auge" > </ div >   
  11.              < div   id = "eye2" > </ div >   
  12.              < div   id = "Mund" > </ div >   
  13.          </div>​​   
  14.   
  15.          <!-- Definiert den Rumpf, einschließlich des Herzens -->   
  16.          < div   id = "Rumpf" >   
  17.              < div   id = "Herz" > </ div >   
  18.          </div>​​   
  19.   
  20.          <!-- Definiert den Bauch, einschließlich der Abdeckung (die Verbindung mit dem Rumpf) -->   
  21.          < div   id = "Bauch" >   
  22.              < div   id = "Abdeckung" > </ div >   
  23.          </div>​​   
  24.   
  25.          <!-- Definieren Sie den linken Arm, einschließlich zwei Fingern, einem großen und einem kleinen -->   
  26.          < div   id = "linker Arm" >   
  27.              < div   id = "l-großfinger" > </ div >   
  28.              < div   id = "l-smallfinger" > </ div >   
  29.          </div>​​   
  30.   
  31.          <!-- Definieren Sie den rechten Arm, einschließlich zwei Fingern, einem großen und einem kleinen -->   
  32.          < div   id = "rechter Arm" >   
  33.              < div   id = "r-bigfinger" > </ div >   
  34.              < div   id = "r-smallfinger" > </ div >   
  35.          </div>​​   
  36.   
  37.          <!-- linkes Bein definieren -->   
  38.          < div   id = "linkes Bein" > </ div >   
  39.   
  40.          <!-- rechtes Bein definieren -->   
  41.          < div   id = "rechtes Bein" > </ div >   
  42.   
  43.      </div>​​   
  44. </ Körper >   
  45. < html >   
  46.   

3. CSS-Stile hinzufügen

Wir haben HTML verwendet, um die verschiedenen Elemente von „Dabai“ zu definieren. Jetzt müssen wir CSS verwenden, um das Erscheinungsbild zu zeichnen.

Da „Dabai“ weiß ist, haben wir den Hintergrund zur leichteren Identifizierung auf eine dunkle Farbe gesetzt.

Dann erstmal der Kopf:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. Körper {
  2.      Hintergrund : #595959 ;
  3. }
  4.   
  5. #baymax {
  6.      /*Auf Mitte setzen*/        
  7.      Rand : 0 automatisch ;
  8.   
  9.      /*hoch*/       
  10.      Höhe : 600px ;
  11.   
  12.      /*Überlauf ausblenden*/        
  13.      Überlauf : versteckt ;
  14. }
  15.   
  16. #Kopf {
  17.      Höhe : 64px ;
  18.      Breite : 100px ;
  19.   
  20.      /*Definieren Sie die Form der abgerundeten Ecken in Prozent*/        
  21.      Randradius : 50 %;
  22.   
  23.      /*Hintergrund*/        
  24.      Hintergrund : #fff ;
  25.      Rand : 0 automatisch ;
  26.      Rand unten : – 20px ;
  27.   
  28.      /*Stil der unteren Umrandung festlegen*/        
  29.      Rahmen unten : 5px   solide   #e0e0e0 ;
  30.   
  31.      /*Attribut legt die Stapelreihenfolge der Elemente fest; Elemente mit einer höheren Stapelreihenfolge stehen immer vor Elementen mit einer niedrigeren Stapelreihenfolge*/        
  32.      Z-Index : 100;
  33.   
  34.      /*Relativ positionierte Elemente generieren*/        
  35.      Position : relativ ;
  36. }
  37.   

Effektvorschau:

Fügen wir die Augen und den Mund hinzu!

CSS- CodeInhalt in die Zwischenablage kopieren
  1. #Auge ,
  2. #Auge2 {
  3.      Breite : 11px ;
  4.      Höhe : 13px ;
  5.      Hintergrund : #282828 ;
  6.      Randradius : 50 %;
  7.      Position : relativ ;
  8.      oben : 30px ;
  9.      links : 27px ;
  10.   
  11.      /*Element drehen*/        
  12. transformieren: drehen (8 Grad);
  13. }
  14.   
  15. #Auge2 {
  16.      /* Rotationssymmetrisch machen */        
  17. transformieren: drehen (-8 Grad);
  18.      links : 69px ; oben : 17px ;
  19. }
  20.   
  21. #Mund {
  22.      Breite : 38px ;
  23.      Höhe : 1,5px ;
  24.      Hintergrund : #282828 ;
  25.      Position : relativ ;
  26.      links : 34px ;
  27.      oben : 10px ;
  28. }
  29.   

Ein Mini-„Dabai“ nimmt Gestalt an:

Als nächstes kommen Rumpf und Bauch:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. #Rumpf ,
  2. #Bauch {
  3.      Rand : 0 automatisch ;
  4.      Höhe : 200px ;
  5.      Breite : 180px ;
  6.      Hintergrund : #fff ;
  7.      Randradius : 47 %;
  8.   
  9.      /*Rahmen festlegen*/        
  10.      Rand : 5px   solide   #e0e0e0 ;
  11.      oberer Rand : keiner ;
  12.      z-Index : 1;
  13. }
  14.   
  15. #Bauch {
  16.      Höhe : 300px ;
  17.      Breite : 245px ;
  18.      Rand oben : -140px ;
  19.      Z-Index : 5;
  20. }
  21.   
  22. #Abdeckung {
  23.      Breite : 190px ;
  24.      Hintergrund : #fff ;
  25.      Höhe : 150px ;
  26.      Rand : 0 automatisch ;
  27.      Position : relativ ;
  28.      oben : – 20px ;
  29.      Randradius : 50 %;
  30. }
  31.   

Schenken Sie „Dabai“ ein Herz, das das Leben symbolisiert:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. #Herz {
  2.    Breite : 25px ;
  3.    Höhe : 25px ;
  4.    Rand - Radius: 50 %;
  5.    Position : relativ ;
  6.   
  7.    /*Schatteneffekt um den Rand hinzufügen*/   
  8. Kastenschatten: 2px   5px   2px   #ccc   Einschub ;
  9.   
  10.    rechts rechts : - 115px ;
  11.    oben : 40px ;
  12.    Z-Index : 111;
  13.    Rand : 1px   solide   #ccc ;
  14. }
  15.   

Nun sieht das „Dabai“ so aus:

Hände und Füße sind noch nicht da, so süß... "Dabai" braucht einen warmen Arm:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. #linker -Arm,
  2. #rechter -Arm{
  3.      Höhe : 270px ;
  4.      Breite : 120px ;
  5.      Randradius : 50 %;
  6.      Hintergrund : #fff ;
  7.      Rand : 0 automatisch ;
  8.      Position : relativ ;
  9.      oben : -350px ;
  10.      links : - 100px ;
  11. transformieren: drehen (20 Grad);
  12.      z-Index : -1;
  13. }
  14.   
  15. #rechter -Arm{
  16. transformieren: drehen (-20 Grad);
  17.      links : 100px ;
  18.      oben : – 620px ;
  19. }
  20.   

Noch keine Finger:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. #l-großer Finger,
  2. #r-großfinger{
  3.      Höhe : 50px ;
  4.      Breite : 20px ;
  5.      Randradius : 50 %;
  6.      Hintergrund : #fff ;
  7.      Position : relativ ;
  8.      oben : 250px ;
  9.      links : 50px ;
  10. transformieren: drehen (-50 Grad);
  11. }
  12.   
  13. #r-großfinger{
  14.      links : 50px ;
  15. transformieren: drehen (50 Grad);
  16. }
  17.   
  18. #l-kleinerfinger,
  19. #r-kleinfinger{
  20.      Höhe : 35px ;
  21.      Breite : 15px ;
  22.      Randradius : 50 %;
  23.      Hintergrund : #fff ;
  24.      Position : relativ ;
  25.      oben : 195px ;
  26.      links : 66px ;
  27. transformieren: drehen (-40 Grad);
  28. }
  29.   
  30. #r-kleinfinger{
  31.      Hintergrund : #fff ;
  32. transformieren: drehen (40 Grad);
  33.      oben : 195px ;
  34.      links : 37px ;
  35. }
  36.   

Etwas interessant:

Sie können es kaum erwarten, „Dabai“ Beine zu verleihen?

CSS- CodeInhalt in die Zwischenablage kopieren
  1. #linkes -Bein,
  2. #rechtes -Bein{
  3.      Höhe : 170px ;
  4.      Breite : 90px ;
  5.      Rand - Radius: 40 % 30 % 10px 45 %;
  6.      Hintergrund : #fff ;
  7.      Position : relativ ;
  8.      oben : – 640px ;
  9.      links : - 45px ;
  10. transformieren: drehen (-1 Grad);
  11.      z-Index : -2;
  12.      Rand : 0 automatisch ;
  13. }
  14.   
  15. #rechtes -Bein{
  16.      Hintergrund : #fff ;
  17.      Rand - Radius: 30 % 40 % 45 % 10px ;
  18.      Rand : 0 automatisch ;
  19.      oben : – 810px ;
  20.      links : 50px ;
  21. transformieren: drehen (1 Grad);
  22. }
  23.   

duang~ duang~ duang~ Stunt abgeschlossen!

Dein Schatz Dabai ist hier an deiner Seite, fühlst du dich nicht sicher?

<<:  Beispielcode für die Projektbereitstellung zur Trennung von Front-End und Back-End in Flask und Vue

>>:  Warum sollte CSS im Head-Tag platziert werden?

Artikel empfehlen

Detaillierte Erklärung zur Verwendung von Javascript zur Behandlung allgemeiner Ereignisse

Inhaltsverzeichnis 1. Formularereignisse 2. Mause...

Mysql kann keine nicht aggregierten Spalten auswählen

1. Einleitung Ich habe mein Blog kürzlich aktuali...

So entfernen Sie in Linux ganz einfach installierte Quellpakete

Schritt 1: Stow installieren In diesem Beispiel v...

Nofollow sorgt dafür, dass die Links in Kommentaren und Nachrichten wirklich funktionieren

Kommentare und Nachrichten waren ursprünglich ein...

Implementierungsmethode für den React State-Zustand und Lebenszyklus

1. Methoden zur Implementierung von Komponenten:組...

So installieren Sie MySQL 8.0.13 in Alibaba Cloud CentOS 7

1. Laden Sie das MySQL-Installationspaket herunte...

So passen Sie Docker-Images mit Dockerfile an

Anpassen von Bildern mit Dockerfile Unter Bildanp...

Detaillierte Erklärung von sechs mit JavaScript implementierten Karusselleffekten für Webseitenbilder

Inhaltsverzeichnis 1. Wenn die Maus über das Karu...

Tutorial zum Erstellen eines SVN-Servers mit Docker

SVN ist die Abkürzung für Subversion, ein Open-So...

Vue implementiert die Anforderung des Ziehens und Ablegens dynamisch generierter Komponenten

Inhaltsverzeichnis Produktanforderungen Ideen Pro...

So erstellen Sie MySQL-Indizes richtig

Die Indizierung ähnelt dem Erstellen bibliografis...

Fassen Sie die Probleme zusammen, die bei der Verwendung der Vue Element-Benutzeroberfläche auftreten

Inhaltsverzeichnis 1. DateTimePicker Datumsauswah...

Vue Element UI-Komponente für benutzerdefinierte Beschreibungsliste

In diesem Artikelbeispiel wird der spezifische Co...

Heute werde ich einige seltene, aber nützliche JS-Techniken teilen

1. Zurück-Button Verwenden Sie history.back(), um...

Einführung in HTML für Frontend-Entwickler

1 Einführung in HTML 1.1 Erste Erfahrungen mit Co...