码迷,mamicode.com
首页 > 其他好文 > 详细

夜间模式的开启与关闭,父模板的制作

时间:2017-11-03 20:32:02      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:html   else   otp   button   电影   sea   set   www.   bottom   

 

  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
  2. 父模板的制作
    1. 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js

 

base.html

<!
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>youku</title> <base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank"> <link rel="stylesheet" type="text/css" href="T5.css"> <style type="text/css"> h1{ color:gray} p{ color:darkcyan;font-size: 20px; } .textblue{ color:pink; text-decoration: underline; } c{ color:yellow; } </style> </head> <body> <nav> <img src="w_02_08_00.png"> <a href="http://www.youku.com//">首页</a> <a href="">download</a> <input type="text" name="search"> <button type="submit">搜索</button> <a href="">登录</a> <a href="">注册</a> </nav> <hr> 类型 <p> 电视剧</p> <p > 电影</p> <p > 综艺</p> <p > MV《6》</p> <hr> </body> </html>
css

h2
{ align:center; } .flex-container { display: -webkit-flex; display: flex; width: 300px; height: 150px; padding-left: 100px; padding-top: 30px; background-color: peachpuff; } #input_box{ align:center; margin:400px; padding-left:400px; } #error_box{ color: hotpink; } body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; padding-bottom:30px; padding-top:40px; font-family:verdana,Arial,Helvetica,sans-serif; }

 

 js

function mySwitch() { var oBody = document.getElementById("myBody"); var oOnOff = document.getElementById("myOnOff"); if (oOnOff.src.match("t017093260071a8a9a3")) { oOnOff.src = "http://img.orz520.com/t014babd2bef733fe05.gif"; oBody.style.background = "black"; oBody.style.color = "white"; } else { oOnOff.src = "http://p3.so.qhimgs1.com/t017093260071a8a9a3.gif"; oBody.style.background = "white"; oBody.style.color = "black"; } }

夜间模式的开启与关闭,父模板的制作

标签:html   else   otp   button   电影   sea   set   www.   bottom   

原文地址:http://www.cnblogs.com/lishanting/p/7777455.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!