CSS初探学习总结提高四

Posted 2023-02-23 xj_love

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS初探学习总结提高四相关的知识，希望对你有一定的参考价值。

定位布局，让标签固定到想要的位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位布局</title>
	<style type="text/css">
		* 
			margin: 0;
			padding: 0;
		
		ul 
			list-style: none;
		
		
		fieldset 
			margin: 20px 10px;
		
		ol 
			margin: 0 20px;
		
		
		.backView 
			width: 613px;
			height: 230px;
			margin: 0 auto;	
			position: relative;
			background-color: pink;
		
		.leftB,
		.rightB 
			top: 50%;
			margin-top: -18px;
			position: absolute;
		
		.rightB 
			right: 0;
		
		.circle 
			width: 65px;
			height: 15px;
			background: rgba(255,255,255,0.4);
			position: absolute;
			bottom: 20px;
			left: 50%;
			margin-left: -32PX;
			border-radius: 6px;
		
		.circle li 
			width: 9px;
			height: 9px;
			background-color: #B7B7B7;
			border-radius: 50%;
			float: left;
			margin: 2px;
		
		.circle .current 
			background-color: #f40;
		
	</style>
</head>
<body>
	<fieldset>
		<legend>定位布局,定位布局后，就有行内块元素的特征</legend>
		<ol>
			<li>
				静态定位 position: static;
				<ol>
					<li>静态定位 -- 对于边偏移无效的</li>
					<li>一般他用来 清除定位的。 一个原来有定位的盒子，不想加定位了，就写这句话</li>
				</ol> 
			</li>
			<li>
				相对定位 position: relative;
				<ol>
					<li>不脱离标准布局</li>
					<li>它的位置还在</li>
				</ol>
			</li>
			<li>
				绝对定位 position: absolute;
				<ol>
					<li>绝对定位完全脱标，不占有位置</li>
					<li>如果自己有定位，父级一定要有定位</li>
					<li>用的最多的是 子绝父相</li>
				</ol>
			</li>
			<li>
				固定定位 position: fixed;
				<ol>
					<li>完全脱标，不占有位置，一般做固定位置</li>
				</ol>
			</li>
		</ol>
	</fieldset>
	<h1>定位Demo</h1>
	<dir class="backView">
		<img src="image/02.jpg">
		<a href="#" class="leftB"><img src="image/left.png"></a>
		<a href="#" class="rightB"><img src="image/right.png"></a>
		<ul class="circle">
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</dir>
	

</body>
</html>

以上是关于CSS初探学习总结提高四的主要内容，如果未能解决你的问题，请参考以下文章

CSS初探学习总结提高 四

CSS初探学习总结提高四