                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /圖片展示特效

好不容易搞一堆代碼出來，為什么沒有效果顯示？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
<style type="text/css">
#div1 {
?height:160px;
?width:280px;
}
#piclist .col {
? width:300px;
? height:200px;
? position:relative;
? overflow:hidden;
? float:left;
? margin:10px 0px 0px 0px;
}
#piclist .col a{
? display:block;
? width:280px;
? height:180px;
? top:160px;
? background: none repeat scroll;
? color:white;
? font-style:normal;
? line-height:25px;
? padding:10px;
}
#piclist .col img .col a{
? position:absolute;
? top:0px;
? left:0px;
}
</style>
<body>
? <div id="piclist" class="piclist">
???? <div id="pic1" class="col">
???? <img src="images/pic1.jpg" width="281" height="173" /></img>
???? <a href="#" style="top:160px;">
???? 學(xué)會html5 絕對的屌絲逆襲
???? <br></br>
??????? 本課程有淺入深、逐步推進，以示例為主線，詳細完整地介紹HTML5的新功能與新特征
?????? </a>
???? </div>
???? <div id="pic2" class="col">
???? <img src="images/pic2.jpg" width="271" height="175" />
???? <a href="#" style="top:160px;">
???? 圓角水晶按鈕制作
???? <br></br>
??????? 網(wǎng)頁中的圓角按鈕和寬度自適應(yīng)按鈕就這么輕松1制作！
?????? </a>
???? </div>
??? <div id="pic3" class="col">
??? <img src="images/pic3.jpg" width="280" height="180" />
??? <a href="#" style="top:160px;"> 導(dǎo)航條菜單的制作 <br />
?????? 30分鐘教你輕松制作出各種形式的網(wǎng)站導(dǎo)航條菜單 </a> </div>
??? <p> </p>
? </div>
<script>
var div1=document.getElementById('pic1');
var div2=document.getElementById('pic2');
var div3=document.getElementById('pic3');
div1.onmouseover = function(){
??? div1.getElemementsByTagName('a')[0].style.top = 0;
??? }
div1.onmouseout = function(){
??? div1.getElemementsByTagName('a')[0].style.top = 160+'px';
??? }
div2.onmouseover = function(){
??? div2.getElemementsByTagName('a')[0].style.top = 0;
??? }
div2.onmouseout = function(){
??? div2.getElemementsByTagName('a')[0].style.top = 160+'px';
??? }
div3.onmouseover = function(){
??? div3.getElemementsByTagName('a')[0].style.top = 0;
??? }
div3.onmouseout = function(){
??? div3.getElemementsByTagName('a')[0].style.top = 160+'px';
??? }
</script>
</body>
</html>