搜索到
15
篇与
的结果
-
Typecho文章页面实现长久没有更新文章的提示 方法打开主题目录下post.php文件，在适当位置添加如下代码，一般添加在post-content后面（表示文章正文开始的地方） <div class="tip inlineBlock share" rel="nofollow"> <p> 本文最后更新于<?php echo date('Y年m月d日' , $this->modified);?>， 已超过<?php echo floor((time()-($this->modified))/86400);?>天没有更新。 如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！ </p> </div>注意：代码引用的css是handsome主题内置的，如果要用在其他主题，请自行把这个css扒下来！ -
Typecho不同分类文章标题显示不同颜色 如果你想在index页面，让文章标题的颜色根据分类显示，那么就打开你的模板文件夹下的index.php文件,将:<h2 class="entry_title"></h2>替换为 <h2 class="entry_title"> <a href="<?php $this->permalink() ?>" class="<?php echo $this->category; ?>"><?php $this->title() ?></a> </h2>这样就会在index页面的每篇文章里加上class=”分类缩略名”，然后我们就可以用这个来修改css样式了。打开你的主题文件夹下style.css文件来定义css，比如我的一个分类是news，想把分类下文章标题都变成红色的，那么添加代码.news{color:red;}同理，你也可以将archives.php，以及post.php等页面都照此法处理。注意如果一篇文章属于多个分类，那么用：<?php echo $this->category; ?>只能输出一个分类缩略名，暂时还没找到更好的办法。
-
百度编辑器h1~h6标题美化 【教程】找到网站xiunobbs 站点中的/view/css/bootstrap-bbs.css，然后在合适的位置(适合的位置...自己思考)插入如下代码：/* H6标题 */ .card-body .message h6 { border-left: 3px solid #6293d4; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H5标题 */ .card-body .message h5 { border-left: 4px solid #84985a; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H4标题 */ .card-body .message h4 { border-left: 5px solid #b55594; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H3标题 */ .card-body .message h3 { border-left: 6px solid #a232de; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H2标题 */ .card-body .message h2 { border-left: 7px solid #32de5d; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H1标题 */ .card-body .message h1 { border-left: 8px solid #de3232; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; }撰稿人: 22SS
-
新年倒计时代码 <style type="text/css"> .deng-box{position:fixed;top:-40px;right:-20px;z-index:9999;pointer-events:none} .deng-box1{position:fixed;top:-30px;right:10px;z-index:9999;pointer-events:none} .deng-box2{position:fixed;top:-40px;left:-20px;z-index:9999;pointer-events:none} .deng-box3{position:fixed;top:-30px;left:10px;z-index:9999;pointer-events:none} .deng-box1 .deng,.deng-box3 .deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px #fc903d} .deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px #fa6c00} .deng-a{width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:12px 8px 8px 8px;border-radius:50% 50%;border:2px solid #dc8f03} .deng-b{width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:-4px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03} .xian{position:absolute;top:-20px;left:60px;width:2px;height:20px;background:#dc8f03} .shui-a{position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50% -45px;background:orange;border-radius:0 0 5px 5px} .shui-b{position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%} .shui-c{position:absolute;top:18px;left:-2px;width:10px;height:35px;background:orange;border-radius:0 0 0 5px} .deng:before{position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .deng:after{position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .deng-t{font-family:华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center} .night .deng-box,.night .deng-box1,.night .deng-t{background:0 0!important}@-moz-keyframes swing{0%{-moz-transform:rotate(-10deg)}50%{-moz-transform:rotate(10deg)}100%{-moz-transform:rotate(-10deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg)}100%{-webkit-transform:rotate(-10deg)}} </style> <article> <div class="gn_box wow zoomIn"> <h1> <center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>1</font><font color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font> </center> </h1> <center> <div id="CountMsg" class="HotDate" style="margin-bottom: 10px;"> <font color="red"><span id="t_d">* 天</span></font> <font color="red"><span id="t_h">* 时</span></font> <font color="red"><span id="t_m">* 分</span></font> <font color="red"><span id="t_s">* 秒</span></font> </div> </center> <script type="text/javascript"> function getRTime() { var EndTime = new Date("2021/02/11 00:00:00"); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 1000); </script> </div> </article> <!--新年倒计时结束-->
-
-
-
文字彩虹跑马灯效果特效代码 代码： <style> .masked{ text-align: center; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s infinite linear } @-webkit-keyframes masked-animation { 0%{ background-position: 0 0;} 100% { background-position: -100% 0; } </style><span class="masked">文字彩虹跑马灯效果特效代码</span>
-
弹窗广告代码分享 HTML代码：<!-- 弹窗 --> <div class="modal fade" id="modal_20200114" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">公告</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 内容 </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" id="modal_20200114_lock">我知道了，不要再弹出</button> </div> </div> </div> </div>JS代码：（放到底部)<script> !function (){ var a = $('#modal_20200114'); var b = $('#modal_20200114_lock'); var k = $.cookie('modal_20200114_lock'); if(!k){ a.modal('show'); b.on('click', function() { $.cookie('modal_20200114_lock', '1'); }); } }(); </script>
-
css 流光按钮 先看效果图：实现简单炫酷，直接复制查看效果CSS:<style> .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 90px; line-height: 90px; text-align: center; color: #fff; font-size: 25px; text-transform: uppercase; cursor: pointer; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 60px; } .btn:hover { animation: animate 8s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } .btn::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 40px; opacity: 0; transition: 0.5s; } .btn:hover::before { filter: blur(20px); opacity: 1; animation: animate 8s linear infinite; } </style> <body> <b href="#" class="btn">button</b> </body>
