html5+css简单静态轮播图

m4587

已于 2022-07-21 21:48:31 修改

阅读量745

点赞数 4

文章标签： html5 css 前端 html javascript

于 2022-07-21 21:44:34 首次发布

本文链接：https://blog.csdn.net/m4587/article/details/125921585

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="dlunbo">
        <div id="igs">
            <div class="ig"><img src="./image/1.jpg" /></div>
            <div class="ig"><img src="./image/2.jpg" /></div>
            <div class="ig"><img src="./image/3.jpg" /></div>
            <div class="ig"><img src="./image/4.jpg" /></div>
            <div class="ig"><img src="./image/5.jpg" /></div>
        </div>
        <ul id="tabs">
            <li class="tab"></li>
            <li class="tab"></li>
            <li class="tab"></li>
            <li class="tab"></li>
            <li class="tab"></li>
        </ul>
        <div class="btn btn1">
            < </div>
                <div class="btn btn2">></div>
        </div>
</body>
</html>





* {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#dlunbo {
	width: 500px;
	height: 330px;
	position: absolute;
	top: 50%;
	margin-top: -166px;
	left: 50%;
	margin-left: -250px;
}

.ig {
	position: absolute;
}

img {
	width: 500px;
	height: 330px;
}

#tabs {
	position: absolute;
	top: 300px;
	left: 200px;
}

.tab {
	width: 20px;
	height: 20px;
	border: solid 1px #ffffff;
	float: left;
	margin-left: 5px;
	border-radius: 100%;
	cursor: pointer;
}

.btn {
	width: 30px;
	height: 50px;
	position: absolute;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-size: 30px;
	top: 50%;
	margin-top: -25px;
	cursor: pointer;
}

.btn1 {
	left: 0px;
}

.btn2 {
	right: 0px;
}

这是最后的效果图