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