添加这种样式的电子表
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
查看更多关于博客美化（一）：公告栏添加精致电子表-六月天空的芬芳的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115669