为什么我的效果出不来？
<!DOCTYPE html>
<html>
<head>
<title>Preview Slideshow</title>
<meta charset="utf-8">
<style>
*{padding: 0; margin: 0;}
body{
padding:50px 0;
background-color: #FFF;
font-size:
font-family: 'Avenir14px;
color:#555; Next';
-webkit-font-smoothing:antialiased;/*字体抗锯齿*/
}
.slider .main .main-i,
.slider .mian,
.slider{
width: 100%;
height: 400px;
position: relative;
}
/*幻灯片区域*/
.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: 5px;
color: #B5B5B5;
text-align: right;
}
.slider .main .main-i .caption h3{
font-size: 70px;
line-height: 7px;
color: #000000;
text-align: right;
font-family: 'Open Sans Condensed';
}
/*控制按钮区域*/
.slider.ctrl{
width: 100%;
height: 13px;
line-height: 13px;
text-align: center;
position: absolute;
left: 0;
bottom: -13px;
background-color: #f00;
}
.slider .ctrl .ctrl-i{
display: inline-block;
width: 150px;
height: 13px;
background-color: #666;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.slider .ctrl .ctrl-i img{
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
}
</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="imgs/index.jpg" />
</div>
</div>
<div class="ctrl">
<a class="ctrl-i" href="javascript:;"><img src="imgs/index.jpg" /></a>
</div>
</div>
</body>
</html>
胡思乱想的XuJiYo1回答
-
习惯受伤
你想实现什么功能？你这个没有写JS，无法触发一些动作啊
随时随地看视频慕课网APP
Html/CSS
CSS3
JavaScript