<!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. windows 停止和启动Redis

    点击win+R   输入cmd 打开cmd窗口 然后输入命令 net stop redis    停止redis net start redis     启动redis

  2. Tomcat中使用JNDI配置各种数据源

    最近接手了一个离职同事的老项目,全是XML配的,看的我贼难受,不过了解下配置原理还是有好处的 1.MySql <Resource name ="cockpitTest" au ...

  3. Python3标准库：collections容器数据类型

    1. collections容器数据类型 collections模块包含除内置类型list.dict和tuple以外的其他容器数据类型. 1.1 ChainMap搜索多个字典 ChainMap类管理一 ...

  4. mybatis-plus invalid bound statement (not found) insert解决办法

    使用mybatis-plus时,使用IService.insert方法时,提示找不到insert方法,原因是,mybatis-plus提供了两个BaseMapper和IService. 改成引用imp ...

  5. Unsupervise-learning-notes

    K-means 数据是没有label的,按照数据之间的相似性进行分类 原理and步骤 是随机选取K个对象作为初始的聚类中心, 计算每个对象与各个种子聚类中心之间的距离,把每个对象分配给距离它最近的聚类 ...

  6. urllib模块提供的urlretrieve()函数使用

    urllib模块提供的urlretrieve()函数,urlretrieve()方法直接将远程的数据下载到本地 注意:若是网站有反爬虫的话这个函数会返回 403 Forbidden 参数url:传入的 ...

  7. 简单记账本APP开发一

    在对Android的一些基础的知识有了一定了解,以及对于AndroidStudio的如何使用有了 一定的熟悉后,决定做一个简单的记账本APP 开发流程 1.记账本的页面 2.可以添加新的账目 (一)页 ...

  8. 2.Docker Compose 部署应用程序

    部署 Tomcat version: '3.1' services:  tomcat:   restart: always   image: tomcat   container_name: tomc ...

  9. ntoskrnl.exe导致蓝屏解决方法

    背景 博主电脑近段时间经常蓝屏,主要表现在开关机.重启等操作上: 使用 BlueScreenView 查看C:\Windows\Minidump下的bmp文件,关键信息如下: 解决方法 查阅网上的各种 ...

  10. 堆优化的dijkstra算法

    #include<bits/stdc++.h> using namespace std; #define ll long long #define P pair<int,int> ...