<!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. Python安装和配置环境变量（简明教程）

    声明:借鉴Python 简明教程 安装我们在本书中提到的「Python 3」指的是 Python 版本大于或等于 Python 3.6.0. 针对Python3.6.版本:注意数据的缓存机制 # ## ...

  2. C++中复制构造函数被调用的三种情况

    C++中的构造函数 c++中的构造函数分为构造函数,和复制构造函数,相比于构造函数,复制构造函数使用更加方便,快捷.构造函数可以有多个,二复制构造函数只能有一个,因为复制构造函数的参数只能是当前类的一 ...

  3. Java泛型(T)与通配符？

    前言:使用泛型的目的是利用Java编译机制,在编译过程中帮我们检测代码中不规范的有可能导致程序错误的代码.例如,我们都知道list容器可以持有任何类型的数据,所以我们可以把String类型和Integ ...

  4. C#从委托、lambda表达式到linq总结

    前言 本文总结学习C#必须知道的基础知识,委托.监视者模式.常用lambda表达式.linq查询,自定义扩展方法,他们之间有什么关系呢?匿名委托是如何演变成lambda表达式,lambda再如何导出l ...

  5. 剑指offer-面试题21-调整数组顺序使奇数位于偶数前面-双指针

    /* 题目: 调整数组顺序使奇数位于偶数前面. */ /* 思路: 双指针: 一个指针last用于遍历,当为奇数时+1, 当为偶数时,交换last和pre指向的值,向前移动pre指针. */ #inc ...

  6. 剑指offer-面试题19-正则表达式匹配-字符串

    /* 题目: 实现一个函数用来匹配包含'.'和'*'的正则表达式. '.'表示比配任意字符,‘*’表示匹配0个或多个字符串. */ /* 思路: 采用递归的方法. 基础条件:当字符串和模式串存在空的情 ...

  7. Extreme Learning Machine

    Extreme Learning Machine 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. ELM 2004年南洋理工大学黄广斌提出了ELM ...

  8. react-父子子孙组件嵌套-context

    方案一 import React from 'react' import ReactTypes from 'prop-types' /* // 最外层的父组件 export default class ...

  9. 将Python模块转变为命令行工具

    问:如何输入命令行就能执行python代码呢? 答:要将python模块转变为命令行工具只用在 setup.py 文件中添加参数entry_points 例如: entry_points={ 'con ...

  10. XJOI CSP-S2 2019开放模拟训练题1 赛后总结

    比赛链接 友好数对 暴力枚举\([L,R]\)之间的所有数,将每个数进行"旋转",看是否符合题意. 注意"旋转"的次数,并不一定是数字位数.只要旋转回到了初始数 ...