Heim > Artikel > Web-Frontend > CSS implementiert den Menüschaltflächeneffekt mit adaptiver Breite

CSS implementiert den Menüschaltflächeneffekt mit adaptiver Breite

不言Original: 2018-06-25 14:56:531843Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Über CSS, um einen schönen Dropdown-Navigationseffekt zu erzielenNächster Artikel：Über CSS, um einen schönen Dropdown-Navigationseffekt zu erzielen

In Verbindung stehende Artikel

Mehr sehen