為什么我的control沒有顏色？T^T
<!DOCTYPE html>
<html>
<head>
?? ?<title>Preview Slideshow</title>
?? ?<meta? charset="utf-8">
?? ?<style type="text/css">
?? ??? ?*{padding: 0;margin: 0;}
?? ??? ?body{
?? ??? ??? ?padding: 50px 0;
?? ??? ??? ? background-color: #FFF;
?? ??? ??? ? font-size: 14px;
?? ??? ??? ? font-family: "Avenir Next";
?? ??? ??? ? color: #555;
?? ??? ??? ? -webkit-font-smoothing:antialiased;
?? ??? ??? ? /*字體抗鋸齒*/
?? ??? ?}
?? ??? ?.slider .main .main-i,
?? ??? ?.slider .main,
?? ??? ?.slider{
?? ??? ??? ?width: 100%;
?? ??? ??? ?height: 400px;
?? ??? ??? ?position: relative;
?? ??? ?}
?? ??? ?/*幻燈片區(qū)域*/
?? ??? ?.slider .main{
?? ??? ??? ?overflow: hidden;
?? ??? ?}
?? ??? ?/*每一個幻燈片的樣式*/
?? ??? ?.slider .main .main-i{}
?? ??? ?.slider .main .main-i img{
?? ??? ??? ?width: 100%;
?? ??? ??? ?position: absolute;
?? ??? ??? ?left: 0;
?? ??? ??? ?top: 0;
?? ??? ??? ?z-index: 1;
?? ??? ?}
?? ??? ?.slider .main .main-i .caption{
?? ??? ??? ?position: absolute;
?? ??? ??? ?right: 50%;
?? ??? ??? ?top: 30%;
?? ??? ??? ?z-index: 9;
?? ??? ?}
?? ??? ?.slider .main .main-i .caption h2{
?? ??? ??? ?font-size:40px;
?? ??? ??? ?line-height: 50px;
?? ??? ??? ?color: #b5b5b5;
?? ??? ??? ?text-align: right;
?? ??? ?}
?? ??? ?.slider .main .main-i .caption h3{
?? ??? ??? ?font-size:70px;
?? ??? ??? ?line-height: 70px;
?? ??? ??? ?color: #000000;
?? ??? ??? ?text-align: right;
?? ??? ??? ?font-family: "Open Sans Condensed"
?? ??? ?}
?? ??? ?/*控制按鈕區(qū)域*/
?? ??? ?.slider .ctrl{
?? ??? ??? ?width: 100%;
?? ??? ??? ?height: 13px;
?? ??? ??? ?line-height: 13px;
?? ??? ??? ?text-align: center;
?? ??? ??? ?position: absolute;
?? ??? ??? ?left: 0;
?? ??? ??? ?bottom: -13px;
?? ??? ??? ?background-color:red;
?? ??? ?}
?? ??? ?.slider .ctrl .ctrl-i{
?? ??? ??? ?display: inline-block;
?? ??? ??? ?width: 150px;
?? ??? ??? ?height: 13px;
?? ??? ??? ?background-color:#666;
?? ??? ??? ?box-shadow: 0 13px 13px 13px rgba(0,0,0,3);
?? ??? ??? ?position: relative;
?? ??? ?}
?? ??? ?.slider .ctrl .ctrl-i img{
?? ??? ??? ?width: 100%;
?? ??? ??? ?position: absolute;
?? ??? ??? ?left: 0;
?? ??? ??? ?bottom:50px;
?? ??? ??? ?z-index: 1;
?? ??? ?}
?? ??? ?/*hover 到控制按鈕樣式*/
?? ??? ?.slider .ctrl .ctrl-i:hover {
?? ??? ??? ?background: #f0f0f0;
?? ??? ?}
?? ??? ?.slider .ctrl .ctrl-i:hover img{
?? ??? ??? ?bottom: 17px;
?? ??? ?}
?? ?</style>
</head>
<body>
?? ?<div class="slider">
?? ??? ?<div class="main">
?? ??? ??? ?<div class="main-i">
?? ??? ??? ??? ?<div class="caption">
?? ??? ??? ??? ??? ?<h2>h2 caption</h2>
?? ??? ??? ??? ??? ?<h3>h3 caption</h3>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<img src="img/1.jpg">
?? ??? ??? ?</div>
?? ??? ??? ?<div class="ctrl">
?? ??? ??? ??? ?<a class="ctrl-i" href="javascript:;"><img src="img/1.jpg"></a>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
</body>
</html>
2015-06-19
2015-06-16
多了一個div