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

时间:2021-12-24 23:54:52
    1. 间模式的开启与关闭
      1. 放置点击的按钮或图片。
      2. 定义开关切换函数。
      3. onclick函数调用。
    2. 父模板的制作
      1. 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
      2. 汇总相关的样式形成独立的css文件。
      3. 汇总相关的js代码形成独立的js文件。
      4. 形成完整的base.html+css+js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>On&Off</title>
<script>
function mySwitch(){
var oBody = document.getElementById("myBody");
var oOnOff = document.getElementById("myOnOff");
if(oOnOff.src.match("on")){
oOnOff.src
="../static/img/off.jpg";
oBody.style.background
="black ";
oBody.style.color
="white";
}
else {
oOnOff.src
="../static/img/on.jpg";
oBody.style.background
="white";
oBody.style.color
="gray";
}
}
</script>
</head>
<body id="myBody">

<nav>
<a class="logo" href="/">
<img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1185915212.png" alt="Logo"></a>

<a href="">我爱淘宝</a>
<a href="">春夏款</a>
<a href="">秋冬款</a>
<a href="">男款</a>
<a href="">女款</a>
<a href="">童装</a>

<input type="text"name="search">
<button type="submit">搜索</button>

<img id="myOnOff" onclick="mySwitch()" src="img/on.jpg" width="45px">
</nav>

<p></p>

</body>
</html>

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

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