标签：base ref css span nta otto 底部 结果 login
1.夜间模式的开启与关闭
1.放置点击的按钮或图片。
2.定义开关切换函数。
3.onclick函数调用。
夜间模式html代码：
<p align="right" > <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" class="bulb"> </p>
夜间模式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="white" }else{ oOnOff.src="http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background="white"; oBody.style.color="whiteblack"; } }
2.父模板的制作
1.制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
2.汇总相关的样式形成独立的css文件。
3.汇总相关的js代码形成独立的js文件。
4.形成完整的base.html+css+js
导航html代码：
<nav class="navi"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img class="ico" src="../static/img/ico.jpg" alt=""></a> </div> <div> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> <a href="login.html"> <button type="button" class="logb"> 登录 </button> </a> </div> </div> </nav>
css代码：
.navi { position: fixed; top: 0px; height: 47px; background-color: #FCFCFC; border-bottom: 1px solid #DDDDDD; width: 100%; } .ico { height: 23px; width: 23px; } .logb { background-color: deepskyblue; width: 55px; height: 30px; margin-left: 800px; } footer { position: absolute; bottom: 0; width: 100%; } footer .footer_box { background-color: #002D54; padding: 10px; color: #FFFFFF; text-align: center; } .bulb{ width: 35px; margin-right: 400px; margin-top: 55px; }
footer html 代码：
<footer> <div class="footer_box"> <p>Posted by: W3School</p> <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p> </div> </footer>
运行结果：
标签：base ref css span nta otto 底部 结果 login
原文地址：http://www.cnblogs.com/yishhaoo/p/7774550.html
