不用图像文件的圆角解决--跳起按钮制作（html）

不用图像文件的圆角解决方法

<!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=utf-8" />
<title>不用图像文件的圆角解决方法</title>
<style type="text/css">
ul{height:26px;margin:0;padding:10px;list-style-type:none;background:#ddd;
}.item{float:left;width:100px;margin:0 -1px 0 0;padding 0;font: 14px Arial;font-weight:bold;}.item p{padding:0 0 2px 0;margin:0px;text-align:center;background:#cc6;border:solid 1px  #000; border-top-width:0;
}.item div{height:1px;overflow:hidden;background:#cc6;border-left:solid 1px  #000; border-right:solid 1px  #000;
}.item .pad{height:10px;border:0;background:transparent;
}.item .row1{margin:0 5px;background:#000;
}.item  .row2{margin:0 3px;border:0 2px;
}.item .row3{margin:0 2px;
}
.item .row4{margin:0 1px;height:2px;
}.item a , .item a:visted{display:block;color:#000;text-decoration:none;
}.item a:hover{background:transparent;
}.item a:hover p{background:#884;color:#fff;padding-bottom:12px;
}.item a:hover .pad{height:0px;
}.item a:hover .row2,
.item a:hover .row3 ,
.item a:hover .row4{background:#884;
}</style>
</head><body>
<ul><li class="item"><a href="#"><div class="pad"></div><div class="row1"></div> <div class="row2"></div><div class="row3"></div> <div class="row4"></div><p>Home</p></a></li><li class="item"><a href="#"><div class="pad"></div><div class="row1"></div> <div class="row2"></div><div class="row3"></div> <div class="row4"></div><p>Contact Us</p></a></li><li class="item"><a href="#"><div class="pad"></div><div class="row1"></div> <div class="row2"></div><div class="row3"></div> <div class="row4"></div><p>Web Dev</p></a></li><li class="item"><a href="#"><div class="pad"></div><div class="row1"></div> <div class="row2"></div><div class="row3"></div> <div class="row4"></div><p>Map</p></a></li>
</ul>
</body></html>

Home
Contact Us
Web Dev
Map

转载于:https://www.cnblogs.com/MrLiu2016/p/5414028.html

不用图像文件的圆角解决--跳起按钮制作（html）相关推荐

42佳优秀的 Photoshop 按钮制作教程
想要一个好看点的按钮,可是在网上找来找去也没找到满意的.俗话说,自己动手,丰衣足食,想要满意的按钮,还是自己动手,想做成什么样就做成什么样.今天这篇文章就收集了42佳非常好的 Photoshop 按钮 ...
php重复点击按钮无效,完美解决UIButton按钮重复点击、多次响应的问题
最近测试老跑过来提bug,说按钮可以点好几次,然后蹦出来好几个一样的界面出来,解决了一个地方,其他地方也会冒出一样的问题来,仔细一想,还是要从根本上解决问题,于是想了几个方法: 1.添加UIButto ...
html5视频播放自定义视频播放暂停，解决暂停按钮在视频画面中的问题
html5视频播放自定义视频播放暂停,解决暂停按钮在视频画面中的问题一.视频播放方法 var myVideo = $("#videoPlayExecute");function ...
汉堡按钮html写法,ProtoPie 详解 — 汉堡按钮制作
原标题:ProtoPie 详解 - 汉堡按钮制作每周一期的 ProtoPie 详解教程又来啦,上期马克笔设计留学的MUzi老师主要介绍了 ProtoPie 的交互动作原理<ProtoPie详解 ...
linux ahci 不重装,老电脑竟然忘记开AHCI了，教你种不用重装系统的解决方法
原标题:老电脑竟然忘记开AHCI了,教你种不用重装系统的解决方法昨天折腾的二台电脑,全部都使用了固态硬盘,对于老电脑而言,固态硬盘绝对是一种利器.虽然它不能大幅度的提升性能,但却可以大幅度的改善使用 ...
clion解决运行按钮灰色
clion解决运行按钮灰色有时候打开 Clion 的时候,它的运行按钮是灰色的,那么怎么处理呢?是哪里出现问题了呢? 可能是 cmake 这个配置文件出现了问题. 我们会发现,当我们新建一个项目的时 ...
解决拍照按钮为英文问题
解决拍照按钮为英文问题 . 点击红框下面的加号,选择简体中文之后就可以.
笔记本电脑和台式机电脑长时间不用后卡顿解决办法
描述:笔记本电脑和台式机电脑长时间不用后卡顿解决办法方法: 这是长时间不用,电子元件受潮导致,可以下载一个鲁大师开启温度压力测试,热一会儿机器就好了
解决苹果手机按钮的圆角问题
在使用htnl5编写移动页面时,总会涉及有关按钮的一些问题,在android手机浏览器中显示正常,但在ios浏览器中按钮会显示为圆角,设置border-radius:0px;也不管用,其实在css中添 ...

不用图像文件的圆角解决--跳起按钮制作（html）

不用图像文件的圆角解决--跳起按钮制作（html）相关推荐

最新文章

热门文章