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

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

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

    7. 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;
           }

      JS

时间： 2024-08-03 09:29:22

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

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

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

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

夜间模式的开启与关闭 放置点击的按钮或图片. 定义开关切换函数. onclick函数调用. 父模板的制作 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等. 汇总相关的样式形成独立的css文件. 汇总相关的js代码形成独立的js文件. 形成完整的base.html+css+js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

关于mysql严格模式的开启、关闭

由于项目中对一些默认值设置问题,以及种种原因,mysql数据库需要使用非严格模式开发(mysql最近的版本默认是开启严格模式的). linux下mysql服务下操作步骤是: 1.进入mysql服务  2.执行set操作修改,我们项目是直接设置为'' mysql> set global sql_mode=''; #这种方法修改,当前会话失效后,这个修改就没意义了,建议修改配置文件的方式修改 3.修改后,不需要重启mysql服务,立即生效 4.检查是否生效,执行sql select @@sql_mo

Android网络开启、关闭整理

近段时间由于要对手机网络状况进行判断.开启和关闭,从网上找了些资料,现整理如下 包含了对WiFi.GPRS.飞行模式的开启.关闭以及一些状态的检测,在小米和三星平板上测试均通过 [java] view plaincopy package com.my.device_admin.business; import java.lang.reflect.Method; import android.content.Context; import android.content.Intent; impor

[Android Traffic] Android网络开启、关闭整理

转载: http://blog.csdn.net/tu_bingbing/article/details/8469871 近段时间由于要对手机网络状况进行判断.开启和关闭,从网上找了些资料,现整理如下 包含了对WiFi.GPRS.飞行模式的开启.关闭以及一些状态的检测,在小米和三星平板上测试均通过 <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/> <uses-permis

ReactJS React+Redux+Router+antDesign通用高效率开发模板，夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

Win10系统如何设置打开夜间模式？

Win10系统带有夜间模式的功能,能在开启的状态下减弱电脑屏幕的蓝光,在光线较弱的情况下很好的保护用户的眼睛不受伤害.那么我们怎么开启和设置Win10系统电脑的夜间模式呢?下面就来一起看看.Win10系统电脑开启和设置夜间模式的方法1.从左下角的开始菜单中打开Windows设置,然后选择点击"系统".2.在系统设置的右侧栏中找到夜间模式,就可以进行夜间模式的相关设置了.3.在夜间模式的设置中,点击滑动开关,就可以打开或关闭电脑的夜间模式.4.然后可以对夜间模式的自动开启和自动关闭的时间

博客园美化夜间模式

博客园美化夜间模式 一.点击控制样式 主要看思路,自己增删改查,里面样式只针对我的博客 一.触发点击 二.修改按钮样式以及对于类名 三.将模式信息存入sessionStorage中 四.更具按钮的类名,自己博客样式进行跟换 <!--夜间模式点击事件js--> <script > let night_close = document.querySelector('.night-close')||document.querySelector('.night-open'); night_

WPF窗口阴影和夜间模式的实现

窗口阴影 实现 因项目需要给用户一定提示,设计师建议在鼠标进入时显示窗口阴影,离开时取消窗口阴影. 很自然,都会想到直接在窗口的内容或者自定义窗口的最外层元素上加效果.示例如下: <Grid> <Grid.Effect> <DropShadowEffect x:Name="ShadowEffect" BlurRadius="15" Direction="270" Opacity="0" Shado