标签：汇总 onclick styles inxi idt blog 独立 网站 add
1、夜间模式的开启与关闭
放置点击的按钮或图片。
定义开关切换函数。
onclick函数调用。
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>夜晚模式</title> <script src="../static/jsp/switch.js"></script> </head> <body id="mybody"> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"> <img src="img.jpg" alt="images"> <script> document.write(Date()) </script> </body> </html>
javascript代码：
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"; } }
2、父模板的制作
制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
汇总相关的样式形成独立的css文件。
汇总相关的js代码形成独立的js文件。
形成完整的base.html+css+js
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片导航</title> <link rel="stylesheet" type="text/css" href="../static/css/test1.css"> </head> <body> <div class="header"> <a href="/"> <span class="dz">首页</span> <base href="http://www.gzcc.cn/"/> </a> <span class="dz">登录</span> <span class="dz">注册</span> <input type="text" name="q" id="q" value="" autocomplete="off" placeholder="搜索" class="search-input"><br> </div> <div class="daohang"> <h2>用户导航</h2> <hr> <div class="img"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"> <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/">学校荣誉</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/banxuechengguo/"> <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/banxuechengguo/">师生获奖</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xygk/ldgh/"> <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/xygk/ldgh/">领导关怀</a> </div> </div> <div class="img"> <a href="http://i.gzcc.cn" target="_blank"> <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a> <div class="desc"> <a href="http://i.gzcc.cn" target="_blank">数字广商</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/"> <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">画说校园</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/shipinxiaoyuan/"> <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频广商</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html"> <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xiaoyoufengcai/"> <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a> </div> </div> </div> <div id="footer"> 版权 ? runoob.com </div> </div> </body> </html>
css代码：
.header{ background-color:cadetblue; height: 60px; line-height: 40px; } .search-input { background-color: #cccccc; margin-top: 8px; margin-left: 60px; float: left; width: 200px; height: 30px; } .dz { color: red; font-size: 25px; font-family: "微软雅黑 Light"; font-weight: 800; float: right; padding-top: 5px; padding-right: 80px; } h2{ padding-top: 20px; } img { width: 400px; } div.img { border: 1px solid #cccccc; float: left; margin: 30px; width: 260px; } div.img img { width: 100%; height: auto; } div.desc { background-color: cadetblue; text-align: center; padding: 5px; } div.img:hover { border: 1px solid #000000; } div.desc:hover { border: 1px solid #000000; } div.clearfolat { clear: both; } #footer { background-color: cadetblue; clear: both; text-align: center; line-height: 20px; color: #FFF; padding-top: 10px; padding-bottom: 15px; }
标签：汇总 onclick styles inxi idt blog 独立 网站 add
原文地址：http://www.cnblogs.com/1257-/p/7774103.html
