<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>变色</title>
</head>
<style type="text/css">
body{
background-color: #008B8B;
color: #FFFFFF;
/*transition: background 1s;*/
}
*{
margin:0;
padding:0;
}
ul{
list-style:none;

}
#wrap{
width:50%;
/* height: 500px;*/
border-color: red;

background-color: darkcyan;
margin: 0 auto;
};
div{
/*height: 200px;*/
width:200px;
border-color: red;
background-color: greenyellow;
a;;
/*margin: 0 auto;*/

}
a{
color:#ffffff;
text-decoration: none;
}
#wrap #cen ul{
float:left;
margin:20px 20px;
border-bottom: 2px solid #;
}
#wrap #cen ul li{
border-bottom: 10px;
margin-left: 100px;
height: 100px;
border-top:3px solid #FFFFFF;
}
#wrap #cen ul li:hover{
opacity: 1;
transition: opacity 2s;
}
</style>
<script type="text/javascript">
function Color(c){
// alert (c);
var body =document.getElementsByTagName("body")[0];
body.style.background="#"+c;
body.style.transition="all 1s";
}
</script>
<body>
<div id="wrap" >
<div id ="cen">
<ul>
<li><a href="javascript:void(0);" onclick="Color('DC9FB4')">橙子,CHENGZI</a></li>
<li><a href="javascript:void(0);" onclick="Color('543888')">苹果,APPLE</a></li>
<li><a href="javascript:void(0);" onclick="Color('DC9FB2')">香蕉,banana</a></li>
<li><a href="javascript:void(0);" onclick="Color('DC9FB1')">西瓜,XIGUA</a></li>
<li><a href="javascript:void(0);" onclick="Color('DC9FB5')">核桃,HETAO</a></li>
</ul>
<ul>
<li><a href="javascript:void(0);" onclick="Color('DC9FB4')">橙子,CHENGZI</a></li>
<li><a href="javascript:void(0);" onclick="Color('DC9FB3')">苹果,APPLE</a></li>
<li><a href="javascript:void(0);" onclick="Color('DC9FB2')">香蕉,banana</a></li>
<li><a href="javascript:void(0);" onclick="Color('DC9FB1')">西瓜,XIGUA</a></li>
<li><a href="javascript:void(0);" onclick="Color('DC9FB5')">核桃,HETAO</a></li>
</ul>

</div>
</div>
</body>
</html>

变色html css js的更多相关文章

  1. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  2. 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...

  3. 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决

    Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决:   1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...

  4. Css Js Loader For Zencart

    Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...

  5. 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  6. vs合并压缩css,js插件——Bundler & Minifier

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

  7. nginx资源定向 css js路径问题

    今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...

  8. IIS7的集成模式下如何让自定义的HttpModule不处理静态文件（.html .css .js .jpeg等）请求

    今天将开发好的ASP.NET站点部署到客户的服务器上后,发现了一个非常头疼的问题,那么就是IIS7的应用程序池是集成模式的话,ASP.NET项目中自定义的HttpModule会处理静态文件(.html ...

  9. 网站加载css/js/img等静态文件失败

    网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...

随机推荐

  1. STL-list 链表

    #include <iostream> #include <list> using namespace std; int main() { // list可以在头部和尾部插入和 ...

  2. ES6 DEMO

    案例: ①匿名封装 (function(window,document){ const HEAD = 1; let MSG = function(options){ this._init(option ...

  3. 树莓派pip安装opencv报错，Could not find a version that satisfies the requirement cv2 (from versions: )No matching distribution found for cv2

    前言 我在使用pip install opencv-python 时报错 Could not find a version that satisfies the requirement opencv ...

  4. webpack代理解决跨域

    开了一个9000端口,又开了一个8881端口,在9000端口访问页面,数据接口是8881,这样就产生了跨域,如何解决? webpack中做如下配置: proxy: { '/api/*': { targ ...

  5. CodeForces - 1107E 区间DP

    和紫书上的Blocks UVA - 10559几乎是同一道题,只不过是得分计算不同 不过看了半天紫书上的题才会的,当时理解不够深刻啊 不过这是一道很好区间DP题 细节看代码 #include<c ...

  6. Cobalt Strike配置及简单使用

    前言 CS分为客户端与服务端,服务端是一个,客户端可以有多个,非常适合团队协同作战,多个攻击者可以同时连接到一个团队服务器上,共享攻击资源与目标信息和sessions,可模拟APT做模拟对抗,进行内网 ...

  7. php安装xdebug扩展，PHPStorm+XDebug单步调试

    (一)php安装xdebug扩展,PHPStorm+XDebug单步调试 (二)PHPStorm配置XDebug (三)PHPStorm使用XDebug调试 (四)PhpStorm+Xdebug配置单 ...

  8. 前端开发 css、less编写规范

    壹 ❀ 引 早在大半年前,我在负责整理定义了前端组JavaScript开发规范与less.css样式开发规范.一直想将两个规范整理成文章,但在整理了JavaScript规范后,我花了较多的时间在学习J ...

  9. nginx技术

    Nginx 处理高并发,单台服务器存在服务瓶颈 Nginx属于nio ,noblocking Io非阻塞式的 Apache属于Bio,Blocking IO 阻塞式的 安装部分 依赖安装:yum -y ...

  10. [USACO17DEC] Barn Painting - 树形dp

    设\(f[i][j]\)为\(i\)子树,当\(i\)为\(j\)时的方案数 #include <bits/stdc++.h> using namespace std; #define i ...