communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > le corps du texte

Utilisez HTML et CSS pour créer votre propre homme chaleureux 'Dabai'_HTML/Xhtml_Production de pages Web

WBOY
Libérer： 2016-05-16 16:36:01
original
1227 Les gens l'ont consulté

Le résultat final est comme ça, n'est-ce pas mignon...

PS : Il est préférable d'avoir une certaine compréhension du HTML et du CSS, mais peu importe si vous êtes novice, c'est bien pour un novice de rencontrer « Dabai » !

1.Préparation

Allez dans le répertoire /home/shiyanlou/ et créez un nouveau document vierge :

Nommé Baymax.html (d'autres noms sont également acceptables, mais le suffixe doit être .html) :

Ouvrez avec gedit et préparez-vous à modifier le code :

2. Écrire du HTML

Remplissez le code suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
  2. <html>
  3.  <tête><méta charset="utf-8"><titre>Baymaxtitre>tête> 
  4. <corps>
  6.  <div id="baymax" >
  9.  <div id="tête" >
  10.  <div id="oeil" >div>
  11.  <div id="eye2" >div>
  12.  <div id="bouche" >div>
  13.  div>
  15.  
  16.  <div id="torse" >
  17.  <div id="coeur" >div>
  18.  div>
  21.  <div id="ventre" >
  22.  <div id="couverture" >div>
  23.  div>
  26.  <div id="gauche- bras"> 
  27.  <div id="l- gros doigt">div>
  28.  <div id="l- petit doigt">div>
  29.  div>
  31.  
  32.  <div id="droit- bras"> 
  33.  <div id="r- gros doigt">div>
  34.  <div id="r- petit doigt">div>
  35.  div>
  38.  <div id="gauche- jambe">div>
  41.  <div id="droit- jambe">div>
  43.  div> 
  44. corps>
  45. <html>

3. Ajouter un style CSS

Nous avons utilisé HTML pour définir chaque élément de "Dabai", et maintenant nous devons utiliser CSS pour dessiner son apparence de style.

Puisque "Dabai" est blanc, afin de faciliter son identification, nous avons défini l'arrière-plan sur une couleur sombre.

Puis d'abord la tête :

Code CSSCopier le contenu dans le presse-papiers
  1. corps {
  2. fond : #595959;
    3. }
  5. #baymax{
    6.  
  6. /*Placer au centre*/ 
  7. marge : 0 auto ;
    9.  
  9. /*Hauteur*/ 
  10. hauteur : 600px;
  11.  
    12. /*Masquer le débordement*/
  12.  
    13. débordement
  13.  : caché; }
    16. #head
  16. {  
    17. hauteur
  17.  : 64 px; 
    18. largeur
  18.  : 100px;
  19.  
    20. /*Définir la forme du filet en pourcentage*/
  20.  
    21. bordure
  21. -rayon : 50%
  22.  
    23. /*Contexte*/
  23.  
    24. fond
  24.  : #fff; marge
    25.  : 0
  25. auto ;  marge-bas
    26.  : -
  26. 20px; 
    27.  
  27. /*Définir le style de la bordure inférieure*/
    28.  
  28. bordure-bas
    29. :
  29. 5px solide #e0e0e0
    30.  
  30. /*L'attribut définit l'ordre d'empilement des éléments ; les éléments avec un ordre d'empilement supérieur seront toujours devant les éléments avec un ordre d'empilement inférieur*/
    31.  
  31. z-index
    32.  : 100 ;
    33.  
  33. /*Générer des éléments relativement positionnés*/
    34.  
  34. position
    35. :
  35. relative; }

  36. Aperçu de l'effet :

    Dépêchez-vous et ajoutez des yeux et de la bouche !

    Code CSSCopier le contenu dans le presse-papiers
    1. #oeil,
    2. #oeil2{
    3. largeur : 11px;
    4.  hauteur : 13px; 
    5. fond : #282828;
    6. bordure-rayon : 50%
    7. position : relative;
      8. haut
    8.  : 30px  
      9. gauche
    9.  : 27px; 
    10.  
      11. /*Faire pivoter l'élément*/
    11.   transformation : rotation (8deg);
    12. }
      15. #oeil2
    15. {  
      16. /*Rendez-le symétrique en rotation*/
    16.   transformation : rotation (-8deg);
      18. gauche
    18.  : 69px haut : 17px }
      21. #bouche
    21. { 
      22. largeur
    22.  : 38px;  
      23. hauteur
    23.  : 1.5px; 
      24. fond
    24. : #282828; position
      25. :
    25. relative;  gauche :
      26. 34px
    26. ;   haut :
      27. 10px
    27. ;  }
      29. Un mini "Baymax", le prototype apparaît :
    Vient ensuite le torse et l'abdomen :

    Code CSS

    Copier le contenu dans le presse-papiers

    1. #torse,   
    2. #ventre{   
    3.     marge : 0 auto ;   
    4.     hauteur : 200px ;   
    5.     largeur : 180px ;   
    6.     fond : #fff ;   
    7.     bordure-rayon : 47 % ;   
    8.   
    9.     /*设置边框*/       
    10.     bordure : 5px solide #e0e0e0;   
    11.     border-top : aucun ;   
    12.     z-index : 1 ;   
    13. }   
    14.   
    15. #ventre{   
    16.     hauteur : 300px ;   
    17.     largeur : 245px ;   
    18.     marge supérieure : -140px ;   
    19.     z-index : 5 ;   
    20. }   
    21.   
    22. #couverture{   
    23.     largeur : 190px ;   
    24.     fond : #fff ;   
    25.     hauteur : 150px ;   
    26.     marge : 0 auto ;   
    27.     position : relative ;   
    28.     haut : -20px ;   
    29.     bordure-rayon : 50 % ;   
    30. }   
    31.   

赋予「大白」象征生命的心脏：

Code CSS复制内容到剪贴板
  1. #coeur{ 
  2. largeur :25px
    3. ;
  3. hauteur :25px
    4. ;
  4. bordure-rayon : 50%
  5. position :relative
    6. ;
  7. /*Ajouter un effet d'ombre autour de la bordure*/
  8. box-shadow:2px 5px 2px #ccc encart
  10. droitedroite:-115px;
  11. haut :40px
  12. z-index:111
  13. bordure:1px solide #ccc
    14. }
Voici à quoi ressemble "Baymax" maintenant :

Il n'a pas encore de mains ni de pieds, il est trop mignon... "Baymax" a besoin de bras chauds :

Code CSS
Copier le contenu dans le presse-papiers
  1. #gauche-bras,  
  2. #right-bras{   
  3.     hauteur : 270px ;   
  4.     largeur : 120px ;   
  5.     bordure-rayon : 50 % ;   
  6.     fond : #fff ;   
  7.     marge : 0 auto ;   
  8.     position : relative ;   
  9.     haut : -350px ;   
  10.     gauche : -100px;   
  11.     transformation : rotation (20deg);   
  12.     z-index : -1 ;   
  13. }   
  14.   
  15. #right-bras{   
  16.     transformation : rotation (-20deg);   
  17.     gauche : 100px ;   
  18.     haut : -620px ;   
  19. }   
  20.   

还没有手指头呢：

Code CSS复制内容到剪贴板
  1. #l-bigfinger,   
  2. #r-bigfinger{   
  3.     hauteur : 50px ;   
  4.     largeur : 20px ;   
  5.     bordure-rayon : 50 % ;   
  6.     fond : #fff ;   
  7.     position : relative ;   
  8.     haut : 250px ;   
  9.     gauche : 50px ;   
  10.     transformation : rotation (-50deg);   
  11. }   
  12.   
  13. #r-bigfinger{   
  14.     gauche : 50px ;   
  15.     transformation : rotation (50 deg);   
  16. }   
  17.   
  18. #l-smallfinger,   
  19. #r-smallfinger{   
  20.     hauteur : 35px ;   
  21.     largeur : 15px ;   
  22.     bordure-rayon : 50 % ;   
  23.     fond : #fff ;   
  24.     position : relative ;   
  25.     haut : 195px ;   
  26.     gauche : 66px ;   
  27.     transformation : rotation (-40deg);   
  28. }   
  29.   
  30. #r-smallfinger{   
  31.     fond : #fff ;   
  32.     transformation : rotation (40 deg);   
  33.     haut : 195px ;   
  34.     gauche : 37px ;   
  35. }   
  36.   

有点意思了：

迫不及待要给「大白」加上腿了吧：

Code CSS复制内容到剪贴板
  1. #gauche-jambe,   
  2. #droite-jambe{   
  3.     hauteur : 170px ;   
  4.     largeur : 90px ;   
  5.     bordure-rayon : 40% 30% 10px 45% ;   
  6.     fond : #fff ;   
  7.     position : relative ;   
  8.     haut : -640px ;   
  9.     gauche : -45px ;   
  10.     transformation : rotation (-1deg);   
  11.     z-index : -2 ;   
  12.     marge : 0 auto ;   
  13. }   
  14.   
  15. #droite-jambe{   
  16.     fond : #fff ;   
  17.     bordure-radius:30% 40% 45% 10px;   
  18.     marge : 0 auto ;   
  19.     haut : -810px ;   
  20.     gauche : 50px ;   
  21.     transformation : rotate(1deg);   
  22. }   
  23.   

duang~ duang~ duang~ 特技完成！

属于你的暖男大白来到了你的身边，是不是特有安全感哦！

Étiquettes associées：
css html
source：php.cn
Article précédent：Méthode de mise en œuvre de la disposition de la grille HTML à neuf carrés_HTML/Xhtml_Production de pages Web Article suivant：Explication détaillée de la fonction de téléchargement HTML_HTML/Xhtml_Production de pages Web
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...
Depuis 2024-04-16 09:34:16
0
0
4687
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal