作业19——夜间模式的开启与关闭，父模板的制作

夜间模式的开启与关闭
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"><imgsrc="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"><ahref="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夜晚

转载于:https://www.cnblogs.com/888abc/p/7771717.html

作业19——夜间模式的开启与关闭，父模板的制作相关推荐

夜间模式的开启与关闭，父模板的制作（2017.11.2）
1.夜间模式的开启与关闭放置点击的按钮或图片. 定义开关切换函数. onclick函数调用. <!DOCTYPE html> <html lang="en"&g ...
夜间模式的开启与关闭，父模板的制作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
计算机怎黑夜模式么启动,Win10系统电脑夜间模式怎么开启/关闭的方法
Win10系统电脑夜间模式怎么开启/关闭的方法,Win10系统夜间模式如何开启?Win10系统夜间模式又如何关闭?在Win10系统中,其中一个特色功能就是Win10的夜间模式.正确利用它可以有效避免眼 ...
android7.0夜间模式,安卓7.0夜间模式怎么开启
安卓7.0夜间模式怎么开启?在谷歌的演示中,安卓7.0是有着夜间系统的,但是正式版中的这个系统被隐藏了,那么要如何才能够顺利的开启安卓7.0中的夜间模式呢! 安卓7.0开启夜间模式介绍: Androi ...
iOS设备中WiFi、蓝牙和飞行模式的开启与关闭
今天写了一段有关在iPhone程序中开关WiFi型号的代码,经测试运行良好. 我想不用我多说大家都应该知道以上的功能只能在越狱的设备中实现! 好了,闲话稍少叙,进入正题:1.首先要在SpringBoa ...
iOS设备中WiFi、蓝牙和飞行模式的开启与关闭(私有API)
今天写了一段有关在iPhone程序中开关WiFi型号的代码,经测试运行良好. 我想不用我多说大家都应该知道以上的功能只能在越狱的设备中实现! 好了,闲话稍少叙,进入正题: 1.首先要在SpringBo ...
抖音夜间模式怎么开启android,抖音怎么设置夜间模式
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以抖音version 12.5.0为例,抖音没有夜间模式,只有通过手机自身的夜间模式进行调节. 抖音是一款音乐创意短视频社交软件, ...
android7.0夜间模式,安卓7.0夜间模式怎么开启 Android7.0夜间模式开启方法
安卓7.0的系统已经正式的发布了,对于很多的用户来说,这次的发布也是带来了很多的全新的更新,不过在谷歌的演示中,安卓7.0是有着夜间系统的,但是正式版中的这个系统被隐藏了,那么要如何开启安卓7.0中的 ...
android7.0夜间模式,安卓7.0夜间模式怎么开启安卓7.0正式版夜间模式开启方法介绍...
类型:系统工具大小:5.1M语言:中文评分:10.0 标签: 立即下载安卓7.0的系统已经正式的发布了,对于很多的用户来说,这次的发布也是带来了很多的全新的更新,不过在谷歌的演示中,安卓7.0是有 ...

作业19——夜间模式的开启与关闭，父模板的制作

作业19——夜间模式的开启与关闭，父模板的制作相关推荐

最新文章

热门文章