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

时间：2017-11-04 23:39:53 阅读：148 评论：0 收藏：0 [点我收藏+]

标签：width png blog set base body hit 100% input

夜间模式的开启与关闭
1. 放置点击的按钮或图片。
2. 定义开关切换函数。
3. onclick函数调用。

父模板的制作

制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
汇总相关的样式形成独立的css文件。
汇总相关的js代码形成独立的js文件。
形成完整的base.html+css+js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夜晚模式</title>
    <h4>护眼模式</h4>
    <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>

</head>
<body id="myBody">

<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
<script>document.write(Date())</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <title>ＭＩＳ问答平台</title>
    <style type ="text/css">
        p{
            color:red;
        }
        h1{
            background-color:darkgreen;

        }
        .textblue{
            color:blue;
        }
        #tt{
            color:#FFD700;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="taobao.css">

    <base href="http://sinaing.cn/dy/weather/main/index14/007/icons_32_y1/"target="_black">
    <style...></style...>


</head>
<body>
<nav>
    <a href=""><ing scr="w_02_08_00.png">首页</a>
    <a href="http://www.gzcc.cn/">下载APP</a>
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="">登录</a>
    <a href="">注册</a>

</body> </html>

CSS

img{
               width: 300px;
           }
           .img{
               border:1px solid #FF60AF;
               width:180px;
               float:left;
               margin:3px;
           }
           .img img{
               width:100%;
               height:auto;
           }
           .desc{
               text-align:center;
               padding:3px;
           }
           .img:hover{
               border:1px solid#8E8E8E;
           }
           .clearfloat{
               clear:both;
           }

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

标签：width png blog set base body hit 100% input

原文地址：http://www.cnblogs.com/123hyf/p/7777431.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行