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

最新推荐文章于 2024-09-07 16:12:33 发布
最新推荐文章于 2024-09-07 16:12:33 发布
阅读量263 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yuanyinglin/p/7774676.html
版权
  2. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
  3. 父模板的制作
    1. 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的页面</title>
    <link rel="stylesheet" type="text/css" href="../static/css/1101.css">
    <script src="../static/js/1101.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

<nav class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="1101.html" class="navbar-brand" >我的页面</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="31.html"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href="1031.html"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
        </ul>
        <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
<script>
    document.write(Date())
</script>
    </div>
</nav>


<div class="recommend">
    <div class="img">
        <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p1.ssl.cdn.btime.com/t01a12b45adb9a4e81a.jpg?size=640x360" alt=""> </a>
        <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">户外</a></div>
    </div>
    <div class="img">
        <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p3.ssl.cdn.btime.com/t0140dd0ea069120507.jpg?size=497x291" alt=""> </a>
        <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">运动</a></div>

    </div>
    <div class="img">
        <a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"><img src="https://p4.ssl.cdn.btime.com/t01a434ca66af243645.jpg?size=640x360" alt="" > </a>
        <div class="desc"><a href="https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh">空间</a></div>

    </div>
</div>

<nav class="navbar navbar-default navbar-fixed-bottom " role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">MYROOM</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
             <li class="active"><a href="#">管理</a></li>
            <li><a href="#">相册</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    说说 <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

</body>
</html>

      css代码：

      .beijing{
  background-image: url('../img/360wallpaper.jpg');
}
.recommend{
        left: 50%;
        top: 42%;
        margin-left:100px;
        margin-top:200px;
}
img{
        width: 25px;
  }
  div.img{
        border:1px solid #cccccc;
        width:300px;
        float:left;
        margin:5px;
    }
    div.img img{
        width:100%;
        height:auto;
    }
    div.desc{
        text_align:center;
        padding:5px;
    }
    div.img:hover{
        border:1px solid #000000;
    }

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

      夜间模式：


      日间模式：

      注册页：

      登录页：

       

转载于:https://www.cnblogs.com/yuanyinglin/p/7774676.html

weixin_30664051
关注
xmind 拖拽_XMind 2020
weixin_39977642的博客
12-20 566
XMind2020 作为一个重新设计的新版本，不但具备XMind全面的思维导图功能，同时还有重新设计的界面和交互方式。和较先推出的iOS版本使用了一样的设计语言，可以通过存储文件在iCloudDrive 和iOS版本配套使用。增强版大纲视图虽然 XMind: ZEN 在去年的版本更新中就支持了大纲视图，不过彼时的大纲模式不论是在展示形式和功能方面都还比较简单，新版 XMind...
如何 建设新闻 网站
subuser的专栏
12-24 7406
 一、                新闻网站概述1． 闻媒体的比较网络传播不仅突破了纸媒体新闻传播的"时间差"障碍，而且打破了电媒体"点对面"的单向传播模式，取而代之的是全新的"点对点"的双向互动的网际传播方式。在电视上，直播是一种节目形式，是经过编导组织化、结构化的立体时空，观众看到的是一个结构好的整体，但所谓众口难调，不可能照顾到每个人的信息取向和情感需求。而网上直播则更多地提供
bootstrap-dark：黑暗模式和Bootstrap 4权威指南-概念验证
02-07
黑暗模式和引导程序的权威¹4 概念证明/长格式白皮书[深色纸] 此工作内容与。 如果您要进行的相同工作，请访问库。 跳到： 关于我和引领这里的历史 首先，我想指出我不是专业的开发人员-从88年代到05年代我是，但是现在我不这样做。 我是一名电气工程师和商人，负责管理数据中心及其员工，并设计UPS，HVAC和电源系统……这是我的日常工作。 但是我仍然喜欢代码。 我的爱好是编码，自2005年以来我编写的所有代码都在某个地方开源。 我也不是“图形”或“艺术”人士-我没有设计，UI或UX方面的知识-但我知道这是基本概念。 我也不是长篇小说作家...我患有阅读障碍，并且相对较低-因此这些杂记可
bootstrap-darkmode:使用 Bootstrap 4 实现暗模式的样式表和脚本
07-23
引导暗模式 这个项目提供了一个样式表和两个脚本，允许你在你的网站上实现一个黑暗的主题。 它最初根据用户偏好加载，可以通过开关切换，并通过localStorage保存。 您可以在明暗状态下查看带有所有默认引导程序组件的（感谢 ！）。 如果您使用的是 Angular，请查看 。 用法 使用 NPM/纱线/PNPM 安装： $ npm install bootstrap-darkmode $ yarn add bootstrap-darkmode $ pnpm install bootstrap-darkmode 包括样式表，例如在styles.scss ： @import " ~bootstrap-darkmode/scss/darktheme " ; 通过 unpkg.com 将样式表链接放在<head> 。 不要忘记添加引导程序。 < head > <!--
夜间模式实现方法2
04-25
该文档总结了一种通过切换主题实现夜间模式的方法。 有兴趣的同学可以参考，有不懂的地方欢迎留言，共同进步！ 谢谢！
leetcode黑暗模式-Leetcode-Visualizer:以漂亮的方式查看您的Leetcode进度！
07-07
leetcode 黑暗模式力码可视化工具 特征 亮/暗模式 难度明智的情节（简单，中等，困难） 类别明智的图（阵列，回溯等...） 完全存在于用户的浏览器中这也意味着，任何人都不会收集任何数据。 计划功能 删除复制粘贴过程 分析提交 将其转换为跨浏览器扩展（以上两个的解决方案） 用法 转到页面。 按照那里的说明进行操作。 技术细节 ReactJS 材质界面 重新图表 本地开发 运行以下命令来设置环境并安装依赖项。 git clone https://github.com/CITIZENDOT/Leetcode-Visualizer.git cd Leetcode-Visualizer yarn install 启动开发服务器。 yarn start 在做 PR 之前，如果你想贡献，请创建一个新分支。 创建一个拉取请求到分支。 贡献 和往常一样，我承诺先批准 Pull Request，然后再审核。 :winking_face:
夜间模式的实现
qq_36145843的博客
03-13 707
常见的实现夜间模式的方法有三种： 一.使用自定义的Theme来实现 二.使用DayNight主题来实现 三.使用映射id的方法来实现
ue5渲染图片序列具体变量
05-24
此命令用于控制摄影机近裁剪平面的开启与关闭。设置为0表示关闭近裁剪平面，而设置为1则表示开启。 **应用场景：** - 在某些特殊镜头效果（如鱼眼镜头）中，关闭近裁剪平面可以实现更加宽广的视角。 - 通常情况下，...
Android重点面试题
weixin_44440150的博客
05-24 939
视频播放 视频播放的实现方式？ 1、使用其自带的播放器。指定Action为ACTION_VIEW,Data为Uri，Type为其MIME类型。 2、使用VideoView来播放。在布局文件中使用VideoView结合MediaController来实现对其控制。 3、使用MediaPlayer类和SurfaceView来实现，这种方式很灵活。 4、还有一些三方的（节操视频，饺子视频）的使...
vueBootstrap-darkmode-toggle-temp：使用VueBootstrap设置样式的Vue应用程序，以及使用vuex的深色模式主题切换和内置的引导样式
02-19
Vue可切换引导 目标：创建一种简单的方法来更改Bootstrap产品组合，使其在运行时具有深色模式的功能（无需使用Vuetify或其他程序包） 方法： 使用Vuex处理自举颜色更改/变体更改，并将变量传递到整个应用程序中。 在App.Vue中使用.light和.dark类，可以使用样式为每个变量存储2种颜色，并使用javascript方法进行切换。 附加：可以通过创建引导程序自定义主题或变体并使用上述方法来调用它来创建更多选项。 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 vueBootstrap-darkmode-toggle-temp
dark-mode-switch：使用Bootstrap自定义开关添加深色模式主题切换
02-05
:first_quarter_moon: 暗模式开关 添加带有Bootstrap自定义开关的暗模式主题切换。 使用本地存储来保存首选项 压缩和压缩后只有262个字节！ 快速开始 提供几个快速入门选项： 克隆仓库git clone https://github.com/coliff/dark-mode-switch.git 使用 npm install dark-mode-switch 安装yarn add dark-mode-switch 用法 为Dark Mode切换添加自定义开关，然后添加dark-mode-switch.min.js脚本： < div class =" custom-control custom-sw
bootstrap-dark-5:暗模式和Bootstrap辅助指南5-v4暗模式POC的延续
03-27
暗模式和Bootstrap辅助指南5 v4黑暗模式POC的延续，但这次是v5 这是的后续工作，并且与 （ ）有关。 如果您要进行的相同工作，请访问。 这是一个``进行中的工作''，专门基于Bootstrap 5-Beta 3- 尚不建议在生产环境中进行此工作。 我试图将这个项目（“ -dark”变体）合并到Bootstrap核心中（请参阅 ） ，但是在考虑这一点的同时，我将继续研究此附加组件。 如果您希望将其添加到Bootstrap核心中，请通过在添加注释来告知作者。 关于 如果您不先阅读那么这段代码将毫无意义。 你得到了什么？ 该代码编译了原始工作体的四种方法（和变体，共六个） ，但是为Bootstrap 5进行了编译和采购。 这些是： 方法1 （） bootstrap-night ：这只是一个黑暗的bootstrap主题。 但是，它可以与Bootstrap核心CS
ModoNoche.css:带有CSS的黑暗或夜间模式HTML切换按钮
05-02
夜间模式 带有CSS的黑暗或夜间模式HTML切换按钮
vue2+less实现夜间模式
cnlovedudu的博客
07-12 1669
夜间模式vue2+less 项目中使用less预处理器 安装依赖：less、less-loader、style-resources-loader 实现步骤 1、建一个theme.less文件（定义通用变量） //白天模式下色值 @opacity-light:100%; @color-main-red-light: #D43C33;/* 品牌主色，用于导航栏，按钮，需要强调的文字等*/ @color-main-25-light: #252525;/* 品牌主色，用于工具栏背景等*/ ... //夜间模式下色
jquerydemo夜间模式，白天模式
gxf_ming的博客
03-21 2140
*{ padding:0; margin:0; } div{ width: 944px; margin:0 auto; } $(function(){ $($("button")[0]).click(function(){ $("body").css("background
夜间模式切换的实现库,三行代码实现流畅切换
weixin_34221775的博客
09-13 328
Implementation of night mode for Android. 用最简单的方式实现夜间模式，支持ListView、RecyclerView。 项目GitHub地址: https://github.com/zhangke301... Preview Usage xml android:backgroun...
夜幕下的代码旋律：Vue.js 黑暗模式的优雅实现
最新发布
繁依Fanyi的博客
09-07 630
想象一下，你在一个灯光昏暗的房间里编写代码，而你的屏幕不再像个发光的灯泡，而是如同一片宁静的夜空——这就是黑暗模式带来的舒适体验。试想一下，当你的同事们看到你用着酷炫的黑暗主题时，他们一定会投来羡慕的目光，仿佛你已经走在了时代的最前沿。一个优秀的黑暗模式应该像一杯醇香的红酒，既能展现出深沉的魅力，又能给人带来愉悦的感受。“别让你的页面看起来像午夜的鬼故事，而是像一场深夜的爵士乐会。Vue.js 提供了多种方式来实现黑暗模式，每一种都有它的独特之处，就像烹饪一样，你可以根据个人口味选择不同的“食谱”。
AppCompatDelegate详解：Android夜间模式实现步骤与注意事项
2. **主题设置**：在`res/values`目录下创建一个与白天资源文件夹相对应的`values-night`文件夹，用于存放夜间模式下的特定资源，如颜色、布局等。应用的主题需要继承自`Theme.AppCompat.DayNight`。 3. **全局和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值