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

Grundlegendes Lernprogramm zum Tabellen-Tag in HTML

Zusammensetzung der Tabellenbeschriftung Die Tabe...

Detailliertes Beispiel zum Einfügen benutzerdefinierter HTML-Datensätze im Quill-Editor

Wir schreiben bereits das Jahr 2020. Hungrige Men...

Eine vollständige Anleitung zur Docker-Befehlszeile (18 Dinge, die Sie wissen müssen)

Vorwort Ein Docker-Image besteht aus einer Docker...

MySQL-Anfänger können sich von den Problemen der Gruppierungs- und Aggregationsabfragen verabschieden

Inhaltsverzeichnis 1. Schematische Darstellung de...

Werfen wir einen Blick auf die Vorkompilierung von JavaScript (Zusammenfassung)

JS-Lauftrilogie js-Ausführungscode ist in drei Sc...

Tutorials der MySQL-Reihe für Anfänger

Inhaltsverzeichnis 1. Grundkonzepte und Grundbefe...

mysql teilt eine Datenzeile basierend auf Kommas in mehrere Zeilen auf

Inhaltsverzeichnis Trennwirkung Erläuterung der B...

So weisen Sie Feldern bei der MySQL-Abfrage Standardwerte zu

brauchen Wenn Sie ein Feld abfragen, müssen Sie e...

So löschen Sie den MySQL-Dienst vollständig (bereinigen Sie die Registrierung)

Vorwort Beim Installieren der ausführbaren Datei ...

Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios

Inhaltsverzeichnis Ideen Abfangen von Anfragen An...

Beispielcode für Datenbanksicherung in einer Docker-Umgebung (PostgreSQL, MySQL)

Inhaltsverzeichnis Posgresql-Sicherung/Wiederhers...

So verwenden Sie die ElementUI-Paginierungskomponente Paginierung in Vue

Die Verwendung der ElementUI-Paging-Komponente Pa...

So lösen Sie das Problem der Groß-/Kleinschreibung bei MySQL-Abfragen

Frage Als ich kürzlich ein praktisches Projekt mi...

So übertragen Sie Dateien zwischen Docker-Container und lokalem Computer

Zum Übertragen von Dateien zwischen dem Host und ...

Detaillierte MySQL-CRUD-Anweisungen zum Hinzufügen, Löschen, Ändern und Abfragen einer einzelnen Tabelle

MySQL-Anweisungen zum Hinzufügen, Löschen, Ändern...