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

最新推荐文章于 2021-08-21 10:57:15 发布
最新推荐文章于 2021-08-21 10:57:15 发布
阅读量438 收藏 2
点赞数
分类专栏： Web-Css 文章标签： Web Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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;
	  	height: 15px;
	  	position: absolute;
	  	left: 50%;
	  	margin-left: -40px;
	  	bottom: 20px;
	  	background-color: rgba(255,255,255,0.2);
	  	border-radius: 10px;
	  }

	  .banner ul li {
	  	float:left;
	  	list-style: none;
	  	width: 8px;
	  	height: 8px;
	  	border-radius: 50px;
	  	background-color: #dddddd;
	  	margin: 2px;
	  	margin:3px 4px;
	  }

	  .banner ul li:hover {
	  	background-color: darkred;
	  }

	   .banner ul li.now {
	   	background-color: darkred;
	   }

	  .banner a {
	  	color:#dddddd;
	  	text-decoration: none;
	  	position: absolute;
	  	top: 50%;
	  	margin-top:-20px;
	  	width: 30px;
	  	height: 40px;
	  	text-align: center;
	  	line-height: 40px;
	  	font-size:20px;
	  }

	  .banner a:hover {
	  	color: darkred;
	  }

	  .banner a.left {
	  	width: 45px;
	  	height: 45px;
	  	border-radius: 50px;
	  	background-color:  rgba(255,255,255,0.2);
	  	left:0;
	  }

	   .banner a.right {
	   	width: 45px;
	  	height: 45px;
	  	border-radius: 50px;
	  	background-color:  rgba(255,255,255,0.2);
	  	right:0;
	  }
	</style>
  </head>
  <body>
	<div class="banner">
	  <!-- 图片容器 -->
	  <div class="img">
	    <img src="img/tb.jpg" alt="">
	    <img src="img/taobao.jpg" alt="">
	    <img src="img/tb.jpg" alt="">
	    <img src="img/taobao.jpg" alt="">
	    <img src="img/tb.jpg" alt="">
	  </div>

	  <!-- 点容器 -->
	  <ul>
	    <li class="now"></li>
	    <li></li>
	    <li></li>
	    <li></li>
	    <li></li>
	  </ul>

	  <!-- 按钮 -->
	  <a class="left" href="#">&lt;&lt;</a>
	  <a class="right" href="#">&gt;&gt;</a>
	</div>
  </body>
</html>
Sherry Lupus
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页设计和搜索优化那些事：好设计分分钟提升SEO效果
2HZZ外国网址导航
12-11 312
网页设计和搜索优化那些事：好设计分分钟提升SEO效果 文章目录前言一、一个设计良好的网页对于业务的影响包括下面这些：1.平均浏览时间更长2.品牌总结 前言 搜索引擎营销(Search engine marketing)顾名思义就是搜索引擎展开营销推广活动，所以很多商家看重了搜索引擎这一强大媒体，想通过其展开营销活动，从中挖掘销售机会。 要想教你的网站脱颖而出，搜索优化必不可少。 一、一个设计良好的网页对于业务的影响包括下面这些： 1.平均浏览时间更长 大家都希望用户在自己的网页上停留更长的时间。这通
想要导航首页提示页_从首页到详情页，教你如何装修淘宝店铺
weixin_39785669的博客
11-04 1万+
一个好的店铺装修，是可以更好的挽留买家，刺激消费，提升转化的。从店铺首页到详情页，每一个模块的装修对店铺来说都是非常重要的，千万不能懈怠。如果你还不清楚要怎么做的话，下面就教你该怎么装修！【店铺首页装修】1）淘宝店招PC端装修店招装修：首先淘宝卖家需要登录后台，然后点击“店铺装修”PC端的首页将左侧店铺招牌模块拖动到右侧模块中；然后再回到“页面编辑”，将鼠标移到店铺招牌模块上会出现“编辑”按钮；进...
html_demo导航页
08-22
将测试环境常用地址写个导航页方便登录下载
DIV CSS绝对定位布局案例 position布局实例
qq_37204849的博客
06-21 1334
遇到以上的不规则案例布局，如果使用float、padding等浮动实现比较麻烦，但使用position绝对定位即可很好简单地实现。接下来DIVCSS5为大家介绍position绝对定位方法布局以上小的案例。 一、用到CSS样式和HTML标签及相应解释   -   TOP 1、要用到CSS样式单词及解释 position：绝对定位样式实现DIV定位布局其设置值absolute和rela
CSS定位综合实例
BIN_GOO的博客
08-01 593
CSS定位：position是盒子模型中一个重要的概念。Position有4个属性值：static（静态，无定位），relative（相对定位），absolute（绝对定位），fixed（固定定位）。 下面通过一个例子讲述4个属性值的区别及效果。
CSS综合案例4，静态的轮播图
最新发布
02-04
在本CSS综合案例4中，我们将探讨如何使用纯CSS创建一个静态的轮播图。轮播图是一种常见的网页元素，通常用于展示多个图像或内容，通过滑动或切换效果来呈现。下面，我们将深入理解CSS在构建静态轮播图中的核心概念和...
纯css轮播图案例.rar
06-21
一个纯css轮播图超级简单 但是没有小圆点只能自己切换 说一说原理吧 让五张图片向左浮动展示。所以只需要左移ul的left值即可。使用animation，每隔几秒切换一下left的位置。 然后给动画加上重复播放 ，实现循环...
Web前端开发技术-综合案例（无缝轮播图）.pptx
07-07
【Web前端开发技术-综合案例】无缝轮播图与留言板及电梯导航的实现 无缝轮播图是Web前端开发中常见的动态效果，用于展示多张图片或内容，并以平滑过渡的方式进行循环播放，给用户带来流畅的视觉体验。实现无缝轮播...
html+css3D轮播图片
01-29
3D轮播图是一种吸引用户注意力并展示多张图片的有效方式，常用于网站的首页或产品展示区域。 首先，我们需要在HTML中设置基本的结构。这通常包括一个容器元素（如`div`）来包含所有的图片，并为每张图片创建单独的`...
静态轮播图（只用HTML和css）
07-17
在网页设计中，静态轮播图是一种常见的展示方式，它能够以优雅的形式展示多张图片或内容，同时节省页面空间。本教程将详细介绍如何仅使用HTML和CSS来创建一个具有左右切换按钮和浮动导航栏的静态轮播图。 首先，...
CSS定位元素的综合实例应用
04-29
} a img { width:80px; height:80px; border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/ display:block; position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/ top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/ left:5px; } dl { width: 160px; float:right; color: #999; line-height:20px; } dl dd span { font-weight: bold; color: #639;
顺丰快递单html
11-17
顺丰快递单html div css 顺丰打印模版demo
顺丰快递单模板html+css.zip
08-09
顺丰快递单模板html+css.zip 快递单模板，使用html+css+js实现，前端模板，数据可从后台获取并自己实现打印
想要导航提醒提示页_15个绝美Shopify产品页分享！打造令人艳羡的在线商城
weixin_40009063的博客
11-04 2万+
在为独立站设计的时候，许多卖家会比较重视首页，因为这是用户访问时看到的第一个页面，但是销售还是商城最主要的目的之一，产品页面的设计也是非常关键的。在打造产品页面时，独立站不再受第三方平台的限制，样式可以非常丰富多样。接下来将给大家展示一些产品页设计，介绍一下他们的特色体现在哪里，希望可以给到大家更多的灵感！（原文来自“尚睿出海”）15个最佳产品页案例1.Luxy Hair2.PooPourri3....
CSS定位案例
weixin_51415327的博客
08-21 412
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt...
顺丰官网代码（自编）
weixin_30247159的博客
07-22 1858
<!DOCTYPE html><html><head> <title>顺丰官网</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css.css"></head><body><!...
CSS定位详解及案例
小洋人最happy的专栏
07-05 2224
文章目录一、标准流1.1 概念1.2 不足二、定位2.1 概念2.2 static-静态定位2.3 relative-相对定位2.3.1 特点：2.3.2 示例一2.3.3 示例二2.4 fixed-固定定位2.4.2 特点2.4.2 示例2.5 absolute-固定定位2.5.1 特点2.5.2 子绝父相2.5.3 示例一2.5.4 示例二2.6 层叠关系2.6.1 元素层叠2.6.2 z-index特点：2.6.3 比较原则2.6.3.1 兄弟关系2.6.3.2 如果不是兄弟关系三、小结3.1 对照表
2018.6.1学习CSS5里顺丰盒子小问题
dengyi8388的博客
06-02 146
在制作下面这样的小盒子时 编写的代码 首先要对li元素设置浮动。 在设置这个li元素下面的a元素时， 因为没有转行内块，inline-block，结果显示出来的页面，鼠标在经过这个选择时（：hover）， 改变的背景色白色，将字体颜色完全掩盖，成了下面的样子 所以，如果li内的a元素属性下面添加上转换行内块的话，就不会出现上图这个问题。 转载于:htt...
想要导航提示页_如何优化网站导航呢？
热门推荐
weixin_39618121的博客
12-04 14万+
网站导航可以给用户提供全面的引导，让用户快速的找到想要进入的栏目中，从而找到相关的内容。同时，导航也给蜘蛛爬虫提供了进入网站各个页面的入口，可以让蜘蛛爬虫更好的抓取页面内容。 一、为什么要优化网站导航呢？ 1、网站导航决定着用户体验，可以让用户快速的找到想要了解的信息。 2、合理的导航设计，可以把内容和产品更多的展现在用户的眼前。 3、合理的导航可以增加用户的粘性，提高网站的深度，增加浏览...
写一个静态轮播图的html代码
06-09
好的，以下是一个简单的静态轮播图的HTML代码： ```html <!DOCTYPE html> <html> <head> <title>静态轮播图</title> <style> .container { width: 500px; height: 300px; overflow: hidden; position: relative; } .slide { position: absolute; top: 0; left: 0; width: 500px; height: 300px; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; transition: opacity 1s ease-in-out; } .slide:first-child { opacity: 1; } .nav { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .nav button { width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; background-color: #ccc; border: none; cursor: pointer; } .nav button.active { background-color: #333; } </style> </head> <body> <div class="container"> <div class="slide active"> <img src="slide1.jpg" alt="Slide 1"> </div> <div class="slide"> <img src="slide2.jpg" alt="Slide 2"> </div> <div class="slide"> <img src="slide3.jpg" alt="Slide 3"> </div> <div class="slide"> <img src="slide4.jpg" alt="Slide 4"> </div> <div class="nav"> <button class="active"></button> <button></button> <button></button> <button></button> </div> </div> <script> let slides = document.querySelectorAll('.slide'); let buttons = document.querySelectorAll('.nav button'); let currentSlide = 0; function nextSlide() { slides[currentSlide].classList.remove('active'); buttons[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('active'); buttons[currentSlide].classList.add('active'); } let slideInterval = setInterval(nextSlide, 5000); </script> </body> </html> ``` 这个代码中包含一个容器 `.container` 和多个轮播项 `.slide`，以及一个导航栏 `.nav`。轮播项使用 CSS 的 `position: absolute` 属性定位，导航栏使用 flexbox 布局，并且通过 JavaScript 实现轮播的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值