jquery仿百度首頁背景換膚代碼



100 397 133



特效描述:百度首頁 背景換膚,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

加群請備注:從官網了解到

老夫子电子