当前第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 details标签怎么用
Html读取不了css样式怎么办
Html怎么设置行距
Html边框线怎么设置
利用Html+css+js实现简单的点赞效果
Html中<input>标签的class属性的值及其使用方法总结
Html中的ol标签如何去掉标号呢？<ol>标签的使用方法总结
Html方法是什么
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » html如何实现暗黑模式
