css不用图片美化按钮
.tb{width:100%;height:1px;overflow:hidden;background:rgb(250,100,0);margin:0 1px;}
.lr{width:100%;height:20px;overflow:hidden;border-left:1px solid rgb(250,100,0);border-right:1px
solid rgb(250,100,0);}
.bg{width:100%;height:20px;overflow:hidden;}
.button{position:relative;width:100%;height:20px;top:-20px;font-
size:9pt;border:0;background:none;}
function rgb(){
ID=arguments[0]
oRGB=eval(arguments[1])
nRGB=eval(arguments[2])
var IMG=""
for(i=20;i>0;i=i-2){
RGB="rgb("+(oRGB[0]-1)+","+(oRGB[1]-1)+","+(oRGB[2]-1)+")"
IMG+=""
}
for(i=20;i>0;i=i-2){
RGB="rgb("+(nRGB[0]-1)+","+(nRGB[1]-1)+","+(nRGB[2]-1)+")"
IMG+=""
}
eval(ID+".innerHTML=IMG")
}
rgb("bg",[255,180,20],[255,140,20])
button.onmouseover=function(){rgb("bg",[255,200,20],[255,160,20])}
button.onmouseout=function(){rgb("bg",[255,180,20],[255,140,20])}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
css不用图片美化按钮
.tb{width:100%;height:1px;overflow:hidden;background:rgb(250,100,0);margin:0 1px;} .lr{width:100%;height:20px;overflow:hidden;border-left:1px solid rgb(250,100,0);border-right:1px solid rgb(250,100,0);} .bg{width:100%;height:20px;overflow:hidden;} .b
-
JQuery+CSS实现图片上放置按钮的方法
本文实例讲述了JQuery+CSS实现图片上放置按钮的方法.分享给大家供大家参考.具体分析如下: position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素.. 第一种写法(连同CSS一起追加进去) va
-
CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
虽然完成了标签式导航,但是广场状的导航似乎并不能够顺应现在的设计潮流,其实导航不仅可以使用css的颜色来定义,同样可以采用精心设计的图片或其它元素来构建导航,在这里我们将开始改善导航的设计,使它成为更加出色的标签效果. 我们将考虑去掉单一的方块状背景元素,使用带色彩的圆角标签来完成我们的设计.不过从这个改进中能够体会到css设计的另一个优势,就是可以不需要修改结构代码,只需要修改样式,便可以完成改进,所以这里可以直接看看css代码的设计: <style> body { background-c
-
MFC实现漂亮界面之美化按钮
上次我们学习了如何美化对话框的界面,这次我们为上次的对话框添加两个按钮,一个是关闭按钮,另一个是最小化按钮,好,现在我们先看一下效果: 是不是很难看,因为我们的对话框美化了,所以我们的按钮也要美化,因为采用贴图的方式来美化,所以,我先给出这两个按钮的PNG格式的图片,该图片支持透明色,具体如下: 关闭按钮效果图: 最小化按钮效果图: 这两张效果图是我自己从网上找的,可能不是很合适,但是用来教学,完全没有问题,它们的尺寸都是108*21,每张图片都有四个小图片,第一张和第四张小图片都是透明的,所以
-
Ajax清除浏览器js、css、图片缓存的方法
做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. 第二:图片存在的是在服务器的硬盘上面,而不是在客户的硬盘里面,所以也是取不到的 后来在网上找方法,找的方法,都是各种转换二进制到xml中,的各种高大上的答案,然后本人又实在太懒了,就自己想了一个 方法,就是利用BufferedImage这个类. 开始 首先说说我的思路,就是把本地的图片,加载到内存
-
div+css实现自适应宽度按钮
先来看张图片: 原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形.再通过hover标签去滑动图片.而你只需要一张图片: ok,看看代码吧. CSS: 复制代码 代码如下: *{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(1.
-
js+css实现回到顶部按钮(back to top)
本文实例介绍了js+css实现回到顶部按钮的方法,分享给大家供大家参考,具体内容如下 效果 html <p id="back-to-top"><a href="#top"><span></span></a></p> css p#back-to-top{ position:fixed; bottom:100px; right:80px; } p#back-to-top a{ text-align:
-
CSS控制图片大小-适应宽度
不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px;} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的. 那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看: 复制代码 代码如下: img{width:expression(this.width>500?"500px":this.w
-
css配合jquery美化 select
一个简单的css配合jq美化select 复制代码 代码如下: <div id="main"> <section id="basic-usage"> <select id="basic-usage-demo"> <option value="">请选择-</option> <option>1</option> <option>2
-
使用Bootstrap美化按钮实例代码(demo)
在HTML5中,按钮的常用属性主要为背景颜色和大小 demo代码演示 一. input标签: <input type="button" value="按钮" class="btn"/> 二. button标签:(这里用button标签举例) <button type="button" class="btn btn-defult">提交</button> btn 表示基本样
随机推荐
- 亚马逊经典面试题实例详解
- Ruby中遍历目录的简洁方法
- Ruby中的Socket编程简单入门
- 天涯(tianya)bbs系统架构分析
- 详解ASP.NET 页面之间传值的几种方式
- 微信小程序 (一)新建项目hello WeApp 详细介绍
- C#多线程学习之(六)互斥对象用法实例
- 基于JavaScript实现回到页面顶部动画代码
- wamp5是什么 wamp有什么用途?
- ubuntu服务器上快速部署docker的方法
- jQuery遍历DOM元素与节点方法详解
- Jquery为a标签的href赋值实现代码
- 使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
- Javascript基础_简单比较undefined和null 值
- 纯真IP数据库格式图文详解
- Java 高并发三:Java内存模型和线程安全详解
- Nginx中报错:Permission denied与Connection refused的解决
- Android LayerDrawable使用实例
- Python中循环引用(import)失败的解决方法
- 解决python中用matplotlib画多幅图时出现图形部分重叠的问题