欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-20 10:08:58
...
博客美化(一):公告栏添加精致电子表 - 六月天空的芬芳

添加这种样式的电子表

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啦!

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