标签：技术分享 app fun image gis 个人版 date() upload 图片
1.夜间模式的开启与关闭
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>夜晚模式</title> <h4>*护眼模式展示*</h4> <script> 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="black"; } } </script> </head> <body id="myBody"> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"> <script>document.write(Date())</script> </body> </html>
开灯前后：
2. 父模板的制作
制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
汇总相关的样式形成独立的css文件。
汇总相关的js代码形成独立的js文件。
<!DOCTYPE html> <html lang="en" xmlns:color="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>首页</title> <script src="../static/js/light.js"></script> <link href="../static/css/base.css" rel="stylesheet" type="text/css"> </head> <body id="myBody"> <nav class="body"> <div style="background-color: antiquewhite"> <a href="{{ url_for(‘base‘) }}">首页</a> <a href="">下载APP</a> <input id="search" type="text" name="search" placeholder="请输入搜索内容："> <button id="play" type="submit">查找</button> <a class="login" href="{{ url_for(‘login‘) }}">登录</a> <a class="register" href="{{ url_for(‘register‘) }}">注册</a> <img id="myOn_Off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="50" height="50"> </div> <br> </nav> <div class="logo"> </div> <div class="img"> <a href="http://image.so.com/i?q=%E6%91%84%E5%BD%B1%E4%BD%9C%E5%93%81&src=srp"> <img src="http://pic1.win4000.com/wallpaper/b/50a06956560a6.jpg"></a> <div class="describe"><a href="https://baike.so.com/doc/394320-417527.html">摄影风采</a></div> </div> <div class="img"> <a href="https://baike.so.com/doc/23793629-24349761.html"> <img src="http://pic.87g.com/upload/2016/0902/20160902045804519.jpg"></a> <div class="describe"><a href="https://baike.so.com/doc/23793629-24349761.html">游戏动漫</a></div> </div> <div class="img"> <a href="https://baike.so.com/doc/23793629-24349761.html"> <img src="http://pic.qiantucdn.com/58pic/19/20/21/5684847e347a6_1024.jpg"></a> <div class="describe"><a href="https://baike.so.com/doc/23793629-24349761.html">美味美食</a></div> </div> <div class="img"> <a href="http://image.so.com/i?q=%E6%97%85%E6%B8%B8%E9%A3%8E%E6%99%AF%E5%9B%BE%E7%89%87&src=srp"> <img src="http://pic.58pic.com/58pic/13/87/72/73t58PICjpT_1024.jpg"></a> <div class="describe"><a href="http://image.so.com/i?q=%E6%97%85%E6%B8%B8%E9%A3%8E%E6%99%AF%E5%9B%BE%E7%89%87&src=srp">旅游风景</a></div> </div> <div class="clean"> <img src="http://pic1.win4000.com/wallpaper/b/50a06956560a6.jpg"> <img src="http://pic.87g.com/upload/2016/0902/20160902045804519.jpg"> <img src="http://pic.qiantucdn.com/58pic/19/20/21/5684847e347a6_1024.jpg"> <img src="http://pic.58pic.com/58pic/13/87/72/73t58PICjpT_1024.jpg"> </div> </div> <footer> <div class="footer_box"> Copyright@2013-14-520 个人版权，版权所有 telephone:520520 mobile phone:666 </div> </footer> </div> </body> </html>
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="black";
}
}
css:
img{ width: 220px; } div.img{ border: 1px solid #8b7b47; width: 220px; float:left; margin: 10px; } div.img img{ width: 180px; height: 180px; font-size: 22px; display: block; margin-left: 22px; margin-right: 22px; } div.desc{ text-align: center; padding: 5px; } div.img:hover{ border:1px solid #89ff3b; } .clean{ clear: both; float: left; } .body { font-size: 30px; display: block; margin-left: 20px; margin-right: 20px; } .wrink { font-size: 30px; display: block; margin-left: 20px; margin-right: 20px; } footer { position: absolute; bottom: 0; width: 100%; } footer .footer_box { background-color: #ff4f54; padding: 10px; color: #FFFFFF; text-align: center; }
形成完整的base.html+css+js
标签：技术分享 app fun image gis 个人版 date() upload 图片
原文地址：http://www.cnblogs.com/1244581939cls/p/7777425.html
