作業19——夜間模式的開啟與關閉，父模板的制作

阿新 • • 發佈：2017-11-02

amp https str clas mys tac 夜間模式 mage get

夜間模式的開啟與關閉
1. 放置點擊的按鈕或圖片。
2. 定義開關切換函數。
3. onclick函數調用。
父模板的制作
1. 制作網站網頁共有元素的父模板html，包括頂部導航，中間區塊劃分，底部導航，底部說明等。
2. 匯總相關的樣式形成獨立的css文件。
3. 匯總相關的js代碼形成獨立的js文件。
4. 形成完整的base.html+css+js

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base</title>
    < 
link rel="stylesheet" href="../static/css/base.css" type="text/css">
    <script src="../static/JS/base.js"></script>

</head>
<body id="myBody">
<nav>
    <img id="myOnOff" onclick="mySwitch()"
         src="http://img3.redocn.com/tupian/20150409/shouhuihuangsetaiyangshiliangsucai_4034066.jpg" 
 width="30px">
    <a href="http://localhost:63342/denglu1.1/templates/shouye.html?_ijt=qijfc55i74avkg8umf7nn7oqt7">首頁</a>
    <a href="http://localhost:63342/denglu1.1/templates/denglu1.1.html?_ijt=7qkhljvviqhhrvp78f6nv1jtqn">Login</a>
    <a href="http://localhost:63342/denglu1.1/templates/%E6%B3%A8%E5%86%8C.html?_ijt=bpr6ikepnp2sh7actb82n1m3dt" 
>Enroll</a>

</nav>
<div class="area">

</div>


<div class="area1">
    <div class="img">
        <a href="https://baike.so.com/doc/5040370-5267074.html"><img
                src="http://pic1.win4000.com/wallpaper/e/53e18dbb02abb.jpg"></a>
        <div class="desc"><a href="https://baike.so.com/doc/5040370-5267074.html">薛定諤的貓</a></div>
    </div>
    <div class="img">
        <a href="https://www.zhihu.com/question/30454189">
            <img src="http://attachments.gfan.com/forum/attachments2/201410/31/000920jl0jdq270le88d9r.jpg">
        </a>
        <div class="desc"><a href="https://www.zhihu.com/question/30454189">中華田園貓的顏值可以多高？</a></div>
    </div>
    <div class="img">
        <a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=貓">
            <img src="http://attachments.gfan.com/forum/201503/18/213547yy3u5muo8v3j3r6f.jpg"></a>
        <div class="desc"><a
                href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=貓">miow</a>
        </div>
    </div>
</div>

<br>
<br>
<div>
    HTML design by 201508030006 陳文琪
</div>
</body>
</html>

base.css

.img {
    border: 1px solid #cccccc;
    width: 250px;
    margin: 5px;
    float: left;

}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    text-align: center;
    padding: 5px;
}

div.img:hover {
    border: 1px solid #000000;
}

.area {
    height: 300px;
}


.area1 {
    height: 180px;
}

base.js

function mySwitch() {
    var oBody = document.getElementById("myBody");
    var oOnoff = document.getElementById("myOnOff");
    if (oOnoff.src.match(4034066)) {
        oOnoff.src = "http://p2.so.qhimgs1.com/t01d1c4018fa8f64a6e.gif";
        oBody.style.background = "black";
        oBody.style.color = "yellow";
    } else {
        oOnoff.src = "http://img3.redocn.com/tupian/20150409/shouhuihuangsetaiyangshiliangsucai_4034066.jpg";
        oBody.style.background = "white";
        oBody.style.color = "black";
    }


}

base白天

技術分享

base夜晚

技術分享

作業19——夜間模式的開啟與關閉，父模板的制作

amp https str clas mys tac 夜間模式 mage get 夜間模式的開啟與關閉放置點擊的按鈕或圖片。定義開關切換函數。 onclick函數調用。父模板的制作制作網站網頁共有元素的父模板html，包括頂部導航，中間區塊劃分，底部導航，底部說

夜間模式的開啟與關閉，父模板的制作

制作網站定義 css 問題 hit img date 註冊 uname 夜間模式的開啟與關閉放置點擊的按鈕或圖片。定義開關切換函數。 onclick函數調用。父模板的制作制作網站網頁共有元素的父模板html，包括頂部導航，中間區塊劃分，底部導航，底部說明等。

tp5--開啟與關閉調試模式

png alt blog fin cat https lan .html tps https://www.cnblogs.com/finalanddistance/p/8906000.html 　　在TP5中，我們運行的代碼有錯誤無法執行時，只顯示頁面錯誤，而不顯

wpf 開啟與關閉帶蒙板的子窗體，

先上效果圖：相關新增蒙板後臺程式碼如下： /// <summary> /// 顯示子窗體 /// </summary> /// <param name="obj">父窗體</

oracle 資料庫歸檔模式的開啟與關閉

在實際應用中，我們需要實現對資料的備份，其實現方式主要有冷備份和熱備份兩種。現在我們主要討論熱備份的具體操作。熱備份也稱為聯機備份，在資料庫的存檔模式下進行備份。oracel資料庫預設存檔模式為關閉狀態，要實現資料的熱備份，需要改變資料庫的存檔模式，將其開啟。並且

Mac終端如何安裝強大的NERDTree，以及快捷鍵開啟與關閉NERDTree的方法！

零、安裝NERDTree 1. 在.vim中建立兩個子資料夾，分別是autoload、bundle，如下：參考方法：建議先cd 到~/.vim資料夾直接建立. 2. 將pathogen.vim放到aut

php開啟與關閉錯誤提示

php.ini target spa style 目錄 http ubuntu linux系統 spl linux系統下: 1. 打開php.ini文件。以我的ubuntu為例，這個文件在： /etc/php5/apache2 目錄下。 2. 搜索並修改下行，把Of

Mongodb默認開啟與關閉

日誌普通 clas gap 有一個 9.1 後臺過程最終默認啟動： $ ./mongodb 默認數據保存路徑：/data/db/ 默認端口：27017 修改默認路徑： --dbpath $ ./mongdb --dbpath /mongodb/

檔案的開啟與關閉

開啟模式： t ---- 文字檔案模式，預設值 b ---- 二進位制檔案模式 r ---- 只讀模式，預設模式，檔案不存在，返回FileNotFoundError異常 w ---- 覆蓋寫模式

python3基礎(八)-檔案的開啟與關閉

1、開啟檔案，或新建一個檔案 2、讀/寫資料 3、關閉檔案 f=open("test.txt", "w") “test.txt”是檔名，但是它自動建立的檔案的目錄是當前目錄下(相對路徑)，所以最好在這個地方指定一個絕對路徑，比如~/home/zhantao/test.txt f.writ

Bootstrap開啟模態框後對資料處理(標記模態框的開啟與關閉狀態)

JS用全域性變數標記狀態，方法中動態修改全域性變數以標記狀態是一個重要思想。　　需求:組合條件查詢資料，查詢完之後填充到模態框中，開啟模態框，模態框中有組合條件查詢，此時查詢只需要更新模態框表格資料不需要開啟模態框，也就是讓模態框開啟方法執行一次。 (點查詢的時候只更新資料不會再次開啟模

檔案操作介紹,檔案的開啟與關閉

<1>什麼是檔案示例如下：檔案格式 <2>檔案的作用大家應該聽說過一句話：“好記性不如爛筆頭”。不僅人的大腦會遺忘事情，計算機也會如此，比如一個程式在執行過程中用了九牛二虎之力終於計算出了結果，試想一下如果不把這些資料存放起來，相比重啟電腦之後，“哭

C語言檔案的開啟與關閉

C語言檔案的開啟與關閉在C語言中，檔案操作都是由庫函式來完成的。檔案的開啟(fopen函式) fopen() 函式用來開啟一個檔案，它的原型為： FILE *fopen(char *filename, char *mode); filename為檔名（包括檔案路徑），mo

php自定義選單模組的開啟與關閉

最近專案中要用到選單的開啟與關閉，自己研究了一下，專案使用的框架分別是ThinkPHP5 和 H-ui.admin，因為一開始做了許可權，使用的是ThinkPHP5定義過的Auth.php，在tb_auth_group.sql資料表中新增module欄位，儲存方式：一級選單鍵值加“-”連結二級選

夜間模式實現簡單步驟，可有立竿見影之效果

這是一個簡單的夜間模式實現方式，步驟簡單。可供初學者使用首先下載https://download.csdn.net/my/uploads這是一個deme型別的jar; 使用前請安步驟操作第一步建立 values檔案下的 atts.xml 設定顏色切換狀態的

【macOS】SIP開啟與關閉

當使用proxychains代理macOS的curl或者lldb除錯macOS 應用時常會遇到SIP的問題。關於SIP的比較好的介紹可以參考這裡：https://www.zhihu.com/question/40239893 SIP官方文件參考這裡：https://dev

Android之四大元件(Service的開啟與關閉)

個人開發的微信小程式，目前功能是書籍推薦，後續會完善一些新功能，希望大家多多支援！前言服務（Service）是Android系統中的四大元件之一。服務主要用於兩個目的：後臺執行和跨程序訪問。通過啟動一個服務，可以在不顯示介面的前提下在後臺執行指定的

CentOS6及7下埠開啟與關閉

--centos 7.0 firewall-cmd --zone=public --add-port=8080/tcp --peranmentfirewall-cmd --zone=public --add-port=8081/tcp --peranment --關閉防火牆

手動控制IIS服務的開啟與關閉

之前寫過一篇 Spring 整合 WebSocket 協議的文章 —— Spring訊息之WebSocket ，所以對於 WebSocket 協議的介紹就不多說了，可以參考這篇文章。這裡只做一些補充說明。另外，Netty 對 WebSocket 協議的支援要比 Spring

C++檔案的開啟與關閉

檔案的基本概念本節中檔案指的是磁碟檔案。 C++根據檔案（file）內容的資料格式，可分為兩類：文字檔案：由字元序列組成，在文字檔案中存取的最小資訊單位為字元（character），也稱ASCII碼檔案。二進位制檔案：存取的最小資訊單位為位元組（Byte）。 C++

作業19——夜間模式的開啟與關閉，父模板的制作

相關推薦