Maison > Article > interface Web > Implémenter un menu à largeur adaptative avec CSS (exemple de code)
Implémenter un menu à largeur adaptative avec CSS (exemple de code)
- 云罗郡主original
- 2018-11-26 15:28:292389parcourir
Ce que cet article vous apporte concerne la mise en œuvre de menus à largeur adaptative avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Il s'agit d'un code d'effet de bouton à largeur adaptative basé sur CSS. Vous pouvez dire que cet effet est un menu, ou vous pouvez dire que c'est un exemple de la façon d'écrire un bouton CSS. J'ai découvert que les éléments de menu La longueur et la largeur peuvent s'adapter à la quantité de texte. Plus il y a de texte, plus il est long, et moins il y a de texte, plus il est court. Un menu adaptatif comme celui-ci a considérablement amélioré la praticité, et le code est également assez concis. J'aimerais le partager avec vous pour votre référence.
Le code spécifique est le suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>按钮</title>
</head>
<body>
<style type="text/css">
.nav{overflow:hidden;position:absolute;}
.nav a{ margin:0 2px;float:left;line-height:24px;text-decoration:none;background:-webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ebeaea));background:-moz-linear-gradient(top, #f4f4f4,#ebeaea);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f4f4f4,endColorstr=#ebeaea,grandientType=1); border:solid 1px #cccdce;color:#333; font-weight:bold;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.nav a span{display:inline-block;padding:0 22px; border:solid 1px #fff;cursor:pointer;}
.nav a:hover{text-decoration:none;color:#fff;background:-webkit-gradient(linear, 0 0, 0 100%, from(#ef2b10), to(#d91c02));background:-moz-linear-gradient(top, #ef2b10,#d91c02);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ef2b10,endColorstr=#d91c02,grandientType=1); border:solid 1px #ce2100;}
.nav a:hover span{border:solid 1px #fa6058;}
</style>
<div class="nav">
<a href="#"><span>首页</span></a>
<a href="#"><span>网站首页</span></a>
<a href="#"><span>CSS</span></a>
<a href="#"><span>CSS布局</span></a>
<a href="www.php.cn"><span>CSS布局</span></a>
<a href="#"><span>CSS布局</span></a>
</div>
</body>
</html>L'effet est le suivant :
Ce qui précède est une introduction complète à le menu CSS à largeur adaptative , si vous voulez en savoir plus sur le Tutoriel CSS, veuillez faire attention au site Web PHP chinois.
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!