夜间模式的开启与关闭，父模板的制作（2017.11.2）

1、夜间模式的开启与关闭

放置点击的按钮或图片。

定义开关切换函数。

onclick函数调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>国民校草_李易峰</title>
     <script>
          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";
         }}
    </script>
    <base href="" target="_blank">
    <link rel="stylesheet" type="text/css" href="../static/css/20.css">

</head>
<body id="myBody" bgcolor="#ffb6c1">
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="30px">
<a href="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin" target="_blank"
   class="textred"><img
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2603934151,1374866311&fm=27&gp=0.jpg"
        style="width: 30px">Baidu百科</a>
<input type="text" style="width: 400px">
<button type="submit" class="textred">进入词条</button>
<button type="submit">搜索词条</button>
</nav>
<h1 class="textblue">李易峰</h1>
<h3>
    <span id="commentcount" class="textgeen">130323</span>粉丝总排名第五位
</h3>
<div class="entry-classify-down js-classify-list"><span class="name" class="textgeen">所属类别 : </span>
    <div class="classify-txt js-classify-txt short"> 演员<b>|</b>歌手<b>|</b>主持人</div>
</div>
<a href="https://baike.so.com/create/edit/?eid=4909310&sid=5127865"><img
        src="https://p1.ssl.qhmsg.com/t01d08b6f07a9225737.png" style="width: 200px"></a>
<form action="" method="get">
    <label style=width:100px>中国内地男明星人气人气排行榜</label>
    <select name="" onchange="javascript:if (this.options[this.selectedIndex].value != '')
 window.open(this.options[this.selectedIndex].value);this.options[0].selected;">
        <option value="0">李易峰</option>
        <option value="1">杨洋</option>
        <option value="1">胡歌</option>
    </select>
</form>
<h4 class="textblue">代表作品：</h4>
<div class="recommend">
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"><img
                src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D82%2C102%2C50/sign=18863fa2b2fd5266a77e6f54cd25af19/48540923dd54564e0b15d770b7de9c82d1584f02.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%8F%A4%E5%89%91%E5%A5%87%E8%B0%AD/5016869">古剑奇谭</a>
        </div>
    </div>
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"><img
                src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D82%2C102%2C50/sign=b6e23da9fa1fbe091c0b90540d5d3401/b21bb051f8198618fb53ed5b42ed2e738ad4e6dd.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E9%BA%BB%E9%9B%80/17612774">麻雀</a></div>
    </div>
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"><img
                src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D82%2C102%2C50/sign=9ae8341c0fd162d985bb315c77e291de/d833c895d143ad4b49f33c1887025aafa50f060c.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E6%A0%80%E5%AD%90%E8%8A%B1%E5%BC%80/15839944">栀子花开</a>
        </div>
    </div>
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"><img
                src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D82%2C102%2C50/sign=6188cf678235e5dd9079f69f10fb9fdd/1b4c510fd9f9d72a4e133f28d32a2834349bbb8b.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E8%80%81%E7%82%AE%E5%84%BF/15891954">老炮儿</a></div>
    </div>
</div>
<style type="text/css">
    p {
        color: blueviolet
    }

    .textblue {
        color: green
    }

    .textred {
        color: red;

    }

</style>
<script>
    document.write("词条标签：演员，歌手，娱乐人物")
</script>
</body>
</html>

2、父模板的制作

制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。

汇总相关的样式形成独立的css文件。

汇总相关的js代码形成独立的js文件。

形成完整的base.html+css+js

html：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索百科</title>
    <script src="../static/js/李易峰.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../static/css/liyifeng.css">
</head>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="https://www.4493.com/star/section?fenlei=1&quyu=1&sex=1">演员列表</a>
    </div>
    <div>
        <form>
            <ul class="nav navbar-nav navbar-left">
                <li class="dropdown">
                    <a href="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"
                       class="dropdown-toggle" data-toggle="dropdown">
                        首页
                    </a>
                </li>
            </ul>
        </form>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <a href="https://baike.baidu.com/usercenter">
                    <button type="submit" class="btn btn-default">个人中心</button>
                </a>
                <a href="http://baike.baidu.com/mall/">
                    <button type="submit" class="btn btn-default navbar-btn">用户</button>
                </a>
        <form class="navbar-form navbar-left" role="search">
            <a href="https://baike.baidu.com/help" class="dropdown-toggle"><button type="submit" class="btn btn-default">
                帮助
            </button></a>
        </form>
        <form class="navbar-form navbar-right" role="search">
            <a href="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin" ><button type="submit" class="btn btn-default">送花
            </button></a>
        </form>
            </form>
            </div>
    </div>
</nav>

<body id="myBody" bgcolor="#ffb6c1">
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="10px">
<h1>李易峰</h1>
<h3><span id="commentcount" class="textgeen">130323</span>粉丝总排名第五位</h3>
<a href="https://baike.so.com/create/edit/?eid=4909310&sid=5127865">
    <img src="https://p1.ssl.qhmsg.com/t01d08b6f07a9225737.png" style="width: 200px"></a>
<div class="label">
    <form method="get">
        <label>中国内地男明星人气人气排行榜:</label>
        <select name="" onchange="javascript:if (this.options[this.selectedIndex].value != '')
     window.open(this.options[this.selectedIndex].value);this.options[0].selected;">
            <a href="https://baike.baidu.com/item/%E8%83%A1%E6%AD%8C/312718">
                <option value="0">李易峰</option>
            </a>
            <a href="https://baike.baidu.com/item/%E6%9D%A8%E6%B4%8B/11573">
                <option value="1">杨洋</option>
            </a>
            <a href="https://baike.baidu.com/item/%E8%83%A1%E6%AD%8C/312718">
                <option value="1">胡歌</option>
            </a>
        </select>
    </form>
</div>
<h4 class="textblue">代表作品：</h4>
<div class="recommend">
    <div class="img">
        <h5><a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin"></a></h5>
        <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=ccb6b48247166d222c7a1dc6274a6292/48540923dd54564e0b15d770b7de9c82d1584f02.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%8F%A4%E5%89%91%E5%A5%87%E8%B0%AD/5016869">古剑奇谭</a>
        </div>
    </div>
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin">
            <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=1c3a441f8a025aafc73f76999a84c001/b21bb051f8198618fb53ed5b42ed2e738ad4e6dd.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E9%BA%BB%E9%9B%80/17612774">麻雀</a></div>
    </div>
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin">
            <img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=06534c58b0fd5266b3263446ca71fc4e/8326cffc1e178a823e993f13f003738da877e8d8.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E6%A0%80%E5%AD%90%E8%8A%B1%E5%BC%80/15839944">栀子花开</a>
        </div>
    </div>
    <div class="img">
        <a herf="https://baike.baidu.com/item/%E6%9D%8E%E6%98%93%E5%B3%B0/3908480?fr=aladdin">
            <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=e95988cb652762d09433acedc185639f/bf096b63f6246b604c86859cedf81a4c500fa249.jpg"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E8%80%81%E7%82%AE%E5%84%BF/15891954">老炮儿</a></div>
    </div>
    <br>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="http://music.baidu.com/artist/1370">音乐作品</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="http://music.baidu.com/?fr=baikePC">热门歌曲</a></li>
            <li><a href="https://baike.baidu.com/item/%E6%98%93%E5%B3%B0%E6%83%85%E4%B9%A6/15815910">专辑</a></li>
            <li class="active"><a href="http://bd.kuwo.cn/mingxing/%E6%9D%8E%E6%98%93%E5%B3%B0.htm?from=baidu">单曲</a></li>
            </li>
        </ul>
    </div>
    </div>
</nav>
<footer>
    <div class="foot">
       <div > <a href="#"> 点我呀</a> · <a href="#"> 加入我们</a> ·  <a href="#"> 歌曲或歌名 </a> ·  <a href="#">帮助中心</a> · <a href="#">合作伙伴</a></div>
        <div>中国大陆男演员</div>
    </div>
</footer>
</body>
</html>

 

 

 

css：

h1 {
    margin-left: 60px;
    margin-top: 2%;
    color: seagreen;
    font-family: Aharoni;
}
input {
    height: 24px;
    width: 500px;
}
h3 {
    color: darkseagreen;
    margin-left: 45%;
    margin-top: -4%;
}

.label {
    margin-left: 570px;
    color: seagreen;
    font-family: Aharoni;
}

h4 {
    margin-left: 10px;
    color: seagreen;
    font-family: Aharoni;
    font-size: 15px;
}

img {
    width: 20px;
}
div.img {
    border: 1px solid #cccccc;
    width: 100px;
    height: auto;
    float: left;
    margin: 4px;
}
div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    text-align: center;
    padding: 5px;
}

div.img:hover {
    border: 1px solid #000000;
}

div.clearfolat {
    clear: both;
    solid-color: black;
}
.box {
    border: 1px solid palevioletred;
    position: absolute;
    top: 15px;
    left: 40px;
    float: left;
    height: 350px;
    width: 400px;
    margin-left: 30%;
}
.input_box {
    height: 60px;
    width: 80px;
    margin-left: 10%;
}
input {
    align-self: center;
    height: 30px;
    width: 300px;
}
.foot{
    font-family: 宋体;
    font-size: 20px;
    margin-bottom: 100px;
}

 

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 = "white";
    } else {
        oOnoff.src = "http://www.runoob.com/images/pic_bulbon.gif";
        oBody.style.background = "white";
        oBody.style.color = "black";
    }}

posted @ 2017-11-02 21:12  赖黛俐  阅读(974)  评论(0)  编辑  收藏  举报