Blog sidebar

Blog sidebar announcement (supports HTML code) (Support JS code)

<p class='phrase' style="font-size: 13px; padding: 10px; margin-bottom: 10px; border: 1px dashed #FFF; color: #FF3399">
Bamboo Lamp<br><br>
就像竹林的灯火,被风吹过,摇摇曳曳,但永不熄灭!
</p>
<table class="dataintable" style="text-align: center; width: 100%">
<tbody><tr>
<td style=" width: 16%; height: 20px; background-color: #FF0000" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF0033" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF0066" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF0099" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF00CC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF00FF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FF3300" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF3333" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF3366" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF3399" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF33CC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF33FF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FF6600" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF6633" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF6666" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF6699" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF66CC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF66FF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FF9900" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF9933" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF9966" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF9999" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF99CC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FF99FF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FFCC00" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCC33" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCC66" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCC99" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCCCC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFCCFF" ></td>
</tr>

<tr>
<td style=" width: 16%; height: 20px; background-color: #FFFF00" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFF33" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFF66" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFF99" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFFCC" ></td>
<td style=" width: 16%; height: 20px; background-color: #FFFFFF" ></td>
</tr>
</tbody></table>
<script type="text/javascript">
var td = document.querySelectorAll('.dataintable td');
for(var i=0;i<td.length;i++){
td[i].onmouseover = displayColor;
}
function displayColor() {
document.getElementsByClassName("phrase")[0].style.color= this.style.backgroundColor;
}
</script>

 

Top Html Code

<div style = "text-align : left; margin: 0px 20px 21px; padding-bottom: 10px; font-size: 12px; font-weight: bold; border-bottom: 1px dashed #ffffff; color: # ff9933">
Art of a percent, when the power to make life!
</ div>

 

Footer Html Code

<div class="cnblogs_Highlighter">
<div style="text-align: left; margin: 0 17px">
<p> <a target="_blank" href="http://www.w3school.com.cn/index.html">w3school 在线教程</a> |
<a target="_blank" href="https://www.cnblogs.com/">博客园</a> |
<a target="_blank" href="https://www.sxsoft.com/">sxsoft</a> |
<a target="_blank" href="http://www.52solution.com/kb/">快包网</a> </p> </div>
</div>

Guess you like

Origin www.cnblogs.com/BambooLamp/p/11083659.html