• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • 網頁換膚(簡潔寫法[提供思路])

    標簽: 換皮膚  換背景色

    網站更換皮膚樣式,可以通過動態改變網頁引入的css樣式文件來實現。根據這個思路,此功能就變得簡單:
    css引入方式為(外部樣式):

    <link href="./css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile"/>

    //skin_0.css文件內容 【默認樣式】

    #skin li{
        display:inline-block; 
        float:left; 
        text-align:center;
        line-height:30px; 
        font-size:1em; 
        font-weight:bold; 
        color:blue;
        width:100px;
        height:30px;
        overflow:hidden;
        border:1px solid red;
        margin-left:5px;
        margin-top:2px;
    }
    .selected{
        background:orange;
    }
    #news,#game{
        background:#ccc;
    }
    #box_c{
        background:#efebde;
    }

    //my.css文件內容 【待切換的樣式】

    .selected{
        background:cyan;
    }
    #box_c{
        background:#eff8fe;
    }

    //html部分

    <fieldset id="box_c">
        <legend>網頁換膚</legend>
        <ul id="skin">
            <li id="skin_0" class="selected">樣式一</li>
            <li id="my">樣式二</li>
        </ul>
        <div style="clear:both;"><br/>
            選擇背景色:<input type="color" name="sel_color" style="clear:both;"/>
        </div>
        <div id="div_side_0" style="clear:both;">
            <div id="news">
                <h1 class="title">語文</h1>
            </div>
        </div>
        <div id="div_side_1">
            <div id="game">
                <h1 class="title">數學</h1>
            </div>
        </div>
    </fieldset>

    //jQuery

    //換膚
    $('#skin li').click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
        //更改樣式文件
        $('#cssfile').attr('href','./css/'+this.id+'.css?r='+Math.random());
    })
    //下面這個是補充內容,當通過顏色選擇器進行選擇時,可以改變整個網頁的膚色;
    $('input[name="sel_color"]').change(function(){
        var sel_c=$(this).val();
        $('body').css('backgroundColor',sel_c);
    })

    換膚效果:
    樣式一:
    樣式一
    樣式二:
    樣式二
    補充內容:
    可以通過顏色選擇器,進行自主設置:
    顏色選擇器
    自主定義整個網站的背景色:
    這里寫圖片描述
    這里寫圖片描述

    版權聲明:本文為zhumengstyle原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/zhumengstyle/article/details/76577603

    智能推薦

    Python tornado實現的簡潔 resful 為前端提供數據

    爬取的數據來源 音樂數據: 爬取的網站 新聞來源: 央視新聞 圖片來源: 圖片 爬取我簡單使用了python 的 scrapy main.py setting.py dbUtils.py handle.py 首先,這個resful有很多不足,特別是安全方面,今后逐漸完善,使其健壯。...

    聊聊一種網頁在線換膚技術與實現

    聊聊一種網頁在線換膚技術與實現 demo 換膚相信很多網站都有,換膚過程中你感受不到網頁被刷新,他是瞬間完成的操作。今天就把自己www.binarydance.top中的一種換膚技術公之于眾。 之前一直在考慮怎么實現,最關鍵的就是換膚動態的加載css文件進行覆蓋實現,當然,前提是你的整個網站的樣式文件必須規范寫在一個css文件里面,這樣才好管理把控實現。 當前小站的css文件都在cover.css...

    shell腳本案例(提供思路)

    解釋環境是什么就用什么,bash就行了...

    Retrofit原理解析最簡潔的思路

    retrofit 已經流行很久了,它是Square開源的一款優秀的網絡框架,這個框架對okhttp進行了封裝,讓我們使用okhttp做網路請求更加簡單。但是光學會使用只是讓我們多了一個技能,學習其源碼才能讓我們更好的成長。 本篇文章是在分析retrofit的源碼流程,有大量的代碼,讀者最好把源碼下載下來導入IDE,然后跟著一起看,效果會更好 源碼下載地址 retrofit入門 定義網絡請求的API...

    MATLAB入門級知識

      要入坑MATLAB了。   老年人的記憶力傷不起,還是記下來方便以后查閱。   主要分為三部分:數據類型、可視化、程序設計。   數據類型   MATLAB中的數據類型主要包括字符型(char)、整型(int8、int16、int32、int64、uint8、...、uint64)、浮點(single、double)、元胞型(cell)和結構體...

    猜你喜歡

    Hibernate新官網下載源碼及支持jar

    訪問官網:Hibernate官網網址 還是從這進去 最新穩定版在這 打開網頁往下拉,點擊下載 幾秒后開始下載,網速慢的耐心點 歷史版本,好像歷的不那么明顯,就是前幾個版本 接下來就是源碼了 往這瞧,點擊,ok 這算是對之前一個教程的補充吧...

    Opencv非真實性渲染圖片特效處理

    非真實性渲染npr(Non-Photorealistic Rendering),也稱藝術渲染,常見的效果有鉛素描、水彩畫等 邊緣平滑處理 細節增強處理 鉛筆、水彩畫 風格化處理...

    麒麟子Cocos Creator 3D研究筆記四:天空盒動態更換與IBL效果

    麒麟子Cocos Creator 3D研究筆記之材質IBL與天空盒動態切換   在線演示地址: https://showcase.ukylin.net/skybox/ 天空盒對于3D渲染場景來說,有著不個忽視的地位。天空盒決定了整個場景的氛圍。 晴天、雨夜、黃昏、黎明等場景,只要換上一個天空盒,瞬間達到60%的效果。 Cocos Creator 3D作為一款高端引擎,這東西自然...

    Jupyter notebook-修改打開默認文件夾路徑

    默認直接打開jupyter notebook 會打開 用戶的個人目錄,也就是c:/users/** 如果想要改成自己的項目目錄 1:生成配置文件 首先需要生成配置文件,在cmd命令行里輸入 如果出現不是內部或者外部命令,說明你沒有裝anaconda或者anaconda不在環境變量里,環境變量設置方式見: https://jingyan.baidu.com/article/b24f6c82cba6d...

    如何div高度占滿全屏無滾動條

    如何div高度占滿全屏無滾動條 效果圖:...

    精品国产乱码久久久久久蜜桃不卡