你好！
增加和补充的的样式
最后的效果
简单说明一下：
给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></title>
</head>
<body>
<style type="text/css">
#myTime {
color: white
border-style: solid
background-color: black
width: 200
height: 200
text-align: center
font-family: "agency fb"
}
#hm {
color: white
text-align: center
font-style: bold
font-size: 40px
}
#other {
color: white
text-align: center
}
</style>
<script language="javascript">
function showTime()
{
var theMoment = new Date()
var theHour = theMoment.getHours()
var theMinute = theMoment.getMinutes()
var hm = document.getElementById("hm")
hm.innerHTML = theHour + "<br/>" + theMinute
var other = document.getElementById("other")
other.innerHTML = theMoment.getSeconds()
}
var handler = window.setInterval('showTime()',1000)
</script>
</head>
<body>
<div id="myTime">
<div id="hm">
</div>
<span id="other">
</span>
</div>
<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload() }, 500) })</script></body>
</html>
<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>
