web前端基础小案例：制作百度换肤效果

web前端群，189394454，有视频、源码、学习方法等大量干货分享

知识点：html加css，标签运用、样式讲解、静态开发布局、行业标准。JS基础、if判断、jq方法 Dom操作、逻辑思维。
👇html代码：

    <div class="baidu"><!--id 与 class命名-->
            <div class="dimg_list">
                <ul>
                    <li>
                        <!--图片三要素 宽度 高 描述-->
                        [图片上传失败...(image-43c2ab-1511755681981)]<!--插入图片-->
                    </li>
                    <li>
                        [图片上传失败...(image-3a62a8-1511755681981)]
                    </li>
                    <li>
                        [图片上传失败...(image-f4c0df-1511755681981)]
                    </li>
                    <li>
                        [图片上传失败...(image-ba8fdc-1511755681981)]
                    </li>
                    <li>
                        [图片上传失败...(image-86c7ba-1511755681981)]
                    </li>
                </ul>
            </div>
        </div>
        <a href="#" class="btn"></a><!--超链接 行内元素-->

👇css代码：

    <style type="text/css">
    /*CSS层叠样式列表 美化*/
    *{margin:0px;padding:0px}/*通配符  1.元素自带的默认边距  2.不同浏览器之间差异（兼容性）*/
    body{background:url("images/1.jpg");/*背景 图片 颜色 路径*/
        background-size:cover;/*背景大小的调整*/
        overflow:hidden;
    }
    .baidu{
        width:100%;/*宽度*/
        height:200px;/*高度 像素*/
        background:rgba(0,0,0,.6);/*rgba CSS3 #66ffff 0-255 红色 绿色 蓝色*/
        position:absolute;/*绝对定位*/
        /*border:1px solid #ddd;边框*/
        display:none;/*元素隐藏*/
        }
    .dimg_list{
        width:1000px;
        height:100px;
        margin:50px auto;/*上下外边  auto左右外边距自动相等*/
    }
    .dimg_list ul li{
        width:160px;
        height:100px;
        border:1px solid #fff;/*粗细  样式  边框颜色 */
        list-style:none;/*去圆点 */
        float:left;/*左浮动*/
        margin-right:29px;
        cursor:pointer;/*鼠标样式*/
    }
    .btn{
        width:50px;
        height:50px;
        background:url("images/upseek.png");
        /*display:block;变成块级元素*/
        position:absolute;/*如果行内元素设置浮动或者定位，那么这个元素会自动变成块级元素*/
        top:0px;
        right:0px;
    }
    .btn:hover{
        background-position:0px -64px;/*背景的位置*/
    }
    </style>

👇javascript代码：

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.snow.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            $.fn.snow({
                minSize : 10,
                maxSize :50,
                newOn : 500,
                flakeColor : "red"
            });
        }


    $(".btn").click(function(){
        $(".baidu").slideToggle();//隐藏元素显示
    });

    $(".dimg_list ul li").click(function(){
        var src = $(this).find("img").attr("dataSrc");//获取图片路径
        $("body").css({"background":"url("+src+")","background-size":"cover"});//改变body背景图片
    });
    </script>