祈德斌-2020-10-30
1、position: sticky;/*定位：粘性 此为粘性定位*/
2、position: relative;*//*相对定位
3、position: absolute;*//*绝对定位
</head>
<body>
<!--定位及页面布局--->
<!---整个页面---->
<div class="page"><!---css内的.page .bg同时应用于其--->
<!---页眉--->
<div class="header" ></div>
<!---导航栏--->
<div class="naver"></div>
<!---网页主内容区--->
<div class="main">
<!---广告--->
<div class="adv bg"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
border: 0;
}
/*整个页面*/
.page{
width: 100%;
/*height: auto;自动调高*/
height: auto;
}
/*页眉*/
.header{
width: 100%;
height: 120px;
}
/*导航栏*/
.naver{
width:100%;
height:36px;
border-bottom: 1px #dedede solid;
border-top: 1px #dedede solid;/*边框*/
position: sticky;/*定位：粘性 此为粘性定位*/
top:0px;/*定位条件，此处是高度为零是条件 一定要给*/
}
/*position: absolute;*//*绝对定位 子绝对父相对 如果子容器有绝对定位，父容器一定要有相对定位！！！然后给子容器定位条件*/
position: fixed;/*固定位置*//*如果给了fixed则脱离原文档流，此处相当于与主内容区脱离*/
学习心得：
今天学习的内容对我们来说很重要，学习起来有一定的难度，但是经过一天的学习我能能更好的完善网页了，我相信随着我每天的积累最终能有一个很好的收获的。
近期评论