Maison >interface Web >tutoriel HTML >Comment implémenter du texte brut et des boutons avec des icônes en HTML+css
Comment implémenter du texte brut et des boutons avec des icônes en HTML+css
- php中世界最好的语言original
- 2018-01-24 09:56:502921parcourir
Cette fois, je vais vous montrer comment implémenter du texte pur et des boutons avec des icônes en utilisant Html+css. Quelles sont les précautions pour implémenter du texte pur et des boutons avec des icônes en utilisant Html+css. cas pratique. Jetons un coup d’oeil.
Cet article résume les méthodes d'implémentation de certains éléments de base de la page et sera mis à jour à l'avenir. Tout d’abord, la chose la plus courante que nous rencontrons est la découpe des boutons. Les boutons peuvent avoir de nombreuses apparences, mais ils peuvent généralement être divisés en boutons en texte brut et en boutons avec icônes. Parlons des méthodes d’implémentation de ces deux boutons.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>按钮写法</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
a:hover{text-decoration: none;}
.btn{
display: inline-block;
margin-top: 10px;
padding: 10px 24px;
border-radius: 4px;
background-color: #63b7ff;
color: #fff;
cursor: pointer;
}
.btn:hover{
background-color: #99c6ff;
}
.inbtn{
border: none;
}
.bubtn{
border: none;
}
.btn{
font-style: normal;
}
.bgbtn span{
margin-left: 10px;
padding-left: 20px;
background: url(images/edit.png) left center no-repeat;
}
.bgbtn02 img{
margin-bottom: -3px;
margin-right: 10px;
}
</style>
</head>
<body>
<!--<a>标签按钮-->
<a href="" class="btn">a标签按钮</a>
<!--<input>标签按钮-->
<input class="inbtn btn" type="button" value="input标签按钮"/>
<!--<button>标签按钮-->
<button class="bubtn btn">button标签按钮</button>
<!--任意标签按钮-->
<i class="ibtn btn">i标签按钮</i>
<!--带背景图标按钮-->
<a href="" class="bgbtn btn">
<span>带图标按钮</span>
</a>
<a href="" class="bgbtn02 btn">
<img src="images/edit.png"/>带图标按钮
</a>
</body>
</html>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 HTML et CSS pour rendre le texte clair
Quelles sont les balises couramment utilisées dans XHTML
Comment utiliser les annotations de lignes horizontales et les commentaires de code en HTML
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!