你的位置:首页 > 网页设计

[网页设计]博客美化(一):公告栏添加精致电子表


添加这种样式的电子表

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: 155 }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 ><ul >66     <li ><span id="hour">10</span><span>时</span></li>/*按照自己的模板调整style里面的数值*/67     <li ><span id="minute">37</span><span>分</span></li>68     <li ><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啦!

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