jquery仿百度首页背景换肤代码



95 378 127



特效描述:百度首页 背景换肤,jquery背景换肤,百度背景换肤

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">

2. 引入JS

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/js.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/js.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下,你就知道</title>
</head>
<body class="back1" style="min-width: 1000px;">
<!--==================TOP开始
==========================================-->
    <div class="top">
        <ul class="top-nav-left-box"> 
            <li id="click-list"><a href="javascript:;">换肤</a></li>
        </ul>
        <ul class="top-nav-right-box">
            <li><a href="#">糯米</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">hao123</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">视屏</a></li>
            <li><a href="#">贴吧</a></li>
            <li><a href="">登陆</a></li>
            <li><a href="">注册</a></li>
        </ul>
    </div>
<!--==================TOP结束
==========================================-->
<!--==================CONTECT开始
==========================================-->
<div class="content">
    <div class="logo">
        <img src="images/logo_white_fe6da1ec.png" alt="">
    </div>
    <div class="form">
        <form id="bdfm" target="_blank" name="bdfm" method="get" action="http://www.baidu.com/s">
            <div class="baidu-innput">
                <input type="text" name="word">
                <label></label>
            </div>
            <button>百度一下</button>
        </form>
    </div>
</div>
<!--==================CONTECT开始
==========================================-->
<div class="news-box">
    <ul class="news-nav">
        <li class=""><span class="sete-in"></span>我的关注</li>
        <li class="auty">推荐</li>
        <li>导航</li>
        <li>视频</li>
        <li>购物</li>
    </ul>
    <div class="news-content">
        <div class="rew">
            <ul class="news-list">
                <li class="news-title">
                    <span></span>
                    以下信息根据您的兴趣推荐
                </li>
                <li>
                    <div class="new-text">
                        <h2><a href="">我国人民解放军将捍卫南海主权,于7月30日将正式开战</a></h2>
                        <p><a href="">搜狐新闻 </a>07-13 07:47</p>
                    </div>
                    <div class="new-img">
                        <img src="images/yhjh.jpg" alt="">
                    </div>
                </li>
                <li>
                    <div class="new-text">
                        <h2><a href="">湖南元拓徐维将于今日,赴南海参战</a></h2>
                        <p><a href="">中国网 </a>07-12 13:47</p>
                    </div>
                    <div class="new-img">
                        <img src="images/yuantuo.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="new-text">
                        <h2><a href=""> 为了庆祝双抢 王云海决定请大家去狂欢</a></h2>
                        <p><a href="">腾讯网 </a>07-12 13:47</p>
                    </div>
                    <div class="new-img">
                        <img src="images/newsImg3.jpg" alt="">
                    </div>
                </li>
            </ul>
            <ul class="apdg-box">
                <div class="ros-tile">
                    <div class="redian">实时热点</div>
                    <div class="huanyihuan"><span></span>换一换</div>
                </div>
                <li>
                    <em></em>
                    <a href="">南海仲裁结果公布</a>
                    <span></span>
                </li>
                <li>
                    <em></em>
                    <a href="">轿车变道撞上客车</a>
                    <span></span>
                </li>
                <li>
                    <em></em>
                    <a href="">葡萄牙运输机起火</a>
                    <span></span>
                </li>
                <li>
                    <em></em>
                    <a href="">新锐出口战舰交付</a>
                    <span></span>
                </li>
                <li>
                    <em></em>
                    <a href="">键盘手走红网络</a>
                    <span></span>
                </li>
                <li>
                    <em></em>
                    <a href="">特里莎接任卡梅伦</a>
                </li>
                <li>
                    <em></em>
                    <a href="">城管与店方起冲突</a>
                </li>
                <li>
                    <em></em>
                    <a href="">韩女主播入侵中国</a>
                </li>
                <li>
                    <em></em>
                    <a href="">中俄蒙旅游联盟</a>
                </li>
                <li>
                    <em></em>
                    <a href="">疑陈学冬女友曝光</a>
                </li>
                <li>
                    <em></em>
                    <a href="">余文乐冯小刚合照</a>
                </li>
                <li>
                    <em></em>
                    <a href="">新华垸溃口合龙</a>
                </li>
                <li>
                    <em></em>
                    <a href="">郭德纲搭讪美女</a>
                </li>
                <li>
                    <em></em>
                    <a href="">伊朗空军战机坠毁</a>
                </li>
                <li>
                    <em></em>
                    <a href="">扬言炸机场被拘留</a>
                </li>
                <li>
                    <em></em>
                    <a href="">海关破成品油走私</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="pos-max-box"></div>
<div class="pop-box">
    <div class="pos-header">
        <ul class="pos-nav">
            <li class="current">热门</li>
            <li>游戏</li>
            <li>女神降临</li>
            <li>明星</li>
            <li>风景</li>
            <li>简约</li>
            <li>小清新</li>
            <li class="left-bu">自定义</li>
            <li>最近使用</li>
        </ul>
        <p><a href="javascript">不是使用换肤</a></p>
        <div class="hide-but"><span></span><a href="javascript:;">收起</a></div>
    </div>
    <div class="pos-content">
        <div class="bos-test-con">
            <div class="pos-hade">
                <div>
                    <div class="poa-lisa">
                        <ul>
                            <li><a href="">杨幂</a></li>
                            <li><a href="">刘诗诗</a></li>
                            <li><a href="">胡歌</a></li>
                            <li><a href="">邓紫棋</a></li>
                            <li><a href="">赵丽颖</a></li>
                            <li><a href="">马天宇</a></li>
                            <li><a href="">陈晓</a></li>
                            <li><a href="">陈伟霆</a></li>
                            <li><a href="">陈晓</a></li>
                            <li><a href="">柳岩</a></li>
                            <li><a href="">吴奇峰</a></li>
                            <li><a href="">王云海</a></li>
                        </ul>
                        <div class="poa-con" id="moshover">
                            <ul>
                                <li class="max-li pos-of0"><img src="images/tet-1.jpg" alt=""></li>
                                <li class="min-li pos-of1"><img src="images/tet-2.jpg" alt=""></li>
                                <li class="min-li pos-of2"><img src="images/tet-3.jpg" alt=""></li>
                                <li class="min-li pos-of3"><img src="images/tet-4.jpg" alt=""></li>
                                <li class="min-li pos-of4"><img src="images/tet-5.jpg" alt=""></li>
                                <li class="min-li pos-of5"><img src="images/tet-6.jpg" alt=""></li>
                                <li class="min-li pos-of6"><img src="images/tet-7.jpg" alt=""></li>
                                <li class="min-li pos-of7"><img src="images/tet-8.jpg" alt=""></li>
                                <li class="max-li pos-of8"><img src="images/tet-9.jpg" alt=""></li>
                                <li class="min-li pos-of9"><img src="images/tet-10.jpg" alt=""></li>
                                <li class="min-li pos-of10"><img src="images/tet-11.jpg" alt=""></li>
                                <li class="min-li pos-of11"><img src="images/tet-12.jpg" alt=""></li>
                            </ul>
                            <ul>
                                <li class="max-li pos-of0"><img src="images/backs13.jpg" alt=""></li>
                                <li class="min-li pos-of1"><img src="images/backs14.jpg" alt=""></li>
                                <li class="min-li pos-of2"><img src="images/backs15.jpg" alt=""></li>
                                <li class="min-li pos-of3"><img src="images/backs16.jpg" alt=""></li>
                                <li class="min-li pos-of4"><img src="images/backs17.jpg" alt=""></li>
                                <li class="min-li pos-of5"><img src="images/backs18.jpg" alt=""></li>
                                <li class="min-li pos-of6"><img src="images/backs19.jpg" alt=""></li>
                                <li class="min-li pos-of7"><img src="images/backs20.jpg" alt=""></li>
                                <li class="max-li pos-of8"><img src="images/backs21.jpg" alt=""></li>
                                <li class="min-li pos-of9"><img src="images/backs22.jpg" alt=""></li>
                                <li class="min-li pos-of10"><img src="images/backs23.jpg" alt=""></li>
                                <li class="min-li pos-of11"><img src="images/backs24.jpg" alt=""></li>
                            </ul>
                        </div>
                    </div>
                    <div class="pos-in-this">
                        <img src="images/tet-1.jpg" alt="">
                        <div class="pas1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 提示框/弹出层 搜索框 颜色选择 颜色选择器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到