Use HTML and CSS to create your own warm man "Dabai"

Use HTML and CSS to create your own warm man "Dabai"

The final result is like this, isn’t it cute…

PS: It’s best if you have some knowledge of HTML and CSS, but it doesn’t matter if you are a newbie, it’s also okay for a newbie to meet a “newbie”!

1. Preparation

Go to the /home/shiyanlou/ directory and create a new blank document:

Name it Baymax.html (other names are OK, but the suffix must be .html):

Use gedit to open and prepare to edit the code:

2. Write HTML

Fill in the following code:

XML/HTML CodeCopy content to clipboard
  1. <!doctype html >   
  2. < html >   
  3.     < head > < meta   charset = "utf-8" > < title > Baymax </ title > </ head >   
  4. < body >   
  5.   
  6.       < div   id = "baymax" >   
  7.   
  8.          <!-- Define the head, including two eyes and mouth -->   
  9.          < div   id = "head" >   
  10.              < div   id = "eye" > </ div >   
  11.              < div   id = "eye2" > </ div >   
  12.              < div   id = "mouth" > </ div >   
  13.          </ div >   
  14.   
  15.          <!-- Defines the torso, including the heart -->   
  16.          < div   id = "torso" >   
  17.              < div   id = "heart" > </ div >   
  18.          </ div >   
  19.   
  20.          <!-- Defines the belly, including the cover (the connection with the torso) -->   
  21.          < div   id = "belly" >   
  22.              < div   id = "cover" > </ div >   
  23.          </ div >   
  24.   
  25.          <!-- Define the left arm, including two fingers, one large and one small -->   
  26.          < div   id = "left-arm" >   
  27.              < div   id = "l-bigfinger" > </ div >   
  28.              < div   id = "l-smallfinger" > </ div >   
  29.          </ div >   
  30.   
  31.          <!-- Define the right arm, also including two fingers, one large and one small -->   
  32.          < div   id = "right-arm" >   
  33.              < div   id = "r-bigfinger" > </ div >   
  34.              < div   id = "r-smallfinger" > </ div >   
  35.          </ div >   
  36.   
  37.          <!-- define left leg -->   
  38.          < div   id = "left-leg" > </ div >   
  39.   
  40.          <!-- define right leg -->   
  41.          < div   id = "right-leg" > </ div >   
  42.   
  43.      </ div >   
  44. </ body >   
  45. < html >   
  46.   

3. Add CSS styles

We have used HTML to define the various elements of "Dabai". Now we need to use CSS to draw its style appearance.

Since "Dabai" is white, we set the background to a dark color for easier identification.

Then first the head:

CSS CodeCopy content to clipboard
  1. body {
  2.      background : #595959 ;
  3. }
  4.   
  5. #baymax {
  6.      /*Set to center*/        
  7.      margin : 0 auto ;
  8.   
  9.      /*high*/       
  10.      height : 600px ;
  11.   
  12.      /*Hide overflow*/        
  13.      overflow : hidden ;
  14. }
  15.   
  16. #head {
  17.      height : 64px ;
  18.      width : 100px ;
  19.   
  20.      /*Define the shape of the rounded corners in percentage*/        
  21.      border -radius: 50%;
  22.   
  23.      /*background*/        
  24.      background : #fff ;
  25.      margin : 0 auto ;
  26.      margin-bottom : - 20px ;
  27.   
  28.      /*Set the style of the bottom border*/        
  29.      border-bottom : 5px   solid   #e0e0e0 ;
  30.   
  31.      /*Attribute sets the stacking order of elements; elements with a higher stacking order will always be in front of elements with a lower stacking order*/        
  32.      z-index : 100;
  33.   
  34.      /*Generate relatively positioned elements*/        
  35.      position : relative ;
  36. }
  37.   

Effect preview:

Let’s add the eyes and mouth!

CSS CodeCopy content to clipboard
  1. #eye ,
  2. #eye2 {
  3.      width : 11px ;
  4.      height : 13px ;
  5.      background : #282828 ;
  6.      border -radius: 50%;
  7.      position : relative ;
  8.      top : 30px ;
  9.      left : 27px ;
  10.   
  11.      /*Rotate the element*/        
  12. transform: rotate(8deg);
  13. }
  14.   
  15. #eye2 {
  16.      /* Make it rotationally symmetric */        
  17. transform: rotate(-8deg);
  18.      left : 69px ; top : 17px ;
  19. }
  20.   
  21. #mouth {
  22.      width : 38px ;
  23.      height : 1.5px ;
  24.      background : #282828 ;
  25.      position : relative ;
  26.      left : 34px ;
  27.      top : 10px ;
  28. }
  29.   

A mini "Dabai" takes shape:

Next up is the torso and abdomen:

CSS CodeCopy content to clipboard
  1. #torso ,
  2. #belly {
  3.      margin : 0 auto ;
  4.      height : 200px ;
  5.      width : 180px ;
  6.      background : #fff ;
  7.      border -radius: 47%;
  8.   
  9.      /*Set border*/        
  10.      border : 5px   solid   #e0e0e0 ;
  11.      border-top : none ;
  12.      z-index : 1;
  13. }
  14.   
  15. #belly {
  16.      height : 300px ;
  17.      width : 245px ;
  18.      margin-top : -140px ;
  19.      z-index : 5;
  20. }
  21.   
  22. #cover {
  23.      width : 190px ;
  24.      background : #fff ;
  25.      height : 150px ;
  26.      margin : 0 auto ;
  27.      position : relative ;
  28.      top : - 20px ;
  29.      border -radius: 50%;
  30. }
  31.   

Give "Dabai" a heart that symbolizes life:

CSS CodeCopy content to clipboard
  1. #heart {
  2.    width : 25px ;
  3.    height : 25px ;
  4.    border -radius:50%;
  5.    position : relative ;
  6.   
  7.    /*Add shadow effect around the border*/   
  8. box-shadow: 2px   5px   2px   #ccc   inset ;
  9.   
  10.    right right :- 115px ;
  11.    top : 40px ;
  12.    z-index :111;
  13.    border : 1px   solid   #ccc ;
  14. }
  15.   

Now the "Dabai" looks like this:

There are no hands or feet yet, so cute... "Dabai" needs a warm arm:

CSS CodeCopy content to clipboard
  1. #left -arm,
  2. #right -arm{
  3.      height : 270px ;
  4.      width : 120px ;
  5.      border -radius: 50%;
  6.      background : #fff ;
  7.      margin : 0 auto ;
  8.      position : relative ;
  9.      top : -350px ;
  10.      left : - 100px ;
  11. transform: rotate(20deg);
  12.      z-index : -1;
  13. }
  14.   
  15. #right -arm{
  16. transform: rotate(-20deg);
  17.      left : 100px ;
  18.      top : - 620px ;
  19. }
  20.   

No fingers yet:

CSS CodeCopy content to clipboard
  1. #l-bigfinger,
  2. #r-bigfinger{
  3.      height : 50px ;
  4.      width : 20px ;
  5.      border -radius: 50%;
  6.      background : #fff ;
  7.      position : relative ;
  8.      top : 250px ;
  9.      left : 50px ;
  10. transform: rotate(-50deg);
  11. }
  12.   
  13. #r-bigfinger{
  14.      left : 50px ;
  15. transform: rotate(50deg);
  16. }
  17.   
  18. #l-smallfinger,
  19. #r-smallfinger{
  20.      height : 35px ;
  21.      width : 15px ;
  22.      border -radius: 50%;
  23.      background : #fff ;
  24.      position : relative ;
  25.      top : 195px ;
  26.      left : 66px ;
  27. transform: rotate(-40deg);
  28. }
  29.   
  30. #r-smallfinger{
  31.      background : #fff ;
  32. transform: rotate(40deg);
  33.      top : 195px ;
  34.      left : 37px ;
  35. }
  36.   

A bit interesting:

Can’t wait to add legs to “Dabai”?

CSS CodeCopy content to clipboard
  1. #left -leg,
  2. #right -leg{
  3.      height : 170px ;
  4.      width : 90px ;
  5.      border -radius: 40% 30% 10px 45%;
  6.      background : #fff ;
  7.      position : relative ;
  8.      top : - 640px ;
  9.      left : - 45px ;
  10. transform: rotate(-1deg);
  11.      z-index : -2;
  12.      margin : 0 auto ;
  13. }
  14.   
  15. #right -leg{
  16.      background : #fff ;
  17.      border -radius:30% 40% 45% 10px ;
  18.      margin : 0 auto ;
  19.      top : - 810px ;
  20.      left : 50px ;
  21. transform: rotate(1deg);
  22. }
  23.   

duang~ duang~ duang~ Stunt completed!

Your sweetheart Dabai is here by your side, don’t you feel safe?

<<:  MySQL essential basics: grouping function, aggregate function, grouping query detailed explanation

>>:  Solution to web page confusion caused by web page FOUC problem

Recommend

How to build svn server in linux

1: Install SVN yum install -y subversion 2. Creat...

Mysql join query syntax and examples

Connection query: It is the result of connecting ...

Detailed explanation of MySql installation and login

Check if MySQL is already installed in Linux sudo...

Bootstrap 3.0 study notes buttons and drop-down menus

The previous article was a simple review of the B...

Solve the problem of "Welcome to nginx on Fedora!" after installing nginx on Centos7, and there is no default.conf file in the conf.d directory

Problem Description Install nginx on Tencent Clou...

Solution to the problem that MySQL in Windows system cannot input and display Chinese

Step 1: Use Notepad to open the "my.ini"...

How to monitor Tomcat using LambdaProbe

Introduction: Lambda Probe (formerly known as Tom...

15 Linux Command Aliases That Will Save You Time

Preface In the process of managing and maintainin...

ElementUI component el-dropdown (pitfall)

Select and change: click to display the current v...

Problems with changing password and connecting to Navicat when installing and using MySQL 8.0.16 under Windows 7

I encountered several problems when installing My...

Specific method of viewing user authorization information in mysql

Specific method: 1. Open Command Prompt 2. Enter ...

The use and difference between JavaScript pseudo-array and array

Pseudo-arrays and arrays In JavaScript, except fo...

Detailed explanation of the writing order and execution order of Mysql series SQL query statements

Table of contents 1. The writing order of a compl...

How to install MySQL 5.7 on Ubuntu and configure the data storage path

1. Install MySQL This article is installed via AP...

Simple implementation of mini-vue rendering

Table of contents Preface Target first step: Step...