博客美化(一):公告栏添加精致电子表 - 六月天空的芬芳

WBOY
Release: 2016-05-20 16:50:40
Original
1338 people have browsed it

添加这种样式的电子表

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>
Copy after login

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

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template