网页换肤

来源：互联网发布：3b代码编程及简单图形编辑：程序博客网时间：2024/05/23 13:19
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>网页换肤</title>    <style>        body{            background-color: mediumseagreen;        }        div {            width:492px;            margin: 0 auto;        }        #aa {            padding: 0;        }        #aa li{            display: inline-block;            width: 6px;            height: 6px;            cursor: pointer;            overflow: hidden;            margin-right: 10px;            text-indent: -9999px;            border-width: 4px;            border-style: solid;        }        #aa li.current {            background: #fff;        }        #red { background:red;border-color: red; }        #green { background:green; border-color: green;}        #blue {background:black; border-color: black;}        #bb {            margin: 0;            padding: 0;        }        #bb li {            list-style: none;            line-height:27px;            padding: 1px 25px 1px 25px;            background-color: black;            border:1px solid white;            float: left;            font-size: 15px;        }        #bb li a {            color:white;            text-decoration:none;        }        #bb li a:hover{            text-decoration:underline;        }    </style>    <link href="green.css" rel="stylesheet" type="text/css" />    <script>        window.onload = function() {            var oLink = document.getElementsByTagName("link")[0];            var oSkin = document.getElementById('aa').getElementsByTagName('li');            for (var i=0;i<oSkin.length;i++) {                oSkin[i].onclick = function() {                    for (var p in oSkin) {                        oSkin[p].className="";                    }                    this.className = "current";                    oLink['href'] = this.id+".css";                }            }        }    </script></head><body>  <div id="ul1">    <ul type="square" id="aa">        <li id="red" title="红色">红</li><li id="green" class="current" title="绿色">绿</li><li id="blue" title="蓝色">蓝</li>    </ul>    <ul id="bb">        <li><a href="javascript: ;">新闻</a></li>        <li><a href="javascript: ;">娱乐</a></li>        <li><a href="javascript: ;">体育</a></li>        <li><a href="javascript: ;">电影</a></li>        <li><a href="javascript: ;">音乐</a></li>        <li><a href="javascript: ;">旅游</a></li>    </ul>  </div></body></html>效果图：
0 0