css postion:abosult (ul :li)问题

最新推荐文章于 2023-06-04 22:50:38 发布

记录杂文

最新推荐文章于 2023-06-04 22:50:38 发布

阅读量207

点赞数

分类专栏： html 问题系列

本文链接：https://blog.csdn.net/ShenYouRong/article/details/106558083

版权

html 问题系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>焦点图</title>
	<link rel="stylesheet" type="text/css" href="../css/focusPicture.css">
	<script src="../jQuery/jquery-3.5.1.js"></script>
</head>
<body>
	<div class="box">
		<img src="../../img/01.jpg" alt="">
		<ul class="focus">
			<li class="show">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
	
	<!-- <script src="../"></script> -->
</body>
</html>

*{
	margin: 0;
	padding: 0;	
}

.box{
	position: relative;
	width: 200px;
	height: 300px;
	margin: 50px auto;

	

}
.box img{
	width: 200px;
	height: 300px;
}
.box ul{
	position: absolute;
	bottom: 0;
	right: 0;
	
}
.focus li{
	list-style: none;
	width: 20px;
	text-align: center;
	line-height: 20px;
	float: right;
	border: 1px solid #000;
	margin-left: 4px;
	background-color: red;
	/*position: absolute;
	bottom: 0;
	right: 0;
*/
	


}