练习5:轮播图布局
2022/4/25 6:15:35
本文主要是介绍练习5:轮播图布局,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!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> </head> <style> .box{ margin: 100px auto; width: 300px; height: 300px; position: relative; } .box img{ width: 300px; height: 300px; position: absolute; } .box img:nth-child(3){ z-index: 1; } .box1{ position: absolute; z-index: 9999; /* 子绝父相 */ bottom: 20px; } .box1 a{ margin-left: 5px; float: left; width: 5px; height: 5px; border-radius: 50%; background-color: rgba(52, 73, 73, 0.3); /* 将背景颜色设置到内容区,边框和内边距都不在背景颜色内 */ background-clip: content-box; border: solid 2px transparent; } a.active{ background-color: rgb(231, 47, 47); border: solid 2px rgba(4, 159, 159, 0.3); } </style> <body> <div class="box"> <img src="../p1.jpg" > <img src="../p2.jpg" > <img src="../p3.jpg" > <img src="../p4.jpg" > <img src="../p5.jpg" > <div class="box1"> <a class="active" href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> </div> </div> </body> </html>
这篇关于练习5:轮播图布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现