CSS implementiert den Menüschaltflächeneffekt mit adaptiver Breite-CSS-Tutorial-php.cn

CSS implementiert den Menüschaltflächeneffekt mit adaptiver Breite

不言

Freigeben： 2018-06-25 14:56:53

Original

1906 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Menüschaltflächeneffektcode für die adaptive Breite von CSS vorgestellt. Er analysiert die relevanten Einstellungstechniken von CSS für die adaptive Seitenbreite und bietet einen bestimmten Referenzwert

Das Beispiel in diesem Artikel beschreibt den CSS-Menüschaltflächeneffektcode, der die adaptive Breite implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein auf CSS basierender Schaltflächeneffektcode mit adaptiver Breite. Man kann sagen, dass es sich bei diesem Effekt um ein Menü handelt, oder man kann sagen, dass es sich um ein Beispiel für das Schreiben einer CSS-Schaltfläche handelt . Ich frage mich, ob Sie es entdeckt haben: Je mehr Text, desto länger ist es. Es ist sehr intelligent. Ein adaptives Menü wie dieses hat die Praktikabilität erheblich verbessert, und der Code ist auch recht prägnant. Ich möchte ihn Ihnen als Referenz zur Verfügung stellen.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

<!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>
<p class="nav">
<a href="#"><span>首页</span></a>
<a href="#"><span>网站首页</span></a>
<a href="#"><span>网页特效</span></a>
<a href="#"><span>超多脚本特效</span></a>
<a href="#"><span>脚本之家提供精品脚本下载</span></a>
<a href="#"><span>最新网页特效</span></a>
</p>
</body>
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Vielen Dank für das Lesen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonCSS implementiert den Menüschaltflächeneffekt mit adaptiver Breite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!