解玲安-2020-10-30

1、margin: 0 ;
padding: 0;
border: 0;
/*任何网页都时上述三条不变*/

2、<!-- 整个页面  定位 -->
<div class="page">
.page{
                width: 100%;
    height: auto；
}           
3、<!--页眉-->         
<div class="header"></div>
.header{
    width: 100%;
    height: 120px;
}           
4、<!--导航栏-->            
<div class="naver bg"></div>
.naver{
    width: 100%;
    height: 36px;
    border-top: 1px #dedede solid;
    border-bottom: 1px #dedede solid;
    position: sticky;/*3、粘性定位*/
    top: 0px;
}           
5、<!--网页主内容区-->         
<div class="main"></div>
.main{
    width: 100%;
    height: 800px;
    /*1、position: relative; /*相对定位   父相对，自觉对*/
}              
6、 <!--广告-->   
<div class="adv bg"></div>
.adv{
    width: 60px;
    height: 300px;
    /*1、position: absolute;/*绝对定位*/
    position: fixed;/*2、固定位置   脱离原文挡流*/
    top: 200px;
    right: 0px; 
}       
7、<!--页脚-->
<div class="foter bg"></div>
.footer{
    width: 100%;
    height: 100px;
}
/*测试样式*/
.bg{
    background: green;
}

display: inline-block;/*让行级标签拥有块级标签的特性（自定义到大小）*/
position: relative;/*父容器相对*/
position: absolute;/*子容器绝对*/
outline: none;/*去除黑框*/

学习心得：
已经学习了一周的时间，难度与日俱增，百度一下页面的制作一度让我很无奈，由于当时没有学习过页面布局，所以我选择了表格来布局。说实话网页的制作对我来说很费时间，但是却感觉越来越有意思，看着自己从什么都不会到一点点做出东西，很开心，花费的时间和精力时值得的。