前端之样式的布局定位

最新推荐文章于 2022-11-16 10:48:34 发布

冥极醉醉冥极

最新推荐文章于 2022-11-16 10:48:34 发布

阅读量94

点赞数

分类专栏：前端学习文章标签： html5 css

本文链接：https://blog.csdn.net/qq_19831379/article/details/119042861

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局定位</title>
		<style>
			html, body {
				margin: 0;
				padding: 0;
			}
		
			.fix {
				width: 100%;
				height: 200px;
				/* 定位元素感觉像浮动，但又没有浮动效果 */
				position: fixed;
				background-color: #FF0000;
				left: 0;
				top: 0;
			}
		
			.box {
				background-image: url(img/1.jpg);
				/* 表示内部元素相对与它进行定位 */
				position: relative;
				width: 1200px;
				height: 400px;
				margin: 10px auto;
				overflow: auto;
			}
			
			.p1 {
				/* left和top是父容器的左上角做定位，position为绝对定位是针对于父容器，如果父容器没有postion元素，则继续往上找坐标系*/
				left: 149px;
				top: 144px;
				position: absolute;
			}
			
			.point {
				/* 下面虽然可以，但上下没对齐，因此改为浮动 */
				/* display: inline-block; */
				width: 15px;
				height: 15px;
				background-color: #0000FF;
				/* 浮动元素也是块元素 */
				float: left;
			}
			
			.inf0 {
				line-height: 15px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="fix"></div>
		<div class="box">
			<div class="p1">
				
				<span class="point"></span>
				<span class="inf0">美国</span>
			</div>
		</div>
		<div class="box">
			<div class="p1">
				
				<span class="point"></span>
				<span class="inf0">美国</span>
			</div>
		</div>
		<div class="box">
			<div class="p1">
				
				<span class="point"></span>
				<span class="inf0">美国</span>
			</div>
		</div>		<div class="box">
			<div class="p1">
				
				<span class="point"></span>
				<span class="inf0">美国</span>
			</div>
		</div>		<div class="box">
			<div class="p1">
				
				<span class="point"></span>
				<span class="inf0">美国</span>
			</div>
		</div>
	</body>
</html>

冥极醉醉冥极

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之样式的布局定位

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>布局定位</title> <style> html, body { margin: 0; padding: 0; } .fix { width: 100%; height: 200px; /* 定位元素感觉像浮动，但又没有浮动效.
复制链接

扫一扫

专栏目录