介绍 & lt; !DOCTYPE HTML公众“-//W3C//DTD HTML 4.01过渡//EN"
“http://www.w3.org/TR/html4/loose.dtd"比;
& lt; html>
& lt; head>
& lt; title>按钮& lt;/title>
& lt;/head>
& lt; body>
& lt;风格类型=拔谋?css"比;
.nav{溢出:隐藏;:绝对;}
.nav{优势:0 2 px;浮动:离开,行高:24 px;文字修饰:没有;背景:-webkit-gradient(线性,0 0 0 100%,从(# f4f4f4) (# ebeaea));背景:-moz-linear-gradient(顶部,# f4f4f4, # ebeaea);过滤器:progid: DXImageTransform.Microsoft.gradient (startColorstr=# f4f4f4 endColorstr=# ebeaea grandientType=1);边界:固体1 px # cccdce;颜色:# 333;粗细:大胆;-moz-border-radius: 2 px; -webkit-border-radius: 2 px; border - radius: 2 px;}
.nav跨度{显示:inline-block;填充:0 px 22;边界:固体1 px # fff;游标:指针;}
.nav答:悬停{文字修饰:没有,颜色:# fff;背景:-webkit-gradient(线性,0 0 0 100%,从(# ef2b10) (# d91c02));背景:-moz-linear-gradient(顶部,# ef2b10, # d91c02);过滤器:progid: DXImageTransform.Microsoft.gradient (startColorstr=# ef2b10 endColorstr=# d91c02 grandientType=1);边界:固体1 px # ce2100;}
.nav答:悬停跨度{边界:固体1 px # fa6058;}
& lt;/style>
& lt; div类=皀av"祝辞
https://www.yisu.com/zixun/& lt; a href=" # "> 首页
网站首页
CSS
CSS布局
CSS布局
CSS布局
小编给大家分享一下CSS如何实现自适应宽度的菜单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
这是一款基于CSS打造的自适应宽度的按钮效果代码,本效果你可以说它是菜单,也可以说它是一个CSS按钮的写法实例,不知你是否发现,菜单项的长宽可以自适应文字的多少,文字越多,它就越长,文字越少,它就越短,很智能吧。像这种可以自适应的菜单,其实用性大大增强,而且代码也挺简洁,分享给大家参考。
具体代码如下: