WordPress及其他网站侧边栏美化实用代码指南

<div class="card-content">
<img width="100%" height="200px" src="https://dh.lt6.ltd/ip/IP-master/">
</div>

<div class="card">
    <div class="card-head"><i class="fa fa-address-card-o" aria-hidden="true"></i>来访信息</div>
            <div class="card-content">
    <img width="100%" height="150px" src="https://dh.lt6.ltd/ip/IP-master/">
    </div></div>

<a class="pic" href="https://dh.lt6.ltd/mn/tp.html" target="_blank"><img src="https://dh.lt6.ltd/mn/sj.php"></a>

<div class="card">
				    <div class="card-head"><i class="fa fa-pie-chart fa-fw"></i>高清壁纸欣赏-点击图可切换</div>
            <style type="text/css">


.box .triggers { width: 9px; position: absolute; right: 12px; top: 40px; height: 95px; overflow: hidden }
.box .triggers a { display: block; width: 9px; height: 9px; margin-bottom: 8px; float: left; _display: inline; color: #fff; text-align: center; font: 600 14px/19px arial,sans-serif; overflow: hidden; background: url(https://dh.lt6.ltd/assets/images/T1.lJGFlVcXXa6Q3bb-9-18.gif) no-repeat 0 0 }
.box .triggers a.current { background-position: 0 -9px }
.box .frames { width:92%;height:340Px; overflow: hidden; position: relative; top: 5px; left: 5px; float: left }
.box .frames .item { display: none; width:100%; position: relative }
.box .item .pic { display: table-cell; vertical-align: middle; width:100%; text-align: center; font: normal 12px/1.5 arial; *display: block; overflow: hidden; *font-size: 139px }
.box .item .pic img { width:100%; border: none; vertical-align: middle }

</style>
<div class="card-body">
	<div class="box">
		<div id="ds1-ef1">
			<div class="frames">
				<div class="item" id="pic0" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;">
					<a class="pic" href="https://dh.lt6.ltd/mn/tp.html" target="_blank"><img src="https://dh.lt6.ltd/mn/sj.php"> </a>
				
				</div>
				<div class="item" id="pic1" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;">
					<a class="pic" href="https://dh.lt6.ltd/mn/tp.html" target="_blank"><img src="https://dh.lt6.ltd/mn/sj1.php"> </a>
				
				</div>
				<div class="item" id="pic2" onmouseout="mmplay()" onmouseover="mmstop()" style="display: block;">
					<a class="pic" href="https://dh.lt6.ltd/mn/tp.html" target="_blank"><img src="https://dh.lt6.ltd/mn/sj2.php"> </a>
				
				</div>
				<div class="item" id="pic3" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;">
					<a class="pic" href="https://dh.lt6.ltd/fj/tp.html" target="_blank"><img src="https://dh.lt6.ltd/fj/sj.php"></a>
				
				</div>
				<div class="item" id="pic4" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;">
					<a class="pic" href="https://dh.lt6.ltd/fj/tp.html" target="_blank"><img src="https://dh.lt6.ltd/fj/sj1.php"> </a>
				
				</div>
				<div class="item" id="pic5" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;">
					<a class="pic" href="https://dh.lt6.ltd/fj/tp.html" target="_blank"><img src="https://dh.lt6.ltd/fj/sj2.php"> </a>
				
				</div>
				
				
			</div>
			<div class="triggers">
				<a class="j-trigger" id="tabpic0" onmouseout="showpic(0)" onmouseover="mmstop()"> </a> 
				<a class="j-trigger" id="tabpic1" onmouseout="showpic(1)" onmouseover="mmstop()"> </a> 
				<a class="j-trigger current" id="tabpic2" onmouseout="showpic(2)" onmouseover="mmstop()"> </a> 
				<a class="j-trigger" id="tabpic3" onmouseout="showpic(3)" onmouseover="mmstop()"> </a> 
				<a class="j-trigger" id="tabpic4" onmouseout="showpic(4)" onmouseover="mmstop()"> </a> 
				<a class="j-trigger" id="tabpic5" onmouseout="showpic(5)" onmouseover="mmstop()"> </a> 
			
			
				</div>
		</div>
	</div>
</div>
<script type="text/javascript">
document.getElementById("tabpic0").className = "j-trigger current";
document.getElementById("pic0").style.display = "block";
var a = 0;
var b = 6;
var time = 3000;

function showpic(id) {
    a = id;
    clearTimeout(mytime);
    for (i = 0; i < b; i++) {
        document.getElementById("tabpic" + i).className = "j-trigger";
        document.getElementById("pic" + i).style.display = "none";
    }
    document.getElementById("tabpic" + id).className = "j-trigger current";
    document.getElementById("pic" + id).style.display = "block";
    mytime = setTimeout("showpic(" + (id == (b - 1) ? 0 : id + 1) + ")",time);
}
mytime = setTimeout("showpic(1)",time);

function mmstop() { clearTimeout(mytime); }

function mmplay() { mytime = setTimeout("showpic(" + a + ")",time); }
</script>
        </div>

<video width="100%" height="530px" id="player" src="https://dh.lt6.ltd/xjj/video.php" controls="" webkit-playsinline="" playsinline=""></video>

<div class="card">
            <div class="card-head">
                <i class="fa fa-video-camera" aria-hidden="true"></i>热门视频</div>
            <div class="card-body">
                 <video width="100%" height="530px" id="player" src="https://dh.lt6.ltd/xjj/video.php" controls="" webkit-playsinline="" playsinline=""></video>
    <center><section id="buttons">
        <button id="switch" style="width: 80px;height: 40px;background: #4CAF50;border: none;color: white;f <button id="next" style="width: 100px;height: 40px;background: #FF0000;border: none;color: white;font-size: 16px;">播放下一个</button>
    </section></center>
			</div></div>
			<script>
    (function (window, document) {
        if (top != self) {
            window.top.location.replace(self.location.href);
        }
        var get = function (id) {
            return document.getElementById(id);
        }
  dh.lt6.ltdbind = function (element, event, callback) {
            return element.addEventListener(event, callback);
        }
        var auto = true;
        var player = get('player');
        var randomm = function () {
            player.src = 'https://dh.lt6.ltd/xjj/video.php?_t=' + Math.random();
            player.play();
        }
        bind(get('next'), 'click', randomm);
        bind(player, 'error', function () {
            randomm();
        });
        bind(get('switch'), 'click', function () {
            auto = !auto;
            this.innerText = '连续: ' + (auto ? '开' : '关');
        });
        bind(player, 'ended', function () {
            if (auto) randomm();
        });
    })(window, document);
    </script>