CSS--网页样式布局(二)_html class=”con“-优快云博客

这篇博客介绍了CSS中的定位概念，包括文档流的定义和定位属性的五种类型：静态定位、相对定位、固定定位、绝对定位和粘性定位。通过样例展示了各种定位方式的效果，并提到了背景图片的调整技巧。

定位

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

position属性指定了元素的定位类型，其属性值有五种：
- static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
  静态定位的元素不会受到 top, bottom, left, right影响。
- relative：相对定位元素的定位是相对其正常位置。
- fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
- absolute：绝对定位的元素的位置相对于最近的已定位父元素，absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
- sticky：sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

样例一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">		
	.con{

		/*大小设置*/
		width:100px;
		height:100px;

		/*背景颜色设置*/
		background-color:gold;

		/*边框设置*/
		margin:50px auto 0;

		/*定位方式.*/
		position:relative;

		/*边角圆滑像素，大于边框的一半像素盒子即成圆形.*/
		border-radius:14px;
	}

	.box{
		width:28px;
		height:28px;
		background-color:red;
		color:#fff;

		/*文本对齐方式*/
		text-align:center;
		line-height:28px;

		/*定位方式，保证右上角为小圆圆心位置*/
		position:absolute;
		left:86px;
		top:-14px;

		/*大于等于14px，即可锐化为圆*/
		border-radius:14px;
	}
</style>
</head>
<body>
	<!-- 盒子嵌套 -->
	<div class="con">
		<div class="box">5</div>
	</div>
</body>
</html>

如图所示：

样例二

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>这是网页标题名称</title>
	<style type="text/css">
		
		.menu{
			height:80px;
			background-color:gold;
			position:fixed;
			width:960px;
			top:0px;
			left:50%;
			margin-left:-480px;
		}

		p{
			text-align:center;
		}

		.popup{
			width:500px;
			height:300px;
			border:1px solid #000;
			background-color:#fff;
			position:fixed;
			left:50%;
			margin-left:-251px;
			top:50%;
			margin-top:-151px;
			z-index:9999;
		}
		
		.popup h2{
			background-color:gold;
			margin:10px;
			height:40px;
		}

		.mask{
			position:fixed;
			width:100%;
			height:100%;
			background-color:#000;
			left:0;
			top:0;
			opacity:0.5;
			z-index:9998;
		}

		.pop_con{
			display:block;
		}
	</style>
</head>
<body>
	<div class="menu">菜单栏</div>
	
	<div class="pop_con">
		<div class="popup">
			<h2>弹窗</h2>	
		</div>
		<div class="mask"></div>
	</div>

	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>测试段落</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</body>
</html>

如图所示：

在这里插入图片描述

样例三

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景图定位</title>
	<style type="text/css">		
		.box{
			width:100px;
			height:100px;
			border:10px solid #000;

			/*对齐方式。*/
			margin:50px auto 0;

			/*设置盒子背景图片，使用的位置，是否平铺，背景色，若是盒子被铺满则看不出背景色，否则不平铺的时候会在未平铺的部分显示背景色.*/
			background:url(D:/46464.png) -150px -100px no-repeat orange;

			/* background-color:cyan;
			background-image:url(images/bg.jpg); */
			/* 
				repeat-x:只平铺x轴方向;
				repeat-y:只平铺y轴方向;
				no-repeat:只平铺一次;
				repeat：缺省值，平铺所有的；
			 */
			/* background-repeat:no-repeat; */
			/* 
			   水平方向：left  center  right
			   垂直方向：top   center  botton
			*/

			/* background-position:-20px 10px; */

		}
	</style>
</head>
<body>
	<div class="box">测试文字情况！</div>
</body>
</html>

如图所示：

在这里插入图片描述

附带调到合适的背景图片位置，进入可编辑模式，按住上下键即可滑动图片，直到调整到合适的效果，记下px值，再设置好即可，比较友好！

设置图片背景-利用背景图片的设置，实现抽取使用图片中的部分而不使用全部.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景图设置-列表</title>
	<style type="text/css">
		
		.list{
			list-style:none;
			width:300px;
			height:305px;
			margin:50px auto 0;
			padding:0;

			/*设置背景色：类似于青蓝色*/
			/*background:cyan; */
		}

		.list li{
			height:60px;
			border-bottom:1px dotted #000;
			line-height:60px;
			text-indent:50px;

			/*设置y轴上的公共平移px数值.*/
			background:url(images/背景色.png) 0px 10px no-repeat;
		}

		/*具体设置每一个对应的数，但是都是使用的一张图片，只不过背景图片的偏移量不同.*/

		.list .icon02{
			background-position:0px -71px;
		}
		.list .icon03{
			background-position:0px -154px;
		}
		.list .icon04{
			background-position:0px -235px;
		}
		.list .icon05{
			background-position:0px -315px;
		}
	</style>
</head>
<body>
	<!-- ul.list>li{列表名称}*5 -->
	
	<ul class="list">
		<li>默认第一个</li>
		<li class="icon02">默认第二个</li>
		<li class="icon03">默认第三个</li>
		<li class="icon04">默认第四个</li>
		<li class="icon05">默认第五个</li>
	</ul>
</body>
</html>

图片效果

在这里插入图片描述

锁定图片背景设置-内容自由滑动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	/*锁定背景，内容自由滑动.*/
	
	body{
		background:url(images/3389.jpg) fixed;
	}

	p{
		/*段落标签属性设置：对齐方式，颜色.*/
		text-align:center;
		color:red;
	}

</style>
</head>
<body>
	<p>段落内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>段落内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />	
	<p>段落内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>段落内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</body>
</html>

图片效果：
在这里插入图片描述

快捷插入页-菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>综合一</title>
	<style type="text/css">

/*	行内式，转化...
元素属性设置。*/

.pagenation{
	list-style:none;
	margin:50px auto 0;
	padding:0;
	width:600px;
	height:40px;
	border:1px solid #666;
	font-size:0;
	text-align:center;
}

.pagenation li{
	display:inline-block;
	height:26px;

	font-size:12px;
	margin:7px 5px 0;

}

.pagenation li a{
	display:block;
	background-color:gold;
	height:26px;
	line-height:26px;
	padding:0 10px;
	font:normal 12px/26px 'Microsoft Yahei';
	color:#000;
	text-decoration:none;
}

.pagenation li a:hover{
	/*鼠标停留*/
	background-color:red;
	color:#fff;
}


.menu{
	list-style:none;
	margin:50px auto 0;
	padding:0;
	width:958px;
	height:40px;
	border:1px solid #666;
	text-align:center;
	font-size:0;
}

.menu li{
	display:inline-block;
	font-size:14px;
	height:40px;
}

.menu li a{
	display:block;
	height:40px;			
	font:normal 14px/40px 'Microsoft Yahei';
	text-decoration:none;
	color:#000;
}

.menu li a:hover{
	color:#ff8800;
}

.menu li span{
	display:block;
	height:40px;
	font:normal 14px/40px 'Microsoft Yahei';
	margin:0 20px;
}


.menu02{
	list-style:none;
	margin:50px auto 0;
	padding:0;
	width:960px;
	height:40px;
	background-color:#55a8ea;
	position:relative;

}

.menu02 li{
	width:100px;
	height:40px;
	float:left;
}

.menu02 li a{
	display:block;
	width:100px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:14px;
	font-family:'Microsoft Yahei';
	color:#fff;
	text-decoration:none;
}

.menu02 li a:hover{
	background-color:#00619f;
}

.menu02 .new{
	width:33px;
	height:20px;

	/*new的显示是由此插入的图实现的*/
	background:url(images/new.png) no-repeat;
	position:absolute;
	left:432px;
	top:-10px;
}
</style>
</head>
<body>
	<!-- ul.pagenation>(li>a{$})*11 -->

	<ul class="pagenation">
		<li><a href="#">上一页</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><span>…</span></li>
		<li><a href="#">17</a></li>
		<li><a href="#">18</a></li>
		<li><a href="#">19</a></li>
		<li><a href="#">20</a></li>
		<li><a href="#">下一页</a></li>
	</ul>


	<!-- ul.menu>(li>a{菜单编辑栏})*7 -->
	<ul class="menu">
		<li><a href="#">菜单栏组</a></li>
		<li><span>|</span></li>
		<li><a href="#">菜单栏组</a></li>
		<li><span>|</span></li>
		<li><a href="#">菜单栏组</a></li>
		<li><span>|</span></li>
		<li><a href="#">菜单栏组</a></li>
		<li><span>|</span></li>
		<li><a href="#">菜单栏组</a></li>
		<li><span>|</span></li>
		<li><a href="#">菜单栏组</a></li>
		<li><span>|</span></li>
		<li><a href="#">菜单栏组</a></li>
	</ul>

	<!-- ul.menu02>(li>a{菜单组})*7 -->

	<ul class="menu02">
		<li><a href="#">菜单栏</a></li>
		<li><a href="#">菜单栏</a></li>
		<li><a href="#">菜单栏</a></li>
		<li><a href="#">菜单栏</a></li>
		<li><a href="#">菜单栏</a></li>
		<li><a href="#">菜单栏</a></li>
		<li><a href="#">菜单栏</a></li>
		<li class="new"></li>
	</ul>
</body>
</html>