jquery实现网页白天与夜晚模式深色模式切换效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现网页白天与夜晚模式深色模式切换效果代码,增加了localstorage保存模式
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
/* reset-css 可以忽略 */
* {
margin: 0;
padding: 0;
}
ol,ul {
list-style: none;
}
a:link, a:hover {
text-decoration: none;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
body {
background: var(--color-whiteblock);
}
.title {
color: var(--color-blockwhite);
padding-bottom: 30px;
}
.content {
width: 1200px;
margin: 70px auto;
}
.video-img img {
width: 100%;
max-height: 335px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content ul li {
float: left;
width: 25%;
}
.content ul li .box {
padding: 15px;
}
.video-ct {
padding: 15px;
}
.content ul li .video-box {
background: var(--color-three);
border-radius: 10px;
box-shadow: 0 1px 20px 0 rgb(0 125 255 / 14%);
}
.content ul li .video-txt {
font-size: 16px;
line-heigh.........完整代码请登录后点击上方下载按钮下载查看
网友评论0