当前第2页 返回上一页
HTML
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>页面适应黑暗模式</title>
</head>
<body>
<div><h1>测试文字</h1></div>
</body>
</html>
|
CSS
1 2 3 4 5 6 7 8 9 10 11 | .back {background: white; color: #555;text-align: center}
@media (prefers-color-scheme: dark) {
.back {background: #333; color: white;}
.models {border:solid 1px #00ff00}
}
@media (prefers-color-scheme: light) {
.back {background: white; color: #555;}
.models {border:solid 1px #2b85e4}
}
|
相关视频教程推荐：html视频教程
以上就是html如何实现暗黑模式的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
Html有哪些行内块元素
怎么用Html实现音乐播放
在一个Html中h1标签能出现几次？h1标签和标题标签的差别是什么？
Html如何嵌套页面？<iframe>标签告诉你答案
Html标签中行内元素和块级元素详解
关于Html操作滚动条的方法
Html中鼠标停留时整行变色
Html怎么设置button大小及颜色
Html如何设置一个按钮
Html怎样让div居中
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » html如何实现暗黑模式
