float:left写成了float-left
color:red写成了clolr:red
href=#"少写了半个引号
结束</li>标签没有写
</body>写成了</boyd>
然后说一下为什么你后面的字为什么会动，因为你的a标签和a标签经过的宽高不一样，当然会动了。比如，你想想，本来a宽50px，你鼠标指上去是宽100px了，它后面当然会往右移啦。所以，你只要保持a和a:hover宽高一致就不会动来动去了。
例如去掉a:hover里的width:50pxheight:50px
这句css代码就是文字闪烁text-decoration:blink不过很可惜，IE、Chrome 或 Safari 不支持 "blink" 属性值，所以只有在 Firefox 和 Opera 下支持这 CSS 实现在闪动效果。加上js代码就可以了
html代码
<span id="blink">闪烁文字</span>
JavaScript代码：
<script type = "text/javascript" >
function blinklink() {
if (!document.getElementById('blink').style.color) {
document.getElementById('blink').style.color = "red"
}
if (document.getElementById('blink').style.color == "red") {
document.getElementById('blink').style.color = "black"
} else {
document.getElementById('blink').style.color = "red"
}
timer = setTimeout("blinklink()", 100)
}
function stoptimer() {
clearTimeout(timer)
}
blinklink()
</script>
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #000
text-shadow: 2px 3px 10px #FF1717
font-size: 60px
font-weight:bold
transition: color 1s
color: #000
}
.color {
color: #fff
}
</style>
</head>
<body>
<div>我会一闪一闪的</div>
<script>
setInterval(function () {
if (!document.body.className) {
document.body.className = 'color'
} else {
document.body.className = ''
}
}, 500)
</script>
</body>
</html>
