16.网页的定位练习

最新推荐文章于 2022-09-19 22:23:51 发布

neilro

最新推荐文章于 2022-09-19 22:23:51 发布

阅读量832

点赞数

分类专栏： Div+Css 文章标签：浮动

本文链接：https://blog.csdn.net/neilro/article/details/79245680

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

效果：

效果说明：网页翻滚时，两边的广告栏位置不动，最上边的导航栏也是固定的位置（无法被覆盖）。

素材：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位作业</title>
		<style type="text/css">
			/*CSS初始化*/
			body,img{
				margin:0;
				padding:0;
			}
			/*初始化结束*/
			/*定义主体宽高*/
			.box{
				height:auto;
				width:auto;
				/*父相子绝:相对定位*/
				position:relative;
			}
			.content{
				width:998px;
				/*height:1677px;*/
				margin:44px auto 0;
				/*可以用定位的方式代替
				position:absolute;
				left:170px;
				top:44px;*/
			}
			.nav{
				position:fixed;
				left:0;
				top:0;
				/*z-index:1;*/
			}
			.left{
				/*固定定位*/
				position:fixed;
				left:0;
				top:100px;
			}
			.right{
				/*固定定位*/
				position:fixed;
				right:0;
				top:100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="nav"><img src="images/r1_c1.png"/></div>
			<div class="content"><img src="images/box.png"/></div>
			<div class="left"><img src="images/r2_c1.png"/></div>
			<div class="right"><img src="images/r2_c2.png"/></div>
		</div>
	</body>
</html>

neilro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
16.网页的定位练习

效果：效果说明：网页翻滚时，两边的广告栏位置不动，最上边的导航栏也是固定的位置（无法被覆盖）。素材：代码：定位作业 /*CSS初始化*/ body,img{ margin:0; padding:0; } /*初始化结束*/ /*定义主体宽高*/ .box{ height:au
复制链接

扫一扫