白天、暗夜双重模式+自作潜水俱乐部前端小项目+学习经验总结(一)

最新推荐文章于 2024-12-09 10:51:10 发布
最新推荐文章于 2024-12-09 10:51:10 发布
阅读量319 收藏
点赞数 2
分类专栏： HTML页面部件🦄 文章标签： 前端 小项目 总结
转载必须声明
本文链接：https://blog.youkuaiyun.com/Xmumu_/article/details/121399196
版权

嗨，这里是X，今天带来最近写的一个前端小项目，还挺不错的，所以就在这里分享一下🌭🌭下面是这个小项目的展示🍔

在这里插入图片描述
网站首页

在这里插入图片描述
其中的一些画面：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
暗夜：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

如果说想要知道怎么做的话，后续完整教程和经验总结在后面，欢迎关注噢！下期见
在这里插入图片描述

网页黑夜模式白天模式切换 html+css+js
你好呀，很高兴你在看这里~
12-21 1万+
效果： 先言： 实现是很简单的，就是背景色的切换，用的是最基础的js； 1.定义开关按钮标签，‘bai’就是里面那个小圆圈： <div class="kaiguan" > <div class="bai" id="anniu"></div> </div> 2.开关按钮的样式： .kaiguan{ position: absolute; top: 20px;
H5项目适配系统深色模式方案总结
LYFlied的博客
04-13 3658
文章目录一、背景二、问题三、H5项目适配深色模式方案1.声明 color-scheme1.1meta1.2CSS2.通过 CSS 媒体查询3.图片适配4. JavaScript中判断当前模式&监听模式变化4.1matchMedia4.2addListener()JavaScript监听判断 一、背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减
dom innerwidth innerheight （ 窗口大小事件）
qq_45827064的博客
05-19 394
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
vue配置白天-暗夜主题切换 element plus+vue3+ts
qq_61798306的博客
07-25 533
本文主要实现点击切换按钮之后进行主题切换，并将主题存储在localstore中，使得页面主题不会刷新之后就失效，默认读取的主题从localstore中读取。
Vue3+vite实现黑暗模式/暗夜模式/主题换肤
csdn1940879828的博客
04-19 1352
Vue3+vite 使用less 实现主题换肤/暗黑模式
Web前端H5项目适配暗黑模式
黑夜中的潜行者
06-28 2360
Web前端H5项目适配暗黑模式背景H5项目适配深色模式方案声明 color-schememetaCSS通过 CSS 媒体查询图片适配JavaScript中判断当前模式&监听模式变化matchMediaaddListener()JavaScript监听判断 背景   近年来随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。   深色模式不仅可以大幅减少电量的消耗，减弱强光对
css: 暗夜模式
最新发布
qq_66118130的博客
12-09 434
深色模式是，可将网站或应用程序的颜色主题从浅色背景切换为深色背景。这种模式因其在低光环境中减少眼睛疲劳，节省OLED屏幕设备的能源而变得越来越受欢迎。
关于给hexo博客适配全局暗夜深色模式
itsNekoDeng的博客
10-30 2376
前言：目前，主流系统无论是Windows、MacOS、各大手机厂商系统都支持主题全局深色模式了，所以萌生了这个想法，将博客也是配全局深色模式。
Flutter本地化存储+GetX实现白天黑夜模式切换
qq_42878191的博客
08-01 794
3.编写Themes.dart。
WordPress自适应白天暗夜 高颜值无刷新加载 首页支持三种布局 v2.4
06-08
【WordPress自适应白天暗夜主题】是一款针对WordPress平台设计的高效、美观且具有创新功能的网站模板。这款主题名为"Puock"，已更新至v2.4版本，旨在为用户提供卓越的用户体验，同时满足不同视觉环境的需求。该主题...
设置soucesight 护眼配置 暗夜模式
09-08
设置SouceSight护眼配置暗夜模式是一项针对软件开发人员和程序员的实用功能，旨在减少长时间工作在电脑屏幕前对视力的伤害。SouceSight作为一种集成开发环境(IDE)或代码编辑器的插件，常用于代码审查、调试和测试等...
易优CMS虚拟资源下载视频教程知识付费网站系统源码带WAP模板自适应+暗夜模式.txt
03-06
### 易优CMS虚拟资源下载视频教程知识付费网站系统源码带WAP模板自适应+暗夜模式 #### 一、易优CMS简介 易优CMS（EyouCMS）是一款基于PHP语言开发的内容管理系统(Content Management System)，适用于快速搭建各类...
Emlog Pro暗夜模式.zip
04-14
Emlog Pro是一款基于PHP开发的个人博客系统，其暗夜模式是为用户提供的一种夜间阅读友好的界面风格。在“Emlog Pro暗夜模式.zip”这个压缩包中，包含的文件“emlog_dark”很可能是该暗夜主题的样式表（CSS）和其他...
HTML部件之—如何实现搜索框(样式+功能实现)
热门推荐
Xmumu_的博客
08-19 2万+
大家好，这里是最可爱的大魔王????????????，今天是搜索框分享，搜素框可以说是非常非常重要的一个点啦，关于搜素框到底怎么设计、功能怎么实现的？发光搜素框怎么实现等问题做一个解释，信息量很大，别忘了收藏噢???????????? 搜素框展示 ???????????????? ????????????????(超级简约) 这款搜索框是来自：亚索老师的浏览器制作???????? 搜索框的制作多种多样，各不相同，可以按照自己的想法任意发挥，那么就以我上面发的第一个图为例子，教一下这个搜索框是如何实
(期末复习)html元素上下左右置中对齐的三种方法
Xmumu_的博客
01-04 1万+
冲 左右置中方法 设置元素对齐方式，首先先看看它的display属性： display:inline/inline-block 将父容器设定为text-align:center，就可左右置中 display:block 将元素本身的margin-left和margin-right都设定为auto，就可以左右置中 上下置中就没那么容易啦，下面介绍3种方法 上下居中 1、设置元素的position为absolute 然后设置其top和left都为50%，这个时候就是将元素左上角的位置居中在页面中间，如果想
HTML为什么我的单选框按钮两个都可以选择？怎么解决？input的radio属性使用规则
Xmumu_的博客
11-19 4468
大家好这里是X，今天有朋友来问了我一个还蛮有意思的东西，就是他在设置单选框的时候，发现他的单选框竟然可以选择多个结果???????????? 本来不想解释的，但是还是决定出一篇博客，顺便也提醒一下自己,那我就举个例子： 现在这个框的单选框和多选框都是正常的，其实为什么会出现单选框能多选的原因就是： 分组问题 就举“性别”单选框为例：你必须在代码里要体现男性、女性它们是“一组”的： <input type="radio" name="sex" value="male" checked="check
(超强理解)用jQuery实现轮播图实现方法+解析原理
Xmumu_的博客
12-20 3298
最近这段时间，我本人对原生前端的代码、css、js进行了非常认真、详细的理解和训练，我收获了特别多，最近陆续频繁地出博客，现在继续上一篇博客轮番图问题，现在用jQuery实现，其实非常地简单，希望大家看完也已有所收获，现在先来看看效果图 jQuery的下载的话，大家直接去官网下载就行了，没什么特别的要求，需要用到的jQuery方法和代码如下： ????jQuery的siblings()方法： siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。 ????jQuery的trig
CSS之可爱的伪元素::maker详解
Xmumu_的博客
07-19 2877
欢迎来到HTML部件频道???? 这里是x魔王，今天分享一个非常有用的部件以及它的用处，先来看看它的效果吧 点击是会变图案滴，那么这个的做法就得益于CSS 伪元素 ::marker 就像这个大家一定熟悉： <ul> <li>Contagious</li> <li>Stages</li> <li>Pages</li> <li>Courageous</li> <li>Sh
HTML之我才是定位王者：全面击破position属性(+文档流+absolute重叠、fixed问题)
Xmumu_的博客
01-04 1711
于之前的我而言，对position属性就是那种我知道有这个属性，但是具体怎么用，我不知道，就随便用呗，但是，但是，这种思想是非常不对的❗❗❗❗❗为痛改前非，狠心学习，终得这篇博文的问世，欢迎关注、交流???????????????????? 录子position属性概述position之static案例是否会重叠？position之absolute文档流重叠问题position之relativeposition之fixed position属性概述 该属性用于指定一个元素在文档中的定位方式，这个属性有s
android 如何在白天模式下，拿到深色/暗夜模式下的drawable 请举例
09-09
在Android中，如果你想要在应用的白天模式（通常是默认的亮色主题）和深色/暗夜模式（通常被称为夜间模式或黑暗主题）之间切换资源，比如Drawable图标、背景图片等，你可以通过以下步骤来实现： 1. **创建资源文件*...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是X大魔王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值