作品第一课----网页换肤 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页换肤</title>
    <style type="text/css">
    body, html { height: 100%; }
    body { margin:0; }
    li { list-style: none;width: 10px; height: 10px; border: 3px solid; float: left; border-radius: 50%; margin-left: 10px; }
    div { overflow: hidden; }
    .choice_one { border-color: #75E6D5; }
    .choice_two { border-color: #7063A9; }
    .choice_three { border-color: #CCC41E; }
    
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div>
        <ul>
            <li class="choice_one"></li>
            <li class="choice_two"></li>
            <li class="choice_three"></li>
        </ul>
    </div>
    
    <script>
    $(document).ready(function(){
        $(".choice_one").on("click", function(){
            $(".choice_three").css({"background-color": "#CCC41E", "border-color": "#CCC41E"});
            $(".choice_two").css({"background-color": "#7063A9", "border-color": "#7063A9"});
            $(this).css({"background-color": "#DDD", "border-color":"#000"});
            $('body').css("background-color", "#75E6D5");
        });

        $(".choice_two").on("click", function(){
            $(".choice_one").css({"background-color": "#75E6D5", "border-color": "#75E6D5"});
            $(".choice_three").css({"background-color": "#CCC41E","border-color": "#CCC41E"});
            $(this).css({"background-color": "#DDD", "border-color":"#000"});
            $('body').css("background-color", "#7063A9");
        });

        $(".choice_three").on("click", function(){
            $(".choice_one").css({"background-color": "#75E6D5", "border-color": "#75E6D5"});
            $(".choice_two").css({"background-color": "#7063A9", "border-color": "#7063A9"});
            $(this).css({"background-color": "#DDD", "border-color":"#000"});
            $('body').css("background-color", "#CCC41E");
        });
    })

    


    </script>
</body>
</html>

 

posted @ 2015-12-23 21:54  Sam的幻想  阅读(157)  评论(0)  编辑  收藏  举报