变色html css js
<!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);" οnclick="Color('DC9FB4')">橙子,CHENGZI</a></li>
<li><a href="javascript:void(0);" οnclick="Color('543888')">苹果,APPLE</a></li>
<li><a href="javascript:void(0);" οnclick="Color('DC9FB2')">香蕉,banana</a></li>
<li><a href="javascript:void(0);" οnclick="Color('DC9FB1')">西瓜,XIGUA</a></li>
<li><a href="javascript:void(0);" οnclick="Color('DC9FB5')">核桃,HETAO</a></li>
</ul>
<ul>
<li><a href="javascript:void(0);" οnclick="Color('DC9FB4')">橙子,CHENGZI</a></li>
<li><a href="javascript:void(0);" οnclick="Color('DC9FB3')">苹果,APPLE</a></li>
<li><a href="javascript:void(0);" οnclick="Color('DC9FB2')">香蕉,banana</a></li>
<li><a href="javascript:void(0);" οnclick="Color('DC9FB1')">西瓜,XIGUA</a></li>
<li><a href="javascript:void(0);" οnclick="Color('DC9FB5')">核桃,HETAO</a></li>
</ul>
</div>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/dabaixiong/p/8068803.html
变色html css js相关推荐
- HTML怎么实现抽奖变色,html+css+js实现简单抽奖
HTML L Document 10元 800元 1000元 80元 开始 停止 600元 60元 100元 20元 CSS *{ padding: 0; margin: 0; } #uls{ wid ...
- HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- 有趣的HTML实例(七) 注册登录界面Ⅱ(css+js)
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编 ...
- 有趣的HTML实例(十五) 注册登录界面(css+js)
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编码实现 i ...
- HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适 ...
- HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
- HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)...
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计...
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...
最新文章
- Emacs 矩形编辑
- Java中伪造referer来获取数据
- cmake 找不到 macros_愿我们在彼此看不到的岁月里熠熠生辉
- mysql查询全年星期_数据库查询显示一年中所有的周一到周五的数据
- 最大 / 小的K个数
- mysql优化连接数防止访问量过高的方法
- AlertDialog源码解析之一
- python白鹅类型_fluent python 11.10节 鹅的行为有可能像鸭子
- 3. AJAX 请求与响应
- 前端常用插件、工具类库汇总,不要重复造轮子啦!!!
- 最近不少朋友问WPS专业版,再发一次
- 51单片机中断检测回复http://www.51hei.com/bbs/dpj-162071-1.html单片机点亮小灯的问题,几行代码,实在想不通怎么执行的
- AMS1117-3.3(线性稳压器(LDO))
- mipi和isp处理_汽车摄像头的图像信号处理ISP NVP2650
- 【Java游戏合集】手把手教你制作游戏
- 019-zabbix数据库表详解
- 如何以管理员身份进入dos命令窗口
- springboot从OSS下载图片并打包为压缩包下载
- 推荐一个单干网赚好站!BUXJOB - 生活至上,美容至尚!
- GDE230Kxxx踩坑 iic从机
热门文章
- 离散数学 第十二章 平面图及其应用
- 一遍过的刷四史脚本教程
- ACE: Ally Complementary Experts for Solving Long-Tailed Recognition in One-Shot(2022.5.27)
- python学习:键盘输入一个或多个城市名,转换为拼音列表
- 如何让administrator不出现在windows7系统登录界面
- Android活动+《恐怖游轮》带你了解跳转传递数据如何随时结束程序小技巧
- MAPJOIN来解决实际的问题
- JavaScript进阶(九)
- CentOS7虚拟机网络设置及使用代理服务器
- 探秘区块链之全局介绍