- 夜间模式的开启与关闭
- 放置点击的按钮或图片。
- 定义开关切换函数。
- onclick函数调用。
- 父模板的制作
- 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
- 汇总相关的样式形成独立的css文件。
- 汇总相关的js代码形成独立的js文件。
- 形成完整的base.html+css+js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的页面</title> <link rel="stylesheet" type="text/css" href="../static/css/1101.css"> <script src="../static/js/1101.js"></script> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件(一般不使用) --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body class="beijing" id="myBody"> <nav class="navbar navbar-default " role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a href="1101.html" class="navbar-brand" >我的页面</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="31.html"><span class="glyphicon glyphicon-user"></span> 注册</a></li> <li><a href="1031.html"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> </ul> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"> <script> document.write(Date()) </script> </div> </nav> <div class="recommend"> <div class="img"> <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p1.ssl.cdn.btime.com/t01a12b45adb9a4e81a.jpg?size=640x360" alt=""> </a> <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">户外</a></div> </div> <div class="img"> <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p3.ssl.cdn.btime.com/t0140dd0ea069120507.jpg?size=497x291" alt=""> </a> <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">运动</a></div> </div> <div class="img"> <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p4.ssl.cdn.btime.com/t01a434ca66af243645.jpg?size=640x360" alt="" > </a> <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">空间</a></div> </div> </div> <nav class="navbar navbar-default navbar-fixed-bottom " role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">MYROOM</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">管理</a></li> <li><a href="#">相册</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 说说 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>
css代码:
.beijing{ background-image: url('../img/360wallpaper.jpg'); } .recommend{ left: 50%; top: 42%; margin-left:100px; margin-top:200px; } img{ width: 25px; } div.img{ border:1px solid #cccccc; width:300px; float:left; margin:5px; } div.img img{ width:100%; height:auto; } div.desc{ text_align:center; padding:5px; } div.img:hover{ border:1px solid #000000; }
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="black"; }else{ oOnOff.src="http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background="white"; oBody.style.color="black"; } }
夜间模式:
日间模式:注册页:
登录页:
转载于:https://www.cnblogs.com/yuanyinglin/p/7774676.html