你好！
增加和补充的的样式
最后的效果
简单说明一下：
给ul添加了一个flex布局，并设置内容为行排列并且不进行拆分，然后内容居中对齐；
设置li的margin-top值，该值主要参考背景图片的高度（你这里是278px），然后再减去li本身的数字+英文内容的高度（span+p=121px)，最后再除以2。
设置li中的.seperator的样式，也就是冒号的样式，这里调整了字号并设置了左右的间距。
最外层div.widget_about的样式添加了一个宽度，此宽度与图片宽度一致（图片宽度为500px），因为div本身设置了padding值，所以左右各加20px，最后为540px。
希望对你有帮助！
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>canvas clock</title>
<style type="text/css">
div{
text-align: center
margin-top: 250px
}
#clock{
border: 1px solid #ccc
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="200px" width="200px"></canvas>
</div>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>
js部分：
var dom=document.getElementById('clock')
var ctx=dom.getContext('2d')
var width=ctx.canvas.width
var height=ctx.canvas.height
var r=width/2
function drawBackground(){
ctx.save()
ctx.translate(r,r)
ctx.beginPath()
ctx.lineWidth=10
ctx.arc(0,0,r-5,0,2*Math.PI,false)
ctx.stroke()
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2]
ctx.font='18px Arial'
ctx.textAlign='center'
ctx.textBaseline='middle'
hourNumbers.forEach(function(number,i){
var rad=2*Math.PI/12*i
var x=Math.cos(rad)*(r-30)
var y=Math.sin(rad)*(r-30)
ctx.fillText(number,x,y)
})
for(var i=0i<60i++){
var rad=2*Math.PI/60*i
var x=Math.cos(rad)*(r-18)
var y=Math.sin(rad)*(r-18)
ctx.beginPath()
if(i%5==0){
ctx.fillStyle='#000'
ctx.arc(x,y,2,0,2*Math.PI,false)
}else{
ctx.fillStyle='#ccc'
ctx.arc(x,y,2,0,2*Math.PI,false)
}
ctx.fill()
}
}
function drawHour(hour,minute){
ctx.save()
ctx.beginPath()
var rad=2*Math.PI/12*hour
var mrad=2*Math.PI/12/60*minute
ctx.rotate(rad+mrad)
ctx.lineWidth=6
ctx.lineCap='round'
ctx.moveTo(0,10)
ctx.lineTo(0,-r/2)
ctx.stroke()
ctx.restore()
}
function drawMinute(minute){
ctx.save()
ctx.beginPath()
var rad=2*Math.PI/60*minute
ctx.rotate(rad)
ctx.lineWidth=3
ctx.lineCap='round'
ctx.moveTo(0,10)
ctx.lineTo(0,-r+30)
ctx.stroke()
ctx.restore()
}
function drawSecond(second){
ctx.save()
ctx.beginPath()
ctx.fillStyle='#c14543'
var rad=2*Math.PI/60*second
ctx.rotate(rad)
ctx.moveTo(-2,20)
ctx.lineTo(2,20)
ctx.lineTo(1,-r+18)
ctx.lineTo(-1,-r+18)
ctx.fill()
ctx.restore()
}
function drawDot(){
ctx.beginPath()
ctx.fillStyle="#fff"
ctx.arc(0,0,3,0,2*Math.PI,false)
ctx.fill()
}
function draw(){
ctx.clearRect(0,0,width,height)
var now =new Date()
var hour=now.getHours()
var minute=now.getMinutes()
var second=now.getSeconds()
drawBackground()
drawHour(hour,minute)
drawMinute(minute)
drawSecond(second)
drawDot()
ctx.restore()
}
draw()
setInterval(draw,1000)//每秒执行代码
<html>002 <head>
003 <title>HTML5 Test</title>
004 <script type="application/x-javascript">
005 var panel, ctx, img
006 var pw, ph, ox, oy
007 function init(){
008 panel = document.getElementById("panel")
009 pw = panel.width
010 ph = panel.height
011 ox = pw/2
012 oy = ph/2
013 if(panel.getContext){
014 ctx = panel.getContext('2d')
015 }else{
016 alert('Your browser is not support Canvas tag!')
017 }
018
019 ctx.translate(ox, oy)
020
021 img = new Image()
022 img.onload = function(){
023 setInterval('draw()',1000)
024 }
025 img.src = 'bg.jpg'
026 }
027
028
029 function drawSecond(){
030 ctx.save()
031 ctx.rotate(Math.PI/180*currTime().s*6)
032 ctx.strokeStyle = "#09f"
033 ctx.lineWidth = 2
034 ctx.lineCap = 'round'
035 ctx.beginPath()
036 ctx.moveTo(0,0)
037 ctx.lineTo(0,-140)
038 ctx.stroke()
039 ctx.restore()
040 }
041
042 function drawMinute(){
043 ctx.save()
044 ctx.rotate(Math.PI/180*currTime().m*6)
045 ctx.strokeStyle = "#f90"
046 ctx.lineWidth = 6
047 ctx.lineCap = 'round'
048 ctx.beginPath()
049 ctx.moveTo(0,0)
050 ctx.lineTo(0,-100)
051 ctx.stroke()
052 ctx.restore()
053 }
054
055 function drawHour(){
056 ctx.save()
057 ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/
058 2)
059 ctx.strokeStyle = "#999"
060 ctx.lineWidth = 10
061 ctx.lineCap = 'round'
062 ctx.beginPath()
063 ctx.moveTo(0,0)
064 ctx.lineTo(0,-60)
065 ctx.stroke()
066 ctx.restore()
067 }
068 function draw(){
069 ctx.clearRect(-pw/2,-ph/2,pw,ph)
070 drawBackground()
071 drawSecond()
072 drawMinute()
073 drawHour()
074 document.getElementById('time').innerHTML=currTimeStr()
075 }
076
077 function drawBackground(){
078 ctx.save()
079 ctx.translate(0, 0)
080 ctx.drawImage(img,-250,-250,500,500)
081 ctx.restore()
082 }
083
084 function currTimeStr(){
085 var d = new Date()
086 var h = d.getHours()
087 var m = d.getMinutes()
088 var s = d.getSeconds()
089 return h+':'+m+':'+s
090 }
091
092 function currTime(){
093 var d = new Date()
094 var h = d.getHours()
095 var m = d.getMinutes()
096 var s = d.getSeconds()
097 if(h>12){
098 h = h-12
099 }
100 return {"h":h,"m":m,"s":s}
101 }
102 </script>
103 </head>
104 <body onload="init()">
105 <canvas style="border:1px solid #000" id="panel" width="500" height="500
106 ">
107 Your browser is not support Canvas tag!
108 </canvas>
109 <br/>
110 <span id="time"></span>
111 </body>
112 </html>
