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

jQuery Canvas generiert ein Poster mit einem QR-Code

In diesem Artikel wird der spezifische Code zur V...

Zusammenfassung gängiger SQL-Anweisungen in MySQL

1. MySQL-Exportdatei: SELECT `pe2e_user_to_compan...

Einige Referenzen zu Farben in HTML

In HTML werden Farben auf zwei Arten dargestellt. ...

Analyse der Informationsarchitektur von Facebook

<br />Original: http://uicom.net/blog/?p=762...

Eine kurze Analyse der MySQL PHP-Syntax

Schauen wir uns zunächst die grundlegende Syntax ...

Verwenden Sie Standard-DL-, DT- und DD-Tags, um Tabellenlisten zu verwerfen

Heutzutage beginnen immer mehr Front-End-Entwickle...

Detaillierte Erklärung des Beispiels von Connect auf der Socket (TCP)-Clientseite aus dem Linux-Quellcode

Vorwort Der Autor war schon immer der Meinung, da...

Nginx-Signalsteuerung

Einführung in Nginx Nginx ist ein leistungsstarke...

Hinweise zu Fallstricken bei Vuex und Pinia in Vue3

Inhaltsverzeichnis einführen Installation und Ver...

Beispiel für die Verwendung eines manipulationssicheren JavaScript-Objekts

Inhaltsverzeichnis Manipulationssicheres Javascri...

Iframe-Parameter mit Anweisungen und Beispielen

<iframe src=”test.jsp” Breite=”100″ Höhe=”50″ ...

14 Möglichkeiten zum Erstellen von Website-Inhalten, die Ihre Besucher fesseln

Wenn ich im Internet surfe, sehe ich oft Websites...

Verwenden Sie CSS3s webkit-box-reflect geschickt, um verschiedene dynamische Effekte zu erzielen

In einem Artikel vor langer Zeit habe ich über di...

Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen

Wenn ein Webprojekt immer größer wird, werden sei...

Eine kurze Analyse der vsftpd-Dienstkonfiguration unter Linux (anonym, Benutzer, virtueller Benutzer)

vsftpd Übersicht vsftpd ist die Abkürzung für „ve...