定位案例

最新推荐文章于 2024-08-12 10:57:54 发布

时松

最新推荐文章于 2024-08-12 10:57:54 发布

阅读量239

点赞数

分类专栏：基础文章标签：定位案例

本文链接：https://blog.csdn.net/ice_yr/article/details/100009210

版权

基础专栏收录该内容

79 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	* { 
		margin: 0;
		padding: 0;
	}
	ul {
		list-style: none;
	}
	.father {
		width: 520px;
		height: 280px;
		background-color: purple;
		margin: 50px auto;
		position: relative;   /*子绝父相*/
	}
	.arrow-l,
	.arrow-r {
		position: absolute;   /*绝对定位*/
		width: 24px;
		height: 36px;
		display: block;  /*转换*/
		top: 0;
		top: 50%;   /*这个百分号是按照父级高度来进行计算*/
		margin-top: -18px;    /*往上走是负值，自己高度的一半*/  
	}
	.arrow-l {
		left: 0;
		/*top: 0;*/
	}
	.arrow-r {
		 right: 0;
		 /*top: 0;*/
	}
	.circle {
		width: 65px;
		height: 13px;
		background-color: rgba(255, 255, 255, 0.3);  /*盒子背景半透明*/
		position: absolute;
		bottom: 15px;  /*因为底对齐所以是正值*/
		left: 50%;
		margin-left: -32; 
		border-radius: 6px;
	}
	.circle li {
		width: 9px;
		height: 9px;
		background-color: #b7b7b7;
		float: left;
		margin: 2px;
		border-radius: 50%;   /*圆角的做法*/
	}
	.circle .current {   /*注意权重问题  优先级  0020*/
		background-color: pink;
	}
	</style>
</head>
<body>
	<div class="father">
		<img src="one.jpg" alt="">
		<a href="#" class="arrow-l"><img src="jian.jpg" alt=""></a>
		<a href="#" class="arrow-r"><img src="tou.png" alt=""></a>
		<ul class="circle">  <!-- 小圆点 -->
			<li class="current"></li>   <!-- current 翻译就是 当前的意思 -->
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.top {
			height: 44px;
			background: url(top.png) no-repeat top center;
			width: 100%;   /*固定定位的盒子一定要写宽和高！！！  除非有内容撑开不用写*/
			position: fixed;  /*固定定位*/ 
			top: 0;
			left: 0; 
		}
		.ad-r,
		.ad-l {
			position: fixed;
			top: 100px;
		}
		.ad-r {
			right: 0;
		}
		.ad-l {
			left: 0;
		}
		.box {
			width: 1002px;
			margin: 44px auto;   /*隔开 防止logo部分被 固定定位的导航栏遮挡*/ 
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="ad-l"><img src="ad-l.png" alt=""></div>
	<div class="ad-r"><img src="ad-r.png" alt=""></div>
	<div class="box">
		<img src="box.jpg" alt="" height="1760" width="1002">
	</div>
</body>
</html>