祈德斌-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则脱离原文档流,此处相当于与主内容区脱离*/

学习心得:
今天学习的内容对我们来说很重要,学习起来有一定的难度,但是经过一天的学习我能能更好的完善网页了,我相信随着我每天的积累最终能有一个很好的收获的。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1