博客美化（一）：公告栏添加精致电子表 - 六月天空的芬芳

添加这种样式的电子表

1.打开后台设置---博客侧边栏公告（支持HTML代码）
添加以下代码

<span style="color: #008080;"> 1</span> <span style="color: #800000;"><style type="text/css">
</style></span><span style="color: #008080;"> 2</span> 
<span style="color: #008080;"> 3</span> <span style="color: #800000;">.box</span>{
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 250px</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 130px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 50px auto</span>;
<span style="color: #008080;"> 7</span> }
<span style="color: #008080;"> 8</span> <span style="color: #800000;">.box li</span>{
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> relative</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">    list-style-type</span>:<span style="color: #0000ff;"> none</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 150px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">160px</span>;
<span style="color: #008080;">15</span> <span style="color: #ff0000;">    text-shadow</span>:<span style="color: #0000ff;">0 2px 1px #f4f4f4</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;">1px solid #9fa2ad</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;"> 5px</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">    margin-right</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -webkit-gradient(linear,0 0, 0 100%,
</span><span style="color: #008080;">20</span> <span style="color: #0000ff;">    color-stop(.2,rgba(248,248,248,.3)),
</span><span style="color: #008080;">21</span> <span style="color: #0000ff;">    color-stop(.5,rgba(168,173,190,.5)),
</span><span style="color: #008080;">22</span> <span style="color: #0000ff;">    color-stop(.51,rgba(168,173,190,.3)),
</span><span style="color: #008080;">23</span> <span style="color: #0000ff;">    color-stop(.9,rgba(248,248,248,.2)))</span>;
<span style="color: #008080;">24</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(top,rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%)</span>;
<span style="color: #008080;">25</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -moz-linear-gradient(top, rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%)</span>;
<span style="color: #008080;">26</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -o-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%)</span>;
<span style="color: #008080;">27</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -ms-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%)</span>;
<span style="color: #008080;">28</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%)</span>;
<span style="color: #008080;">29</span> <span style="color: #ff0000;">    box-shadow</span>:<span style="color: #0000ff;">inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad</span>;
<span style="color: #008080;">30</span> }
<span style="color: #008080;">31</span> <span style="color: #800000;">.box li:before,
</span><span style="color: #008080;">32</span> <span style="color: #800000;">.box li:after</span>{
<span style="color: #008080;">33</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;"> block</span>;
<span style="color: #008080;">34</span> <span style="color: #ff0000;">    content</span>:<span style="color: #0000ff;"> ""</span>;
<span style="color: #008080;">35</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> absolute</span>;
<span style="color: #008080;">36</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 150px</span>;
<span style="color: #008080;">37</span> }
<span style="color: #008080;">38</span> <span style="color: #800000;">.box li:before</span>{
<span style="color: #008080;">39</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">50%</span>;
<span style="color: #008080;">40</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 1px</span>;
<span style="color: #008080;">41</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;">62px</span>;/*数值与li标签的数值保持一致*/
<span style="color: #008080;">42</span> <span style="color: #ff0000;">    box-shadow</span>:<span style="color: #0000ff;"> 0 1px 0 #868995,0 2px 1px #fff</span>;
<span style="color: #008080;">43</span> }
<span style="color: #008080;">44</span> <span style="color: #800000;">.box li:after</span>{
<span style="color: #008080;">45</span> <span style="color: #ff0000;">    bottom</span>:<span style="color: #0000ff;"> -65px</span>;
<span style="color: #008080;">46</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 60px</span>;
<span style="color: #008080;">47</span> <span style="color: #ff0000;">    border-radius</span>:<span style="color: #0000ff;">0 0 5px 5px</span>;
<span style="color: #008080;">48</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)))</span>;
<span style="color: #008080;">49</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0))</span>;
<span style="color: #008080;">50</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0))</span>;
<span style="color: #008080;">51</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -o-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0))</span>;
<span style="color: #008080;">52</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0))</span>;
<span style="color: #008080;">53</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0))</span>;
<span style="color: #008080;">54</span> <span style="color: #ff0000;">    z-index</span>:<span style="color: #0000ff;"> 1
</span><span style="color: #008080;">55</span> }
<span style="color: #008080;">56</span> <span style="color: #800000;">.box li span:first-child</span>{
<span style="color: #008080;">57</span> <span style="color: #ff0000;">    font</span>:<span style="color: #0000ff;">60px 'BitstreamVeraSansMonoBold'</span>;/*调整数字大小*/
<span style="color: #008080;">58</span> <span style="color: #ff0000;">    color</span>:<span style="color: #0000ff;"> #52555a</span>;
<span style="color: #008080;">59</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;"> block</span>;
<span style="color: #008080;">60</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 130px</span>;
<span style="color: #008080;">61</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 150px</span>;
<span style="color: #008080;">62</span> }
<span style="color: #008080;">63</span> <span style="color: #800000;">
</span><span style="color: #008080;">64</span> 
<span style="color: #008080;">65</span> <span style="color: #800000;"><div class="box">
<ul style=" margin-left: 0px;">
<span style="color: #008080;">66</span> <span style="color: #800000;">        <li style=" width: 62px; margin-right: 2px;">
<span id="hour">10</span><span>时</span>
</li>/*按照自己的模板调整style里面的数值*/
</span><span style="color: #008080;">67</span> <span style="color: #800000;">        <li style=" width: 62px; margin-right: 2px;">
<span id="minute">37</span><span>分</span>
</li>
</span><span style="color: #008080;">68</span> <span style="color: #800000;">        <li style="  width: 62px; margin-right: 2px;">
<span id="second">13</span><span>秒</span>
</li>
</span><span style="color: #008080;">69</span> <span style="color: #800000;">    </span>
</ul>
<span style="color: #008080;">70</span> <span style="color: #800000;"></span>
</div>
</span><span style="color: #008080;">71</span> 
<span style="color: #008080;">72</span> <span style="color: #800000;"><script type="text/javascript">
</script></span><span style="color: #008080;">73</span> <span style="color: #800000;">var hour=document.getElementById('hour');
</span><span style="color: #008080;">74</span> <span style="color: #800000;">var minute=document.getElementById('minute');
</span><span style="color: #008080;">75</span> <span style="color: #800000;">var second=document.getElementById('second');
</span><span style="color: #008080;">76</span> <span style="color: #800000;">function showTime()</span>{
<span style="color: #008080;">77</span> <span style="color: #ff0000;">    var oDate=new Date();
</span><span style="color: #008080;">78</span> <span style="color: #ff0000;">    var iHours=oDate.getHours();
</span><span style="color: #008080;">79</span> <span style="color: #ff0000;">    var iMinute=oDate.getMinutes();
</span><span style="color: #008080;">80</span> <span style="color: #ff0000;">    var iSecond=oDate.getSeconds();
</span><span style="color: #008080;">81</span> <span style="color: #ff0000;">    hour.innerHTML=AddZero(iHours);
</span><span style="color: #008080;">82</span> <span style="color: #ff0000;">    minute.innerHTML=AddZero(iMinute);
</span><span style="color: #008080;">83</span> <span style="color: #ff0000;">    second.innerHTML=AddZero(iSecond);
</span><span style="color: #008080;">84</span> }
<span style="color: #008080;">85</span> <span style="color: #800000;">showTime();
</span><span style="color: #008080;">86</span> <span style="color: #800000;">setInterval(showTime,1000);
</span><span style="color: #008080;">87</span> <span style="color: #800000;">function AddZero(n)</span>{
<span style="color: #008080;">88</span> <span style="color: #ff0000;">    if(n<span style="color: #008080;">89</span> <span style="color: #ff0000;">        return '0'+n;
</span><span style="color: #008080;">90</span>     }
<span style="color: #008080;">91</span> <span style="color: #800000;">    return ''+n;
</span><span style="color: #008080;">92</span> <span style="color: #800000;">}
</span><span style="color: #008080;">93</span> <span style="color: #800000;"></span></span>

如果你是用的是新模板当加入本代码时会时模板错乱，但是不用慌张只要重新应用一下模板就ok啦！

如果觉得对您有帮助欢迎推荐！！您的推荐将是我的最大动力