我用hb来做怎么显示结果不一样，是不是哪里错了
<!DOCTYPE html>
<html >
<head>
<title>Preview Slideshow</title>
<style type="text/css">
*{padding:0;margin:0;}
body{
padding:50px 0;
background-color:#FFF;
font-size:14px;
font-family:'Avenir Next';
-webkit-font-smoothing:antialiased;
}
.slider .main,
.slider .main .main-i,
.slider{
width:100%;
height:400px;
position:relative;
}
.slider .main{
overflow: hidden;
}
.slider .main .main-i{}
.slider .main .main-i img{
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';
}
.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 1px 1px rgba(0,0,0,.3);
position:relative;
}
.slider .ctrl .ctrl-i img{
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div class="slider"></div>
<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>
<div class="ctrl">
<a class="ctrl-i" href="javascript:;"><img src="img/1.jpg" /></a>
</div>
</body>
</html>
