博客美化（一）：公告欄添加精緻電子錶

添加這種樣式的電子錶

1.打開後臺設置---博客側邊欄公告（支持HTML代碼）
添加以下代碼

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

如果你是用的是新模板當加入本代碼時會時模板錯亂，但是不用慌張只要重新應用一下模板就ok啦！

如果覺得對您有幫助歡迎推薦！！您的推薦將是我的最大動力