作业19-夜间模式的开启与关闭,父模板的制作
Posted 鹤归
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了作业19-夜间模式的开启与关闭,父模板的制作相关的知识,希望对你有一定的参考价值。
- 夜间模式的开启与关闭
- 放置点击的按钮或图片。
- 定义开关切换函数。
- onclick函数调用。
- 父模板的制作
- 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
- 汇总相关的样式形成独立的css文件。
- 汇总相关的js代码形成独立的js文件。
- 形成完整的base.html+css+js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>霓虹 - 点击打开你的视野</title> <link rel="stylesheet" href="../static/css/base.css" type="text/css"> <script src="../static/js/base.js"></script> </head> <body id="myBody"> <nav style="padding-top:5px"> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="30px"> <a href="">首页</a> <a href="">下载APP</a> <a href="">登录</a> <a href="">注册</a> </nav> <div class="area"> <br> <select> <option>文化</option> <option>留学</option> <option>旅游</option> <option>娱乐</option> </select> <p>日本的“读书之秋”的由来及推荐的四本书</p> <p>2017红白歌会的出场名单会是这些人吗?</p> </div> <div class="subarea"> <div class="img"> <a href="https://www.zhihu.com/question/28715237/answer/83938634"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509619400048&di=0a3de93d08ed7737aef765d7d7605649&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fbj%2Fpics%2Fhv1%2F35%2F44%2F2049%2F133247480.png"></a> <div class="desc"><a href="https://www.zhihu.com/question/28715237/answer/83938634">日本的鲤鱼旗有什么含义?</a></div> </div> <div class="img"> <a href="https://www.baidu.com/link?url=9TQR74QaJSq58bTzm0ELKi-BPFqgGU6PCsCKxv2f0iRZ5pUNy-eBcFwc_U1jyKCs&wd=&eqid=9c41d575000042b00000000659facdd0"> <img src="http://www.sxdaily.com.cn/NMediaFile/2015/0307/SXRB201503070810000126303204969.jpg"></a> <div class="desc"><a href="https://www.baidu.com/link?url=9TQR74QaJSq58bTzm0ELKi-BPFqgGU6PCsCKxv2f0iRZ5pUNy-eBcFwc_U1jyKCs&wd=&eqid=9c41d575000042b00000000659facdd0">细品寿司的前世今生</a></div> </div> </div> <br> <footer> <div class="footer_box"> Copyright@丝滑酱 </div> </footer> </body> </html>
css文件:
.img { border: 1px solid #cccccc; width: 300px; margin: 5px; float: left; } div.img img { width: 100%; height: auto; } div.img:hover { border: 1px solid #000000; } div.desc { text-align: center; padding: 5px; } .area { height: 250px; } .subarea { height: 100px; } footer{ position:absolute; bottom:0; width:100%; } footer .footer_box{ background-color:pink; padding: 10px; color : grey; text-align: center; }
js文件:
function mySwitch() { var oBody = document.getElementById("myBody"); var oOnoff = document.getElementById("myOnOff"); if (oOnoff.src.match("bulbon")) { oOnoff.src = "http://www.runoob.com/images/pic_bulboff.gif"; oBody.style.background = "black"; oBody.style.color = "yellow"; } else { oOnoff.src = "http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background = "white"; oBody.style.color = "black"; } }
以上是关于作业19-夜间模式的开启与关闭,父模板的制作的主要内容,如果未能解决你的问题,请参考以下文章