主界面代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<link rel="stylesheet" href="css/autoplay.css" type="text/css"/>
</head>
<body class="main">
<div id="box_autoplay">
<div class="list">
<ul>
<li><img src="ad/index_ad1.jpg" width="900" height="335"/></li>
<li><img src="ad/index_ad2.jpg" width="900" height="335"/></li>
<li><img src="ad/index_ad3.jpg" width="900" height="335"/></li>
<li><img src="ad/index_ad4.jpg" width="900" height="335"/></li>
<li><img src="ad/index_ad5.jpg" width="900" height="335"/></li>
</ul>
</div>
</div>
</body>
</html>autoplay.css
body, div, ul, li {
margin:0;
padding:0;
}
ul {
list-style-type:none;
}
body {
background:#000;
text-align:center;
font:12px/20px Arial;
}
#box_autoplay {
position:relative;
width:900px;
height:335px;
background:#fff;
border-radius:5px;
border:8px solid #fff;
margin:10px auto;
cursor:pointer;
}
#box_autoplay .list {
position:relative;
width:900px;
height:335px;
overflow:hidden;
}
#box_autoplay .list ul {
position:absolute;
top:0;
left:0;
}
#box_autoplay .list li {
width:900px;
height:335px;
overflow:hidden;
}
#box_autoplay .count {
position:absolute;
right:0;
bottom:5px;
}
#box_autoplay .count li {
color:#fff;
float:left;
width:20px;
height:20px;
cursor:pointer;
margin-right:5px;
overflow:hidden;
background:#F90;
opacity:0.7;
filter:alpha(opacity=70);
border-radius:20px;
}
#box_autoplay .count li.current {
color:#fff;
opacity:1;
filter:alpha(opacity=100);
font-weight:700;
background:#f60;
}
#tmp {
width:100px;
height:100px;
background:red;
position:absolute;
}
4007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
