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

添加这种样式的电子表

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

 1  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 
64 
65 


66         

10时
/*按照自己的模板调整style里面的数值*/
67         

37分

68         

13秒

69     

70 

71 
72 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(n89         return '0'+n;
90     }
91     return ''+n;
92 }
93 

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

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