首页 > 其他分享 >CSS自适应宽度按钮

CSS自适应宽度按钮

时间:2022-12-26 15:39:05浏览次数:59  
标签:www http margin padding lanrentuku 按钮 宽度 com CSS


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd​​​">
<html xmlns="​​​http://www.w3.org/1999/xhtml​​​">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS自适应宽度圆角按钮 @5key.net</title>
<style>
*{margin:0; padding:0;}
body{padding:10px; font-size:12px;}
h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}
a{background:url(​​​http://www.lanrentuku.com/down/js/images/12447749840.gif​​​) left 0;  color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;}
a:hover{background:url(​​​http://www.lanrentuku.com/down/js/images/12447749840.gif​​​) left -30px;height:30px;}
a span{background:url(​​​http://www.lanrentuku.com/down/js/images/12447749840.gif​​​) right 0;  padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(​​​http://www.lanrentuku.com/down/js/images/12447749840.gif​​​) right -30px; color:#000;  padding:9px 8px 5px 0; margin:0 0 0 8px; height:16px;  }
</style>
</head>

<body>
<h1><strong>CSS自适应宽度圆角按钮 @5key.net 查找更多代码,请访问:懒人图库 ​​​www.lanrentuku.com​​​ </strong></h1>
<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>
</body>
</html>


标签:www,http,margin,padding,lanrentuku,按钮,宽度,com,CSS
From: https://blog.51cto.com/haibo0668/5969097

相关文章

  • 兼容IE6和Firefox的PNG背景透明CSS…
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""​​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd​​​"><htmlxmlns="​​​http://ww......
  • 用UL标签+CSS实现的柱状图
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""​​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd​​​"><htmlxmlns="​​​http://ww......
  • CSS & JS Effect – Tooltip
    介绍Tooltip长这样它用popup的方式来详细描述一个主体.比如某个icon代表着什么. 参考YouTube– HowToMakeTooltipsWithOnlyCSS 思路和难点1.ho......
  • 用css写一个奥运五环
    title:用css写一个奥运五环description:用css写一个奥运五环tags:-cssdate:2022-12-2314:00目录效果代码效果代码<!DOCTYPEhtml><htmllang="en"><hea......
  • 如何优雅的写 css 代码
    CSS(全称CascadingStyleSheets,层叠样式表)为开发人员提供声明式的样式语言,是前端必备的技能之一,基于互联网上全面的资料和简单易懂的语法,CSS非常易于学习,但其知识点广泛且......
  • win32系统窗口类-按钮
     #include<windows.h>HINSTANCEg_hInstance=0;//当前程序的实例句柄voidsysreg(){//系统窗口过程--自定义//系统窗口类:系统已经完成两步不需要程序......
  • CSS画一个三角形
    前言在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮。通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css......
  • 8款web设计的CSS 工具
    当涉及到简化 css 设计和开发相关的工作时,工具总能创造奇迹。值得指出的是,绝大多数的网页设计者和开发人员对不同的 css 工具都感到兴奋,这些工具能帮助他们更快的制作功......
  • CSS Flex 布局的 flex-direction 属性讲解
    flex-direction设置了主轴,从而定义了弹性项目放置在弹性容器中的方向。Flexbox是一种单向布局概念,可将弹性项目视为主要以水平行或垂直列布局。.container{flex-d......
  • CSS Flex 布局的引入背景
    Flexbox布局(FlexibleBox)模块(截至2017年10月的W3C候选推荐)旨在提供一种更有效的方式来布局、对齐和分配容器中item元素之间的空间,即使它们的大小未知和/或动态,这......