*{margin: 0;padding: 0;text-decoration: none;} /*//设置所有元素的基本样式
*/

#container{
position: relative; /*设置最外层的div元素的定位为相对定位，即是相对与未设置定位之前的位置进行定位*/
width: 255px;
height: 453px;
border: 1px solid #333;
overflow: hidden; /*//设置容器的宽高，并将溢出部分设置为隐藏*/
left: 17px;
top: 72px;
}
#list{
position: absolute; /*//设置图片所在的父级div的定位为绝对定位，即是相对于已定位的父级元素进行定位*/
z-index: 1; /*//设置该div的显示层次*/
width: 2040px; /*//该div是所有图片的父级元素，因此其宽高的设置应该包含所有的图片*/
height: 453px;
}
#list img{
float: left; /*设置图片的显示的显示方式，为向左浮动*/
width: 255px;
height: 453px;
}
#buttons{
position: absolute; /*/*设置屏幕下方的所有圆点的定位方式，相对于容器元素进行绝对定位*/
left: 67.5px; /*//距离父级已进行定位的元素的左侧距离为250px*/
bottom: 20px;
z-index: 2; /*//设置圆点的显示层级为2，即是在图片div的上方*/
height: 10px;
width: 120px;
}
#buttons span{
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;/* //半径为50%，即是设置为圆点显示*/
background: #333;
cursor: pointer;
}
#buttons .on{
background: orangered;
}
.arrow{
position: relative; //设置按钮的定位方式，即是相对与容器元素进行绝对定位
top: 0px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.3);
cursor: pointer;
}
.arrow:hover{
background-color: rgba(0,0,0,.7);
}
#container:hover .arrow{
display: block;
}
#prev{position: relative;

left: 5px;
}
#next{position: relative;
top: -60px;
left: 210px;
float: left;
}
#lft{width:293px;
height: 600px;
background-image: url(../image/iphone.png);
/*border:2px red solid; */
float: left;
margin-left: 200px;
top: -80px;
position: relative;}