zoukankan      html  css  js  c++  java
  • 变色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{
    50%;
    /* height: 500px;*/
    border-color: red;

    background-color: darkcyan;
    margin: 0 auto;
    };
    div{
    /*height: 200px;*/
    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>

  • 相关阅读:
    初识函数作业
    HTTP协议那些事儿(Web开发补充知识点)
    文件操作
    文件操作作业
    深浅拷贝
    深浅拷贝作业
    小数据池 is和== 再谈编码
    小数据池/is和==/再谈编码作业
    如何用好 github 中的 watch、star、fork
    Navicat Premium Mac 12 破解(亲测可用!!!)
  • 原文地址:https://www.cnblogs.com/dabaixiong/p/8068803.html
Copyright © 2011-2022 走看看