该案例主要运用了HTML+css中的定位来实现

其次是要注意css中权重叠加的关系，以及绝对定位中的技巧：水平居中和垂直居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	li{
		list-style: none;
	}
	.tb-promo{
		position: relative;
		height: 280px;
		width: 520px;
		/* 水平居中 */
		margin: 100px auto;
	}
	.tb-promo img{
		height: 280px;
		width: 520px;
	}
	.prev{
		position: absolute;
		/* 绝对定位中的垂直居中 */
		left: 0;
		top: 50%;
		margin-top: -15px;

		width: 20px;
		height: 30px;
		background-color: rgba(0, 0, 0, 0.2);
		text-align: center;
		line-height: 30px;
		color: #fff;
		text-decoration: none;
		/* border-bottom-right-radius: 15px;
		border-top-right-radius: 15px; */
		border-radius: 0 15px 15px 0;
	}
	.next{
		position: absolute;
		right:  0;
		top: 50%;
		margin-top: -15px;
		width: 20px;
		height: 30px;
		background-color: rgba(0, 0, 0, 0.2);
		text-align: center;
		line-height: 30px;
		color: #fff;
		text-decoration: none;
		border-radius: 15px 0 0 15px;

	}
	.pro-nav{
		position: absolute;
		bottom: 15px;
		margin-left: -35px;
		left: 50%;
		width: 70px;
		height: 13px;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 7px;

	}
	.pro-nav  li{
		width: 8px;
		height: 8px;
		background-color: #fff;
		float: left;
		border-radius: 50%;
		margin: 3px;
	}
	.pro-nav .select1{
		background-color: #ff5000;
	}
</style>
<body>
    <div class="tb-promo">
    	<img src="淘宝.png" alt="">
    	<!-- 左侧按钮 -->
    	<a href="#" class="prev">＜</a>
    	<a href="#" class="next">＞</a>
    	<ul class="pro-nav">
    		<li class="select1"></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </div>
</body>
</html>

 

 

# html # css # css3
Logo
快递鸟一站式物流API解决方案

电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。

更多推荐

苹方字体跨平台解决方案：告别Windows与Mac的字体显示鸿沟

在Web开发中，我们经常面临一个令人头疼的问题：精心设计的页面在Mac上优雅精致，到了Windows设备上却因字体差异而显得平庸。今天，我们为您介绍一个专业的解决方案——PingFangSC字体包，它让苹方字体的优雅设计能够在所有平台上完美呈现。这个开源项目提供了完整的6种字重，支持ttf和woff2双格式，真正实现了跨平台字体统一。## 为什么跨平台字体一致性如此重要？🔍现代Web应用

avatar 快递鸟社区

Ascend-SACT/Mineru-Optimization后端引擎对比：Pipeline、Hybrid与VLM模式如何选择？

Ascend-SACT/Mineru-Optimization提供三种强大的后端引擎模式——Pipeline、Hybrid和VLM，帮助用户高效处理各类文档。本文将深入对比这三种模式的核心特性、性能表现和适用场景，助你快速找到最适合的解决方案。## 三大引擎模式核心特性解析 🚀### Pipeline模式：传统OCR流程的极致优化**核心架构**：采用模块化设计，包含版面分析、OCR、

avatar 快递鸟社区

如何永久保存微信聊天记录？WeChatMsg免费开源工具终极指南

你是否曾担心更换手机后，那些珍贵的微信对话会永远消失？与家人的温馨聊天、重要的工作沟通、朋友间的难忘回忆，这些数字记忆都值得被永久珍藏。**WeChatMsg**是一款完全免费的开源工具，专门用于**微信聊天记录永久保存和深度分析**，让你的每一段对话都能成为永恒的数字资产。## 🔍 你的聊天记录正在面临什么风险？微信已经成为我们日常生活中不可或缺的沟通工具，但官方并未提供完整的聊天记录

avatar 快递鸟社区