HTMLCSS静态页面手动轮播图

html部分代码：

1
2
3
4

普遍代码common.css,用来清除一些标签的默认属性：

body,p,h1,h2,h3,h4,h5,h6,ul{margin: 0;
}
ul{padding: 0;
}
ul li{list-style: none;
}
a{text-decoration: none;
}

css代码部分：

.box{position: relative;width: 1000px;height: 600px;margin: 50px auto;background-color: aquamarine;position: relative;
}
.box .ul_1{overflow: hidden;width: 1000px;height: 600px;
}
.box .ul_1 li{width: 1000px;height: 600px;border: 1px solid #f5e5;
}
.box .ul_1 li img{width: 100%;height: 100%;
}
.ul_2{position: absolute;right: 0;bottom: 10px;z-index: 5;
}
.ul_2 li{width: 20px;height: 20px;background-color: blanchedalmond;text-align: center;float: left;
}
.ul_2 li a{text-align: center;
}

大家可以复制粘贴到自己的电脑上将图片的url改成自己要用的图片，在这里我的效果图放不上去就不放了。