欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

CSS达成自适应宽度的菜单

企业模板

  这是一款基于CSS塑造的自适应宽度的按钮成效代码,本成效你可以说它是菜单,也可以说它是一个CSS按钮的写法实例,不知你是不是发现,菜单项的长宽可以自适应文字的多少,文字越多,它就越长,文字越少,它就越短,非常智能吧。像这种可以自适应的菜单,其实用性大大增强,而且代码也挺简单,推荐给大伙参考。

  具体代码如下:

  

  <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

  "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <title>按钮</title>

  </head>

  <body>

  <styletype="text/css">

  .nav{overflow:hidden;position:absolute;}

  .nava{margin:02px;float:left;line-height:24px;text-decoration:none;background:-webkit-gradient(linear,00,0100%,from(#f4f4f4),to(#ebeaea));background:-moz-linear-gradient(TOP,#f4f4f4,#ebeaea);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f4f4f4,endColorstr=#ebeaea,grandientType=1);border:solid1px#cccdce;color:#333;font-weight:bold;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}

  .navaspan{display:inline-block;padding:022px;border:solid1px#fff;cursor:pointer;}

  .nava:hover{text-decoration:none;color:#fff;background:-webkit-gradient(linear,00,0100%,from(#ef2b10),to(#d91c02));background:-moz-linear-gradient(TOP,#ef2b10,#d91c02);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ef2b10,endColorstr=#d91c02,grandientType=1);border:solid1px#ce2100;}

  .nava:hoverspan{border:solid1px#fa6058;}

  </style>

  <pclass="nav">

  <ahref="#"><span>首页</span></a>

  <ahref="#"><span>网站首页</span></a>

  <ahref="#"><span>CSS</span></a>

  <ahref="#"><span>CSS布局</span></a>

  <ahref="www.php.cn"><span>CSS布局</span></a>

  <ahref="#"><span>CSS布局</span></a>

  </p>

  </body>

  </html>


本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.srgoc.cn 关注: 时间:2022-05-10 10:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/CSS/CSS3/20220510/14142.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧