欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

16.网页的定位练习

程序员文章站 2022-06-06 10:32:55
...

效果：

16.网页的定位练习

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

素材：

16.网页的定位练习16.网页的定位练习16.网页的定位练习16.网页的定位练习


代码：

<!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>


上一篇： 线性表——链表

下一篇： 使用Freemarker输出word文档到浏览器与本地

推荐阅读