【Web】CSS（No.26）定位经典案例（一）《静态轮播图》

最新推荐文章于 2023-03-20 23:28:57 发布

Sherry Lupus

最新推荐文章于 2023-03-20 23:28:57 发布

阅读量519

点赞数

CC 4.0 BY-SA版权

分类专栏： Web-Css 文章标签： Web Css

本文链接：https://blog.youkuaiyun.com/qq_43251850/article/details/91491210

需要素材点击图片联系我或私信、评论

效果图：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>静态轮播图</title>
	<style>
	  * {
    
    
	  	margin:0;
	  	padding:0;
	  }

	  .banner {
    
    
	  	width: 520px;
	  	height: 280px;
	  	margin: 100px auto;
	  	position: relative;
	  }

	  .banner .img img {
    
    
	  	position: absolute;
	  	top:0;
	  	left:0;
	  }

	  .banner ul {
    
    
	  	width: 80px;