996导航排版样式笔记

WordPress1年前 (2022)更新 996站长

关于相关的CSS修改：

新年倒计时：

    <div class="card" style="background: url(https://i.loli.net/2021/11/12/A8uPS4zIB1oeiNv.jpg) no-repeat; background-size: cover;"><br>
<center><b> <h4><p><span style="color: #ffffff;">2023年-新春倒计时-996</span></p></h4></b></center>
<div class="gn_box">
<center>
<div id="CountMsg" class="HotDate text-light">
<span style="color: #ffffff;"><span id="t_d">10天</span>
<span id="t_h">9 时</span>
<span id="t_m">7 分</span>
<span id="t_s">42 秒</span></span>
</div><br>
</center><br>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2023/01/21 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>
</div><style>
.copyright {
margin-top: 10px;
padding: 10px;
background: #5f9ea0;
border-radius: 5px;
color : #f0ffff;
}
.copyright .copyright-title {
padding: 5px;
text-align: center;
}
.copyright .copyright-title h3 {
font-size: 18px;
}
.copyright .copyright-text {
font-size: 15px;
line-height: 25px;
}
.copyright .copyright-url {
margin: 5px 0;
}
</style>

登录弹窗样式一

直接在后台【网站后台】->【主题设置】->【添加代码】->【底部(footer)自定义 js 代码】


<link rel="stylesheet" type="text/css" href="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0accce98-f18a-476c-ae72-1ab863d93eda/0b636943-d211-4759-be18-74d2ada197c7.css">
<script type="text/javascript">
    // 站长 QQ
    let qq = '1326145460'
    function closeLoginTipsDom() {
        document.getElementById("login-tips").style.display = "none"
    }
    document.write(`<div class="none"><div id="login-tips" class="login-tips"><center><i class="iconfont icon-crying"></i><span style="margin-left: 20px; vertical-align: baseline; display: inline-block; font-size: 18px; font-weight: 700; vertical-align: middle; margin-left: 12px;">一键登录开启个人书签等功能！</span><a href="/login/" class="login-btn">立即登录</a></a></center><div style="position: absolute; top: 10px; right: 10px; background-color:rgba(255, 255, 255, 0.61); width: 20px; height: 20px; cursor: pointer; border-radius: 20px;" onclick="closeLoginTipsDom()"><i style="font-size: 12px; line-height: 20px; vertical-align: middle; margin-bottom: 8px; color:#f1404b" class="iconfont icon-close"></i></div></div></div>`)
</script>
<div class="none"><div id="login-tips" class="login-tips"><center><i class="iconfont icon-crying"></i><span style="margin-left: 20px; vertical-align: baseline; display: inline-block; font-size: 18px; font-weight: 700; vertical-align: middle; margin-left: 12px;">一键登录开启个人书签等功能！</span><a href="/login/" class="login-btn">立即登录</a></center><div style="position: absolute; top: 10px; right: 10px; background-color:rgba(255, 255, 255, 0.61); width: 20px; height: 20px; cursor: pointer; border-radius: 20px;" onclick="closeLoginTipsDom()"><i style="font-size: 12px; line-height: 20px; vertical-align: middle; margin-bottom: 8px; color:#f1404b" class="iconfont icon-close"></i></div></div></div>

效果如下：

可能不会自动关闭，待修复

登录弹窗样式二

代码：这个动漫图标可以自己改也可以删除

		<script>
			function closeLoginTipsDom() {
    document.getElementById("login-tips").style.display = "none";
}
		</script>
		<div class="none">
			<div id="login-tips" class="login-tips">
				<center>
					<img class="guide-ac" src="http://cdn.aixifan.com/acfun-pc/2.8.36/img/acimg.png" alt="996导航">
					<i class="iconfont icon-crying">
					</i>
					<span style="margin-left:20px;vertical-align: baseline;display: inline-block;font-size: 18px;font-weight: 700;vertical-align: middle;margin-left: 12px;">
						一键登录开启个人书签等功能！
					</span>
					<a href="/login/" class="login-btn">
						立即登录
					</a>
					<a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=VGVtbGBhZWNnZGEUJSV6Nzs5"
					title="给我写信" rel="nofollow" class="openlogin-qq-a">
						<i class="iconfont icon-qq login-btn">
						</i>
					</a>
					<a href="http://wpa.qq.com/msgrd?v=3&uin=1326145460&site=qq&menu=yes"
					class="login-btn">
						联系站长
					</a>
				</center>
				<div style="position:absolute;top:10px;right:10px;background-color:rgba(255,255,255,0.61);width:20px;height:20px;cursor: pointer;border-radius: 20px;"
				onclick="closeLoginTipsDom()">
					<i style="font-size: 12px;line-height: 20px;vertical-align: middle;margin-bottom: 8px;color:#f1404b"
					class="iconfont icon-close">
					</i>
				</div>
			</div>
		</div>

css：

/*弹窗*/ #footer-tools
		[data-v-db6ccf64][data-v-41ba7e2c] {
	top:unset!important;
	bottom:0!important;
	right:44px!important
}
@media
		(max-width:767.98px) {
	footer.main-footer .footer-text {
	text-align:center;
	float:none
}
#footer-tools {
	bottom:65px;
	right:5px
}
}footer.main-footer {
	margin-top:0;
	margin-bottom:80px;
}
#footer-tools {
	position:fixed;
	bottom:80px;
}
@media (max-width:768px) {
	.login-tips {
	left:0;
}
footer.main-footer {
	margin-top:0;
	margin-bottom:110px;
}
#footer-tools {
	position:fixed;
	bottom:100px;
}
}@media (min-width:768px) {
	.login-tips {
	left:0;
}
.sidebar-nav.mini-sidebar~.main-content .login-tips {
	left:60px !important;
}
}.login-tips {
	position:fixed;
	bottom:-2px;
	right:0;
	z-index:22;
	background:rgba(255,255,255,0.8);
	color:rgba(0,0,0,0.6);
	backdrop-filter:blur(10px);
	text-align:center;
	padding:10px 0;
	transition:all 0.3s;
}
.login-tips
		.go-icon {
	color:rgba(0,0,0,0.6);
	font-size:22px;
	vertical-align:middle;
}
.login-tips .login-btn {
	display:inline-block;
	vertical-align:baseline;
	height:32px;
	padding:0 20px;
	background-color:#409CED;
	color:#ffffff;
	vertical-align:middle;
	margin-left:16px;
	border-radius:4px;
	line-height:32px;
	text-align:center;
	font-size:14px;
	margin:8px 8px;
}
/*.io-black-mode
		.login-tips {
	backdrop-filter:saturate(5) blur(40px)*/;
}
.screenshot-carousel
		.img_wrapper a {
	display:contents
}
.fancybox-slide--iframe .fancybox-content {
	max-width:1280px;
	margin:0
}
.fancybox-slide--iframe.fancybox-slide {
	padding:44px 0
}
.navbar-nav
		.menu-item-2052 a {
	background:#ff8116;
	border-radius:50px!important;
	padding:5px 10px!important;
	margin:5px 0!important;
	color:#fff!important;
}
.navbar-nav
		.menu-item-2052 a i {
	position:absolute;
	top:0;
	right:-10px;
	color:#f13522;
}
.io-black-mode
		.navbar-nav .menu-item-2052 a {
	background:#ce9412;
}
.io-black-mode .navbar-nav
		.menu-item-2052 a i {
	color:#fff;
}
.io-black-mode .login-tips {
	color:#c6c9cf;
	background:#2C2E2F;
	box-shadow:0 0 25px 5px rgba(10,10,10,.25);
}
.login-tips .guide-ac {
	position:absolute;
	bottom:0;
	left:180px;
	width:330px;
	height:145px;
}

关于Tab 工具

DLY代码小工具演示效果

<div class="widget widget_block"><p><iframe loading="lazy" src="https://www.996dh.cn/tool/sj/" height="100" frameborder="no" border="0" width="100%"> </iframe></p></div>

天气小工具：

可以去：https://www.tianqi.com/ 申请代码粘贴小工具

本站已经安全运行XX年XX天XX秒

把如下代码放在html页面的网站底部你想放的地方

<span id="sitetime"  style="color: #3f7fe0;" ></span>

style=”color: #3f7fe0;” 为设置字体颜色代码

JS代码如下：代码放在</body>之前即可（放在js里面记得取消<script></script>）

<script language=javascript>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2017,09,16,00,00,00); //北京时间2017-09-16 00:00:00创建网站的时间
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        document.getElementById("sitetime").innerHTML=+diffYears+"年"+diffDays+"天"+diffHours+"时"+diffMinutes+"分钟"+diffSeconds+"秒";
    }
    siteTime();
</script>

通用的网站广告位占位/招租的代码实例

广告位占位代码实例一：灰色虚线链接框

复制以下代码到主题设置-自定义代码-自定义css样式中

a.tbaru{border:2px dashed #aaa;padding:40px 15px;font-size:14px;background-color:#fff;display:block;text-decoration:none;color:#888;font-weight:bold;text-align:center;}
a.tbaru:hover{border-color:#666;color:#444;}
@media (max-width:640px){a.tbaru{font-size:12px;padding:25px 15px;}}

然后，复制以下代码到你需要显示的广告位代码框中，其中的中文字可按照自己需求修改

<a class="tbaru" href="链接地址" target="_blank">这是一个广告位，电脑和手机可分别设置</a>

广告位占位代码实例二：深灰底白色字链接块

复制以下代码到主题设置-自定义代码-自定义css样式中

a.tbaru{padding:40px 15px;font-size:14px;background-color:#666;display:block;text-decoration:none;color:#fff;font-weight:bold;text-align:center;}
a.tbaru:hover{border-color:#555;color:#fff;}
@media (max-width:640px){a.tbaru{font-size:12px;padding:25px 15px;}}

然后，复制以下代码到你需要显示的广告位代码框中，其中的中文字可按照自己需求修改

<a class="tbaru" href="链接地址" target="_blank">这是一个广告位，电脑和手机可分别设置</a>

广告位占位代码实例三：浅灰链接块

复制以下代码到主题设置-自定义代码-自定义css样式中

a.tbaru{padding:40px 15px;font-size:14px;background-color:#f6f6f6;display:block;text-decoration:none;color:#aaa;font-weight:bold;text-align:center;}
a.tbaru:hover{border-color:#eee;color:#666;}
@media (max-width:640px){a.tbaru{font-size:12px;padding:25px 15px;}}

然后，复制以下代码到你需要显示的广告位代码框中，其中的中文字可按照自己需求修改

<a class="tbaru" href="链接地址" target="_blank">这是一个广告位，电脑和手机可分别设置</a>

简约版彩色文字广告位代码

代码放到你想放置的地方

<div class="single-top-html">
<style>
	.tp_advertising{
		width: 100%;
		display: flex;
		justify-content: space-between;
		background: #fff;
		position: relative;
		box-shadow: 0 0 3px rgba(0,0,0,.2);
	}
	.tp_advertising p{
		color: #fff;
		font-size: 14px;
		line-height: 22px;
		background: #6F8EC5;
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 0;
		padding: 0 8px;
	    border-top-left-radius: 10px;
	    opacity: .3;
	}
	.tp_advertising div{
		width: 16.66%;
		position: relative;
		z-index: 1;
	}
	.tp_advertising a{
		font-size: 12px;
		line-height: 22px;
		text-align: center;
		display: block;
		text-decoration: none;
		white-space:nowrap;
	}
	.tp_advertising a:hover{
		font-weight: bold;
		font-size: 14px;
		text-shadow: 0px 0px 1px rgba(0,0,0,.5);
	}
	.tp_1 a{
		color: #FF0033;
	}
	.tp_2 a{
		color: #9400D3;
	}
	.tp_3 a{
		color: #00BFFF;
	}
	.tp_4 a{
		color: #FF1493;
	}
	.tp_5 a{
		color: #FF4500;
	}
	.tp_6 a{
		color: #5fb878;
	}
</style>
<div class="tp_advertising">
<p>广告</p>
<div class="tp_1">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_2">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_3">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_4">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_5">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_6">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
</div>
</div>

WordPress网站添加回复可见内容

functions.php

在主题根目录下的functions.php文件中添加以下代码:

//部分内容评论可见  
function reply_to_read($atts, $content = null) {  
 extract(shortcode_atts(array(  
 "notice" => '<div class="reply">隐藏内容，回复可见“<a href="'%20.%20get_permalink()%20.%20'#respond" title="回复可见">回复本文</a>”后“<a href="javascript:window.location.reload();" title="刷新页面">刷新页面</a>”查看隐藏内容！</div>'  
 ) , $atts));  
 $email = null;  
 $user_ID = (int)wp_get_current_user()->ID;  
 if ($user_ID > 0) {  
 $email = get_userdata($user_ID)->user_email;  
 //对博主直接显示内容  
 $admin_email = get_bloginfo('admin_email');  
 if ($email == $admin_email) {  
 return $content;  
 }  
 } else if (isset($_COOKIE['comment_author_email_' . COOKIEHASH])) {  
 $email = str_replace('%40', '@', $_COOKIE['comment_author_email_' . COOKIEHASH]);  
 } else {  
 return $notice;  
 }  
 if (emptyempty($email)) {  
 return $notice;  
 }  
 global $wpdb;  
 $post_id = get_the_ID();  
 $query = "SELECT `comment_ID` FROM {$wpdb->comments} WHERE `comment_post_ID`={$post_id} and `comment_approved`='1' and `comment_author_email`='{$email}' LIMIT 1";  
 if ($wpdb->get_results($query)) {  
 return do_shortcode($content);  
 } else {  
 return $notice;  
 }  
}  
add_shortcode('reply', 'reply_to_read');

接着需要在编辑器中添加自定义按钮functions.php添加以下代码:

 //添加HTML编辑器自定义快捷标签按钮  
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');  
function bolo_after_wp_tiny_mce($mce_settings) {  
?>  
<script type="text/javascript">  
QTags.addButton( 'reply', '回复可见', '[@reply]\n\n[/reply]\n', "" );  
</script>  
<?php  
}

以上代码其中[@reply]中的@去掉

style.css

在主题根目录下的style.css文件中添加以下代码:

/*回复可见*/
.reply {
  padding: 10px;
  border: 1px #49aff9 dashed;
  background-color: #fafafa;
  color: #f40000;
  text-align: center;
  font-size: 14px;
}

以上代码根据自己喜欢可以适当修改

调用代码

在文本编辑框可看到回复可见按钮，插入即可，或者输入[@reply]和[/reply]，其中@删除掉

侧边栏添加简单的小模块

<a class="ads" href="https://www.996dh.cn/web_tools" target="终极导航"  style="border-radius:5px;">
  <h4>996导航</h4>
  <h5>996导航推荐，安全有保障</h5>
  <span class="ads-btn ads-btn-outline">立即进入</span></a>
<style>
.ads{display:block; padding:40px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}.ads h4{margin:0; font-size:22px; font-weight:bold}.ads h5{margin:10px 0 0; font-size:14px; font-weight:bold}.ads.ads-btn{margin-top:20px; font-weight:bold}.ads.ads-btn:hover{color:#ff5719}.ads-btn{display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}.ads-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}.ads-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.ads-btn-outline{line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff}.ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; background-color:#fff}
</style>

炫酷的网站小工具-倒计时

<html >
<head>
<style type="text/css">
.se-kl{width:190px;height:275px;background-color:#e83632;margin:auto;position:relative}.se-cn{position:absolute;top:42px;left:0;width:100%;text-align:center;font-size:34px;color:#fff}.se-en{position:absolute;top:90px;left:0;width:100%;text-align:center;font-size:20px;color:rgba(255,255,255,.5)}.se-io{width:20px;height:33px;position:absolute;background:url(https://img.wiiuii.cn/img/seckill.png) no-repeat;background-position:-32.5px 0;background-size:52.5px 40px;left:85px;top:126px;display:block}.se-info{position:absolute;top:170px;text-align:center;width:100%;font-size:16px;color:#fff}.se-count{position:absolute;top:212px;left:30px;height:40px}.se-day{display:none}.se-hour,.se-min,.se-sec{position:relative;background-color:#2f3430;width:40px;height:40px;float:left;text-align:center;line-height:40px;margin-right:5px}.se-txt{font-size:20px;font-weight:700;color:#fff}.se-txt:before{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e83632}
</style>
</head>
<body>
<div class="se-kl">
<div class="se-cn">倒计时</div>
<div class="se-en">COUNT DOWN</div>
<i class="se-io"></i>
<div class="se-info">距离结束还剩</div>
<div class="se-count">
<div class="se-day"></div>
<div class="se-hour"><span class="se-txt">00</span></div>
<div class="se-min"><span class="se-txt">00</span></div>
<div class="se-sec"><span class="se-txt">00</span></div>
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            var oDate = new Date();
            var nowTime = oDate.getTime(); //现在的毫秒数
            oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
            var targetDate = new Date(oDate.toLocaleDateString());
            run(targetDate);
        });

        function run(enddate) {
            getDate(enddate);
            setInterval("getDate('" + enddate + "')", 500);
        }

        function getDate(enddate) {
            var oDate = new Date(); //获取日期对象

            var nowTime = oDate.getTime(); //现在的毫秒数
            var enddate = new Date(enddate);
            var targetTime = enddate.getTime(); // 截止时间的毫秒数
            var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数

            var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
            second = second % 86400; //余数代表剩下的秒数；
            var hour = Math.floor(second / 3600); //整数部分代表小时；
            second %= 3600; //余数代表 剩下的秒数；
            var minute = Math.floor(second / 60);
            second %= 60;
            var spanH = $('.se-txt')[0];
            var spanM = $('.se-txt')[1];
            var spanS = $('.se-txt')[2];

            spanH.innerHTML = tow(hour);
            spanM.innerHTML = tow(minute);
            spanS.innerHTML = tow(second);
        }

        function tow(n) {
            return n >= 0 && n < 10 ? '0' + n : '' + n;
        }
    </script>
</body>
</html>

996导航倒计时板块：

<html >
<head>
<style type="text/css">
.se-kl{width:310px;height:275px;background-color:#e83632;margin:auto;position:relative}.se-cn{position:absolute;top:42px;left:0;width:100%;text-align:center;font-size:34px;color:#fff}.se-en{position:absolute;top:90px;left:0;width:100%;text-align:center;font-size:20px;color:rgba(255,255,255,.5)}.se-io{width:20px;height:33px;position:absolute;background:url(https://img.wiiuii.cn/img/seckill.png) no-repeat;background-position:-32.5px 0;background-size:52.5px 40px;left:85px;top:126px;display:block}.se-info{position:absolute;top:170px;text-align:center;width:100%;font-size:16px;color:#fff}.se-count{position:absolute;top:212px;left:95px;height:40px}.se-day{display:none}.se-hour,.se-min,.se-sec{position:relative;background-color:#2f3430;width:40px;height:40px;float:left;text-align:center;line-height:40px;margin-right:5px}.se-txt{font-size:20px;font-weight:700;color:#fff}.se-txt:before{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e83632}
</style>
</head>
<body>
<div class="se-kl">
<div class="se-cn">新年倒计时</div>
<div class="se-en">COUNT DOWN</div>
<i class="se-io"></i>
<div class="se-info">距离结束还剩</div>
<div class="se-count">
<div class="se-day"></div>
<div class="se-hour"><span class="se-txt">00</span></div>
<div class="se-min"><span class="se-txt">00</span></div>
<div class="se-sec"><span class="se-txt">00</span></div>
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            var oDate = new Date();
            var nowTime = oDate.getTime(); //现在的毫秒数
            oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
            var targetDate = new Date(oDate.toLocaleDateString());
            run(targetDate);
        });

        function run(enddate) {
            getDate(enddate);
            setInterval("getDate('" + enddate + "')", 500);
        }

        function getDate(enddate) {
            var oDate = new Date(); //获取日期对象

            var nowTime = oDate.getTime(); //现在的毫秒数
            var enddate = new Date(enddate);
            var targetTime = enddate.getTime(); // 截止时间的毫秒数
            var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数

            var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
            second = second % 86400; //余数代表剩下的秒数；
            var hour = Math.floor(second / 3600); //整数部分代表小时；
            second %= 3600; //余数代表 剩下的秒数；
            var minute = Math.floor(second / 60);
            second %= 60;
            var spanH = $('.se-txt')[0];
            var spanM = $('.se-txt')[1];
            var spanS = $('.se-txt')[2];

            spanH.innerHTML = tow(hour);
            spanM.innerHTML = tow(minute);
            spanS.innerHTML = tow(second);
        }

        function tow(n) {
            return n >= 0 && n < 10 ? '0' + n : '' + n;
        }
    </script>
</body>
</html>

主题添加浏览器右侧滚动条美化

将下面css代码复制添加到主题css文件即可或者添加到主题自定义css代码里面

/*滚动条样式*/
::-webkit-scrollbar {/*滚动条整体样式*/
 width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
 height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
 background-color: #12b7f5;
 background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%,
 rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
 background: #f6f6f6;
}

主题鼠标点击爱心特效

代码：主题页眉(header)中引用

<script>
    //鼠标点击出现爱心特效
    (function(window,document,undefined){
        var hearts = [];
        window.requestAnimationFrame = (function(){
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback){
                    setTimeout(callback,1000/60);
                }
        })();
        init();
        function init(){
            css(".heart{width:10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
        }
        function gameloop(){
            for(var i=0;i<hearts.length;i++){
                if(hearts[i].alpha <=0){
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i,1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }
        function attachEvent(){
            var old = typeof window.οnclick==="function" && window.onclick;
            window.onclick = function(event){
                old && old();
                createHeart(event);
            }
        }
        function createHeart(event){
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el : d,
                x : event.clientX - 5,
                y : event.clientY - 5,
                scale : 1,
                alpha : 1,
                color : randomColor()
            });
            document.body.appendChild(d);
        }
        function css(css){
            var style = document.createElement("style");
            style.type="text/css";
            try{
                style.appendChild(document.createTextNode(css));
            }catch(ex){
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }
        function randomColor(){
            return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
        }
    })(window,document);
</script>

网站导航菜单栏目增加角标

/*菜单标签美化黄色*/
.vip {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}
/*菜单标签美化红色*/
.new {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to top, #f308a0 0%, #fb0655 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}
 
/*菜单标签美化蓝色*/
.label {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to right, #6454ef 0%, #3021ec 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}
/*菜单标签美化绿色*/
.hot {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to right, #02C874 0%, #00BB00 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}

然后到主题下面的菜单设置里，在你的菜单名字后面添加上你需要的代码，如

<span class="hot">推荐</span> 显示的是绿色，大家可以自定义颜色代码

样式为258导航所用演示，其他的主题位置有偏移适当修改就好了！

打赏赞

# WordPress

文章版权归作者所有，未经允许请勿转载。

WordPress怎么全站变灰色（黑白色）

996站长

暂无评论

暂无评论...

996导航排版样式笔记

关于相关的CSS修改：

新年倒计时：

登录弹窗样式一

效果如下：

登录弹窗样式二

关于Tab 工具

天气小工具：

本站已经安全运行XX年XX天XX秒

通用的网站广告位占位/招租的代码实例

广告位占位代码实例一：灰色虚线链接框

广告位占位代码实例二：深灰底白色字链接块

广告位占位代码实例三：浅灰链接块

简约版彩色文字广告位代码

WordPress网站添加回复可见内容

functions.php

style.css

调用代码

侧边栏添加简单的小模块

炫酷的网站小工具-倒计时

主题添加浏览器右侧滚动条美化

主题鼠标点击爱心特效

代码：主题页眉(header)中引用

网站导航菜单栏目增加角标

WordPress怎么全站变灰色（黑白色）

没有更多了...

相关文章

暂无评论

最新文章

热门网址

996导航排版样式笔记

关于相关的CSS修改：

新年倒计时：

登录弹窗样式一

效果如下：

登录弹窗样式二

关于Tab 工具

天气小工具：

本站已经安全运行XX年XX天XX秒

通用的网站广告位占位/招租的代码实例

广告位占位代码 实例一：灰色虚线链接框

广告位占位代码 实例二：深灰底白色字链接块

广告位占位代码 实例三：浅灰链接块

简约版彩色文字广告位代码

WordPress网站添加回复可见内容

functions.php

style.css

调用代码

侧边栏添加简单的小模块

炫酷的网站小工具-倒计时

主题添加浏览器右侧滚动条美化

主题鼠标点击爱心特效

代码：主题页眉(header)中引用

网站导航菜单栏目增加角标

WordPress怎么全站变灰色（黑白色）

没有更多了...

相关文章

暂无评论

最新文章

热门网址

广告位占位代码实例一：灰色虚线链接框

广告位占位代码实例二：深灰底白色字链接块

广告位占位代码实例三：浅灰链接块