<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>
把这个DIV放到你想放到的地方，然后修改一下样式就可以了<style>
.time{...........................}
</style>
<div class="time">
<SCRIPT language=JavaScript>
<!--
tmpDate = new Date()
date = tmpDate.getDate()
month= tmpDate.getMonth() + 1
year= tmpDate.getYear()
document.write(year)
document.write("年")
document.write(month)
document.write("月")
document.write(date)
document.write("日 ")
myArray=new Array(6)
myArray[0]="星期日"
myArray[1]="星期一"
myArray[2]="星期二"
myArray[3]="星期三"
myArray[4]="星期四"
myArray[5]="星期五"
myArray[6]="星期六"
weekday=tmpDate.getDay()
if (weekday==0 | weekday==6)
{
document.write(myArray[weekday])
}
else
{
document.write(myArray[weekday])
}
// -->
</SCRIPT>
</div>
你好！
增加和补充的的样式
最后的效果
简单说明一下：
给ul添加了一个flex布局，并设置内容为行排列并且不进行拆分，然后内容居中对齐；
设置li的margin-top值，该值主要参考背景图片的高度（你这里是278px），然后再减去li本身的数字+英文内容的高度（span+p=121px)，最后再除以2。
设置li中的.seperator的样式，也就是冒号的样式，这里调整了字号并设置了左右的间距。
最外层div.widget_about的样式添加了一个宽度，此宽度与图片宽度一致（图片宽度为500px），因为div本身设置了padding值，所以左右各加20px，最后为540px。
希望对你有帮助！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）