慕課網(wǎng)首頁
免費(fèi)課
實(shí)戰(zhàn)課
體系課
發(fā)現(xiàn)
評(píng)價(jià) 教程專欄手記
商業(yè)合作
企業(yè)服務(wù) 講師入駐

為什么我寫出來的直接定位到下面的圖片了，圖片沒有隱藏呢？求解答?。。?/h1>

我現(xiàn)在不想實(shí)現(xiàn)動(dòng)畫效果，一點(diǎn)擊圖片就直接定位到下面了，是我的層級(jí)有問題嗎，我是照著源代碼自己寫的

<!DOCTYPE?html>
<html>
<head>
??????<meta?charset="UTF-8">
??????<title>Background</title>
??????<style?type="text/css">
????????html,body{
??height:100%;
}
img?.bg{
??height:?100%;
??width:100%;
??position:fixed;
??top:0;
??left:0;
??z-index:1;
}
.slider{
??position:?absolute;
??width:?100%;
??text-align:?center;
??bottom:?100px;
}
.slider?li{
??position:?relative;
??display:?inline-block;
??width:?170px;
??height:?130px;
??margin-right:?15px;
??z-index:?777;
}
.slider?a{
??display:?inline-block;
??width:?170px;
??position:?relative;
??padding-top:?70px;
??padding-bottom:?20px;
??border:?2px?solid?#fff;
??border-radius:?5px;
??color:#fff;
??cursor:pointer;/*手*/
z-index:?888;
}
.slider?li:nth-of-type(1)?a{
??background-color:?#02646e;
}
.slider?li:nth-of-type(2)?a{
??background-color:?#eb0837;
}
.slider?li:nth-of-type(3)?a{
??background-color:?#67b374;
}
.slider?li:nth-of-type(4)?a{
??background-color:?#e6674a;
}
.slider?li:nth-of-type(5)?a{
??background-color:?#e61061;
}
a::after{
??content:?"";
??display:?block;
??height:?120px;
??width:?120px;
??border:?5px?solid?#fff;
??border-radius:?50%;
??position:?absolute;
??top:?50%;
??left:50%;
??top:?-80px;
??margin-left:?-60px;
??z-index:?9999;
}
li:nth-of-type(1)?a:after{
??background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg)?no-repeat?center;
}
li:nth-of-type(2)?a:after{
??background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg)?no-repeat?center;
}
li:nth-of-type(3)?a:after{
??background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg)?no-repeat?center;
}
li:nth-of-type(4)?a:after{
??background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg)?no-repeat?center;
}
li:nth-of-type(5)?a:after{
??background:?url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg)?no-repeat?center;
}
a::before{
??content:"";
??display:?block;
??height:?120px;
??width:?120px;
??border:?5px?solid?#fff;
??border-radius:?50%;
??position:?absolute;
??left:?50%;
??margin-left:?-60px;
??z-index:?99999;
??top:?-80px;
??background:?rgba(0,0,0,0.3);
}

??a:hover:before{
????????????opacity:0;
????????????}

.slideLeft:target{
??z-index:?100;
}
.slideBottom:target{
??z-index:?100;
}
.zoomln:target{
??z-index:?100;
}
.zoomOut:target{
??z-index:?100;c
}
.rotate:target{
??z-index:?100;
}
.bg:not(:target){
??z-index:?1;
}
??????</style>
</head>
<body>
??????<div>
????????????<ul>
??????????????????<li><a?href="#bg1">Hipster?Fashion?Haircut</a></li>
??????????????????<li><a?href="#bg2">Cloud?Computing?Services?&amp;?Consulting</a></li>
??????????????????<li><a?href="#bg3">My?haire?is?sooo?fantastic!</a></li>
??????????????????<li><a?href="#bg4">Eat?healthy?&amp;?excersice!</a></li>
??????????????????<li><a?href="#bg5">Lips?so?kissable?I?could?die?...</a></li>
????????????</ul>
??????</div>
????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg"?alt=""?class="bg?slideLeft"?id="bg1"?/>
????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg"?alt=""?class="bg?slideBottom"?id="bg2"?/>
????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg"?alt=""?class="bg?zoomIn"?id="bg3"?/>
????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg"?alt=""?class="bg?zoomOut"?id="bg4"?/>
????????<img?src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg"?alt=""?class="bg?rotate"?id="bg5"?/>
</body>
</html>