css定位

最新推荐文章于 2024-09-01 19:28:10 发布

hoho_12

最新推荐文章于 2024-09-01 19:28:10 发布

阅读量280

点赞数

分类专栏： css 网页设计与制作

本文链接：https://blog.csdn.net/hoho_12/article/details/52106020

版权

网页设计与制作同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css定位</title>
		<style type="text/css">
			div {
				widows: 300px;
				height: 200px;
				border: solid;
			}
			
			#relative {
				background-color: red;
				position: relative;
				top: 50px;
				left: 50px;
			}
			
			#absolute {
				background-color: blue;
				position: absolute;
				top: 100px;
				right: 200px;
			}
			
			.fixed {
				border: solid;
				border-color: wheat;
				background: #FF0000;
				width: 100px;
			}
			
			#left {
				position: fixed;
				top: 200px;
				left: 0px;
			}
			
			#right{
				position: fixed;
				top: 200px;
				right: 0px;
			}
		</style>
	</head>

	<!--    	
    	描述：定位
    	1. relative 相对于自身进行移动
    		top/bottom/left/right 实现
    		position: relative;
			top: 50px;
			left: 50px;
			
		2.absolute 绝对定位 相对于整个页面而言
		    不推荐使用
		
		3.fixed 固定定位 相对于浏览器而言
		    一般用来做广告
			
    -->

	<body>
		<div style="height: 1000px;">
			<img src="img/bottom.JPG" />
			<img src="img/bottom.JPG" />
			<img src="img/bottom.JPG" />
			<img src="img/bottom.JPG" />
			<img src="img/bottom.JPG" />
			<img src="img/bottom.JPG" />

		</div>

		<div class="fixed" id="left">
			<marquee>快来参加夏令营吧。。。</marquee>
		</div>
		<div class="fixed" id="right">
			<marquee>快来参加夏令营吧。。。</marquee>
		</div>
	</body>

</html>