Maison > Article > interface Web > Comment utiliser HTML et CSS pour créer du texte clair
Comment utiliser HTML et CSS pour créer du texte clair
- php中世界最好的语言original
- 2018-01-24 09:40:302575parcourir
Cette fois, je vais vous montrer comment utiliser HTML et CSS pour créer une compréhension claire. Quelles sont les précautions pour utiliser HTML et CSS pour créer une compréhension claire. Ce qui suit est un cas pratique, voyons. jetez un oeil.
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 :
Nommez-le Baymax.html (autre noms C'est aussi possible, mais le suffixe doit être .html) :
Ouvrez avec gedit et préparez-vous à éditer le code :
2. Écrivez du HTML
Remplissez le code suivant :
<!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. Ajouter des styles CSS
Nous avons utilisé du 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.
Ensuite, il y a d'abord la tête :
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;
}Ajoutons rapidement les yeux et la bouche !
#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;
}Vient ensuite le torse et l'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%;
}Donnez à "Baymax" un cœur qui symbolise la vie :
#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;
}Il n'y a ni mains ni pieds pourtant, bizarre Tellement mignon... "Baymax" a besoin de bras chauds :
#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;
}Il n'a pas encore de doigts :
#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;
}J'ai hâte d'ajouter des jambes à " 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);
}Votre homme chaleureux Dabai est venu à vos côtés. Ne vous sentez-vous pas si en sécurité ?
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment utiliser les annotations de lignes horizontales et les commentaires de code en HTML
En HTML/XHTML Comment utiliser la balise d'image img
Comment modifier la couleur du texte par défaut de la zone de saisie
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!