Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Use HTML and CSS to create your own warm man 'Dabai'_HTML/Xhtml_Web page production

Use HTML and CSS to create your own warm man 'Dabai'_HTML/Xhtml_Web page production

WBOY
Release： 2016-05-16 16:36:01
Original
1240 people have browsed it

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

PS: You’d better have a certain understanding of HTML and CSS, but it doesn’t matter if you are a novice. It’s okay for a novice to meet “Dabai”!

1. Preparation

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

Named Baymax.html (other names are also acceptable, but the suffix must be .html):

Open with gedit and prepare to edit the code:

2. Writing HTML

Fill in the following code:

XML/HTML CodeCopy content to clipboard
  1. >
  2. <html>
  3.  <head><meta charset="utf-8"><title>Baymaxtitle>head> 
  4. <body>
  6.  <div id="baymax" >
  9.  <div id="head" >
  10.  <div id="eye" >div>
  11.  <div id="eye2" >div>
  12.  <div id="mouth" >div>
  13.  div>
  15.  
  16.  <div id="torso" >
  17.  <div id="heart" >div>
  18.  div>
  21.  <div id="belly" >
  22.  <div id="cover" >div>
  23.  div>
  26.  <div id="left- arm"> 
  27.  <div id="l- bigfinger">div>
  28.  <div id="l- smallfinger">div>
  29.  div>
  31.  
  32.  <div id="right- arm"> 
  33.  <div id="r- bigfinger">div>
  34.  <div id="r- smallfinger">div>
  35.  div>
  37.  
  38.  <div id="left- leg">div>
  41.  <div id="right- leg">div>
  43.  div> 
  44. body>
  45. <html>

3. Add CSS style

We have used HTML to define each element of "Dabai", and now we need to use CSS to draw its style appearance.

Since "Dabai" is white, in order to make it easier to identify, we set the background to a dark color.

Then first the head:

CSS CodeCopy content to clipboard
  1. body {
  2. background: #595959;
  3. }
  5. #baymax{
  6.  /*Set to center*/ 
  7. margin: 0 auto;
  9.  /*Height*/ 
  10. height: 600px;
  12.  /*Hide overflow*/ 
  13. overflow: hidden;
  14. }
  16. #head{
  17.  height: 64px; 
  18. width: 100px;
  20.  /*Define the shape of the fillet in percentage*/ 
  21. border-radius: 50%;
  23.  /*Background*/ 
  24. background: #fff;
  25. margin: 0 auto;
  26.  margin-bottom: -20px; 
  28.  /*Set the style of the lower border*/ 
  29. border-bottom: 5px solid #e0e0e0;
  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;
  34.  /*Generate relatively positioned elements*/ 
  35. position: relative;
  36. }

Effect preview:

Hurry up and add 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; 
  11.  /*Rotate the element*/ 
  12. transform: rotate(8deg);
  13. }
  15. #eye2{
  16.  /*Make it rotationally symmetrical*/ 
  17. transform: rotate(-8deg);
  18. left: 69px; top: 17px;
  19. }
  21. #mouth{ 
  22. width: 38px;
  23.  height: 1.5px; 
  24. background: #282828;
  25. position: relative;
  26.  left: 34px; 
  27.  top: 10px; 
  28. }

A mini "Baymax", the prototype appears:

Next 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.     /*设置边框*/       
  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.   

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

CSS Code复制内容到剪贴板
  1. #heart{ 
  2. width:25px;
  3. height:25px;
  4. border-radius:50%;
  5. position:relative;
  7. /*Add shadow effect around the border*/
  8. box-shadow:2px 5px 2px #ccc inset;
  10. rightright:-115px;
  11. top:40px;
  12. z-index:111;
  13. border:1px solid #ccc;
    14. }
This is what "Baymax" looks like now:

He doesn’t have any hands or feet yet, he’s so cute... “Baymax” needs warm arms:

CSS Code
Copy 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.   

还没有手指头呢：

CSS Code复制内容到剪贴板
  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.   

有点意思了：

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

CSS Code复制内容到剪贴板
  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~ 特技完成！

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

Related labels：
css html
source：php.cn
Previous article：Implementation method of HTML nine-square grid layout_HTML/Xhtml_Web page production Next article：Detailed explanation of html download function_HTML/Xhtml_Web page production
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template