- 夜间模式的开启与关闭
- 放置点击的按钮或图片。
- 定义开关切换函数。
- onclick函数调用。
- 父模板的制作
- 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
- 汇总相关的样式形成独立的css文件。
- 汇总相关的js代码形成独立的js文件。
- 形成完整的base.html+css+js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>霓虹 - 点击打开你的视野</title>
<link rel="stylesheet" href="../static/css/base.css" type="text/css">
<script src="../static/js/base.js"></script>
</head>
<body id="myBody">
<nav style="padding-top:5px">
<img id="myOnOff" onclick="mySwitch()"
src="http://www.runoob.com/images/pic_bulbon.gif" width="30px">
<a href="">首页</a>
<a href="">下载APP</a>
<a href="">登录</a>
<a href="">注册</a>
</nav>
<div class="area">
<br>
<select>
<option>文化</option>
<option>留学</option>
<option>旅游</option>
<option>娱乐</option>
</select>
<p>日本的“读书之秋”的由来及推荐的四本书</p>
<p>2017红白歌会的出场名单会是这些人吗？</p>
</div>
<div class="subarea">
<div class="img">
<a href="https://www.zhihu.com/question/28715237/answer/83938634"><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509619400048&di=0a3de93d08ed7737aef765d7d7605649&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fbj%2Fpics%2Fhv1%2F35%2F44%2F2049%2F133247480.png"></a>
<div class="desc"><a href="https://www.zhihu.com/question/28715237/answer/83938634">日本的鲤鱼旗有什么含义？</a></div>
</div>
<div class="img">
<a href="https://www.baidu.com/link?url=9TQR74QaJSq58bTzm0ELKi-BPFqgGU6PCsCKxv2f0iRZ5pUNy-eBcFwc_U1jyKCs&wd=&eqid=9c41d575000042b00000000659facdd0">
<img src="http://www.sxdaily.com.cn/NMediaFile/2015/0307/SXRB201503070810000126303204969.jpg"></a>
<div class="desc"><a href="https://www.baidu.com/link?url=9TQR74QaJSq58bTzm0ELKi-BPFqgGU6PCsCKxv2f0iRZ5pUNy-eBcFwc_U1jyKCs&wd=&eqid=9c41d575000042b00000000659facdd0">细品寿司的前世今生</a></div>
</div>
</div>
<br>
<footer>
<div class="footer_box">
[email protected]丝滑酱
</div>
</footer>
</body>
</html>
css文件:
.img {
border: 1px solid #cccccc;
width: 300px;
margin: 5px;
float: left;
}
div.img img {
width: 100%;
height: auto;
}
div.img:hover {
border: 1px solid #000000;
}
div.desc {
text-align: center;
padding: 5px;
}
.area {
height: 250px;
}
.subarea {
height: 100px;
}
footer{
position:absolute;
bottom:0;
width:100%;
}
footer .footer_box{
background-color:pink;
padding: 10px;
color : grey;
text-align: center;
}
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 = "yellow";
} else {
oOnoff.src = "http://www.runoob.com/images/pic_bulbon.gif";
oBody.style.background = "white";
oBody.style.color = "black";
}
}
时间： 2024-08-03 09:29:19