前端小白学习——轮播图

最新推荐文章于 2024-07-15 17:15:41 发布

cukgdsgkfehvchk

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/qq_45093177/article/details/105471896

版权

小白web前端学习——轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
	</head>
	<style type="text/css">
		@font-face {
   
			  font-family: 'iconfont';
			  src: url('../font/iconfont.eot');
			  src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
			      url('../font/iconfont.woff2') format('woff2'),
			      url('../font/iconfont.woff') format('woff'),
			      url('../font/iconfont.ttf') format('truetype'),
			      url('../font/iconfont.svg#iconfont') format('svg');
			}
		.iconfont {
   
		  font-family: "iconfont" !important;
		  font-size: 16px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
			}
		*{
   
			margin:0px;
			padding:0px;
		}
		.wrap{
   
			position: relative;
			width:235px;
			height:300px;
			background-color: pink;
			margin:50px auto;
			padding:5px 0;
			overflow: hidden;
		}
		.wrap .imglist{
   
			position: absolute;
			height:300px;
			width:235px;
			list-style: none;
			left:-235px;			
		}
		.imglist li{
   
			float:left;
			height:300px;
			margin:0px 5px;
		}
		.imglist img{
   
			height:300px;
			width:225px;
		}
		.wrap .alist{
   
			position:absolute;
			bottom:20px;
			left:0px;
		}
		.wrap .alist a{
   
			float:left;
			margin-left: