用html实现淘宝焦点图

asnone0

于 2022-11-15 17:29:21 发布

阅读量642

点赞数 1

分类专栏：书本文章标签： html css css3

本文链接：https://blog.csdn.net/qq_53912756/article/details/127869901

版权

书本专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该案例主要运用了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>