Home > Article > Web Front-end > How to use HTML and CSS to create clear text

How to use HTML and CSS to create clear text

php中世界最好的语言Original: 2018-01-24 09:40:302624browse

This time I will show you how to use HTML and CSS to create a clear understanding. What are the things to note?The following is a practical case, let's take a look.

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:

Name it Baymax.html (other names It’s also possible, but the suffix must be .html):

Open with gedit and prepare to edit the code:

2. Write HTML

Fill in the following code:

<!doctype html>  
<html>  
   <head><meta charset="utf-8"><title>Baymax</title></head>  
<body>  
  
     <div id="baymax">  
  
        <!-- 定义头部，包括两个眼睛、嘴 -->  
        <div id="head">  
            <div id="eye"></div>  
            <div id="eye2"></div>  
            <div id="mouth"></div>  
        </div>  
  
        <!-- 定义躯干，包括心脏 -->  
        <div id="torso">  
            <div id="heart"></div>  
        </div>  
  
        <!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->  
        <div id="belly">  
            <div id="cover"></div>  
        </div>  
  
        <!-- 定义左臂，包括一大一小两个手指 -->  
        <div id="left-arm">  
            <div id="l-bigfinger"></div>  
            <div id="l-smallfinger"></div>  
        </div>  
  
        <!-- 定义右臂，同样包括一大一小两个手指 -->  
        <div id="right-arm">  
            <div id="r-bigfinger"></div>  
            <div id="r-smallfinger"></div>  
        </div>  
  
        <!-- 定义左腿 -->  
        <div id="left-leg"></div>  
  
        <!-- 定义右腿 -->  
        <div id="right-leg"></div>  
  
    </div>  
</body>  
<html>

3. Add CSS styles

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 is the head:

body {   
    background: #595959;   
}   
  
#baymax{   
    /*设置为 居中*/       
    margin: 0 auto;   
  
    /*高度*/      
    height: 600px;   
  
    /*隐藏溢出*/       
    overflow: hidden;   
}   
  
#head{   
    height: 64px;   
    width: 100px;   
  
    /*以百分比定义圆角的形状*/       
    border-radius: 50%;   
  
    /*背景*/       
    background: #fff;   
    margin: 0 auto;   
    margin-bottom: -20px;   
  
    /*设置下边框的样式*/       
    border-bottom: 5px solid #e0e0e0;   
  
    /*属性设置元素的堆叠顺序；    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/       
    z-index: 100;   
  
    /*生成相对定位的元素*/       
    position: relative;   
}

Hurry up and add the eyes and mouth!

#eye,   
#eye2{   
    width: 11px;   
    height: 13px;   
    background: #282828;   
    border-radius: 50%;   
    position: relative;   
    top: 30px;   
    left: 27px;   
  
    /*旋转该元素*/       
    transform: rotate(8deg);   
}   
  
#eye2{   
    /*使其旋转对称*/       
    transform: rotate(-8deg);   
    left: 69px;    top: 17px;   
}   
  
#mouth{   
    width: 38px;   
    height: 1.5px;   
    background: #282828;   
    position: relative;   
    left: 34px;   
    top: 10px;   
}

Next is the torso and abdomen:

#torso,   
#belly{   
    margin: 0 auto;   
    height: 200px;   
    width: 180px;   
    background: #fff;   
    border-radius: 47%;   
  
    /*设置边框*/       
    border: 5px solid #e0e0e0;   
    border-top: none;   
    z-index: 1;   
}   
  
#belly{   
    height: 300px;   
    width: 245px;   
    margin-top: -140px;   
    z-index: 5;   
}   
  
#cover{   
    width: 190px;   
    background: #fff;   
    height: 150px;   
    margin: 0 auto;   
    position: relative;   
    top: -20px;   
    border-radius: 50%;   
}

Give "Baymax" a heart that symbolizes life:

#heart{     
  width:25px;    
  height:25px;    
  border-radius:50%;    
  position:relative;    
  
  /*向边框四周添加阴影效果*/  
  box-shadow:2px 5px 2px #ccc inset;    
  
  rightright:-115px;    
  top:40px;    
  z-index:111;    
  border:1px solid #ccc;   
}

There are no hands and feet yet, so cute and cute... ."Baymax" needs warm arms:

#left-arm,   
#right-arm{   
    height: 270px;   
    width: 120px;   
    border-radius: 50%;   
    background: #fff;   
    margin: 0 auto;   
    position: relative;   
    top: -350px;   
    left: -100px;   
    transform: rotate(20deg);   
    z-index: -1;   
}   
  
#right-arm{   
    transform: rotate(-20deg);   
    left: 100px;   
    top: -620px;   
}

He doesn't have fingers yet:

#l-bigfinger,   
#r-bigfinger{   
    height: 50px;   
    width: 20px;   
    border-radius: 50%;   
    background: #fff;   
    position: relative;   
    top: 250px;   
    left: 50px;   
    transform: rotate(-50deg);   
}   
  
#r-bigfinger{   
    left: 50px;   
    transform: rotate(50deg);   
}   
  
#l-smallfinger,   
#r-smallfinger{   
    height: 35px;   
    width: 15px;   
    border-radius: 50%;   
    background: #fff;   
    position: relative;   
    top: 195px;   
    left: 66px;   
    transform: rotate(-40deg);   
}   
  
#r-smallfinger{   
    background: #fff;   
    transform: rotate(40deg);   
    top: 195px;   
    left: 37px;   
}

Can't wait to add legs to "Baymax":

#left-leg,   
#right-leg{   
    height: 170px;   
    width: 90px;   
    border-radius: 40% 30% 10px 45%;   
    background: #fff;   
    position: relative;   
    top: -640px;   
    left: -45px;   
    transform: rotate(-1deg);   
    z-index: -2;   
    margin: 0 auto;   
}   
  
#right-leg{   
    background: #fff;   
    border-radius:30% 40% 45% 10px;   
    margin: 0 auto;   
    top: -810px;   
    left: 50px;   
    transform: rotate(1deg);   
}

Belongs to you The warm man Dabai has come to your side. Doesn’t it feel so safe?

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use HTML and CSS to create clear text

Related articles