<!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. caj文件转word

    转载:https://baijiahao.baidu.com/s?id=1590365105855177484&wfr=spider&for=pc 使用工具: 迅捷caj转word转换 ...

  2. django 搭建一个投票类网站（四）

    昨天我把投票页面终于写完,怎么说呢,觉得这本书对我的帮助也不是很大,然后去看了下django的文档,发现竟然是同一个项目...... 但还是要善始善终吧,贴一下中文版的文档https://docs.d ...

  3. centos python虚拟环境安装

    pip install virtualenv pip install virtualenvwrapper vim ~/.barshrc export VIRTUALENVWRAPPER_PYTHON= ...

  4. 积分题1之来自G.Han的一道积分题

    今天,收到G.Han的提问,第一个是计算积分 \[\int_0^{\infty}{\frac{\ln x}{(x^2+1)^n}dx}\]顿时不明觉厉,然后在宝典<Table of Integr ...

  5. mysql 基础sql语法总结（一）DDL

    mysql数据库: SQL数据库语言可分为四部分: 1.DDL:对数据库或表的进行操作结构操作 2.DML:对表的记录进行更新(增.删.改)* 3.DQL:对表的内容进行查询 **(重难点) 4.DC ...

  6. Qt多线程实现思路二

    建立一个继承于Qobject的类myThread 在类myThread中定义线程处理函数不必是思路一里的run(); 在窗口类中开辟一个自定义线程myThread的指针对象myT = new myTh ...

  7. appium知识点

    1 appium元素获取技巧 # 就是页面滑动 driver.swipe(x1, y1, x1, y2, t) # 拿到所有跟元素有关的标签,其实是个列表 driver.find_elements_b ...

  8. hadoop基本组件原理小总结

    Hadoop基础知识小总结  这是本人(学生党)在学习hadoop半个学期后根据教科书后习题做的一个小总结,如有发现错误还请各位海涵并指出,我会及时改过来的,谢谢! 目录 Hadoop基础知识小总结. ...

  9. Treats for the Cows POJ - 3186 dp 区间dp

    //dp[i][j]表示第i次从左边取,第j次从右边取的价值,所以我们可以得到状态方程 //dp[i][j]=max(dp[i-1][j]+(i+j)*a[i],dp[i][j-1]+(i+j)*a[ ...

  10. 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记（4.12-加-6.2-加-7.2.5.2）Fused_Operations

    4.12 Fused Operations 融合操作 融合操作通过“fusing”把两个简单的命令融合一起来支持一个更复杂的命令.协议规定这个特性是可选的:如果支持此特性,需要在Figure 247 ...