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 der allgemeinen Verwendung von Pseudoklassen vor und nach in CSS3

Die Pseudoklasse „Before/After“ entspricht dem Ei...

Detaillierte Erläuterung der Idee zum Einrichten einer Abfangfunktion für die Anmeldeüberprüfung in Vue

Inhaltsverzeichnis 1. Lösung 2. Lassen Sie den Br...

Beispiel für eine gespeicherte MySQL-Prozedurmethode zum Zurückgeben mehrerer Werte

Dieser Artikel beschreibt anhand eines Beispiels,...

Informationen zur Auswahl des Uhrzeit-, Datums- und Zeichenfolgentyps in MySQL

Inhaltsverzeichnis 1. Verwendung von DATETIME und...

Detaillierte Erläuterung der Methoden zur Überprüfung und Verwaltung von MySQL-Benutzerrechten

Dieser Artikel veranschaulicht anhand von Beispie...

Detaillierte Erläuterung des Bereitstellungsprozesses von Docker Alibaba Cloud RocketMQ 4.5.1

Suchspiegel Docker-Suche Rocketmq Bildversion anz...

Sehen Sie sich den Befehl zum Ändern der MySQL-Tabellenstruktur an

Kurzbeschreibung Der Editor hat häufig Probleme m...

Hilfe zum Webdesign: Datenreferenz für Web-Schriftgrößen

<br />Der Inhalt wurde aus dem Internet repr...

Detailliertes Tutorial zur Installation von MariaDB auf CentOS 8

Das Datenbankverwaltungssystem MariaDB ist ein Zw...

Der eigentliche Prozess der Implementierung des Zahlenrätsels im WeChat-Applet

Inhaltsverzeichnis Funktionseinführung Rendern 1....

Sechs Tipps zur Verbesserung der Ladegeschwindigkeit von Webseiten

Zweitens hängt das Ranking von Schlüsselwörtern au...

Detailliertes Tutorial zur Installation von phpMyAdmin unter Ubuntu 18.04

Wir werden phpMyAdmin installieren, damit es mit ...

Detaillierte Erläuterung der Wiederverwendung und Erweiterung von Vue-Komponenten

Inhaltsverzeichnis Überblick Ist die Erweiterung ...

Elegante praktische Aufzeichnung der Einführung der Iconfont-Symbolbibliothek in Vue

Inhaltsverzeichnis Vorwort SVG generieren Einführ...

Miniprogramm zur Implementierung der Sieve-Lotterie

In diesem Artikelbeispiel wird der spezifische Co...