邱越-2020-10-30

HTML:
<!-- 整个页面 -->
        <div class="page">
            <!-- 页眉 -->
            <div class="header">页眉</div>
            <!-- 导航栏 -->
            <div class="naver ">导航</div>
            <!-- 网业主内容区 -->
            <div class="main ">
                内容
                <!-- 广告 -->
                <div class="adv bg"></div>
            </div>
            <!-- 页脚 -->
            <div class="footer ">页脚</div>



CSS:
/* 整个页面 */
.page{
    width: 100%;
    height: auto;
}
    /* 页眉 */
.header{
    width: 100%;
    height: 120px;
}
/* 导航栏 */
.naver{
    width: 100%;
    height: 36px;
    border-bottom: 1px black solid;
    border-top: 1px black solid;
    position: sticky;/* 粘性定位 */
    top: 0px;
}
/* 测试样式 */
.bg{
    background: hotpink;
}
/* 主内容区 */
.main{
    width: 100%;
    height: 1000px;
    position: relative;/* 相对定位 */
}
.adv{
    width: 60px;
    height: 300px;
    position: absolute;/* 绝对定位
    /* position: fixed; *//* 固定位置 */
    top: 200px;
    right: 0px;
}
/* 页脚 */
.footer{
    width: 100%;
    height: 100px;
}

一、普通定位(Static)

  在我们的开发过程中,除非专门指定,否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。这个就不过多描述了。



二 . 相对定位(relative)

  在我们前端开发中,relative相对定位一直被看作普通文档流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
三 . 绝对定位(absolute)



在前端开发中,相对于已定位的最近的父类元素,如果没有已定位的最近的父类元素,那么它的位置就相对于最初的包含块(如body)。绝对定位的框可以从它的包含块向上、右、下、左移动。
四 .固定定位(fixed)

  相对于浏览器窗口,其余的特点类似于绝对定位。fixed元素就是固定在浏览器某个位置的元素,绝对定位是固定在页面的,如果滚动滚动条的话绝对定位的元素也会滚上去,fixed元素不会。

心得体会: 通过今天的实训,我收获了很多,一方面学习到了许多以前没学过的专业知识与知识的应用,另一方面还提高了自己动手做项目的能力。是对我能力的进一步锻炼,也是一种考验。从中获得的诸多收获,也是很可贵的,是非常有意义的。在实训中我学到了许多新的知识。是一个让我把书本上的理论知识运用于实践中的好机会,原来,学的时候感叹学的内容太难懂,现在想来,有些其实并不难,关键在于理解。

标签

评论

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