李生晓-2020-10-30

position: sticky;/*粘性定位*/
 position: relative;/*相对定位*/ 
position: absolute;/*绝对定位*/
position: fixed;/*固定位置*/
/*页眉*/
.header{
    width: 100%;
    height: 120px;
}
/*导航栏*/
.naver{
    width: 100%;
    height: 36px;
    border-top: 1px #dedede solid;/*边框*/
    border-bottom: 1px #dedede solid;/*边框*/
    position: sticky;/*粘性定位*/
    top:0px;
}
/*主内容区*/
.main{
    width: 100%;
    height: 800px;
    /*position: relative;/*相对定位*/
}
/*广告*/
.div{
    width: 60px;
    height: 300px;
    /*position: absolute;/*绝对定位*/
    position: fixed;/*固定位置*/
    top:2700px;
    right: 0px;
}
/*页脚*/
.footer{
    width: 60px;
    height: 300px;
}
/*测试样式*/
.bg{
    background: red;
}
在设计的时候格式要清晰，每个模块都要设置标注，至少自己能看出那部分对应那个模块，
如百度页面设计中标注的，整个页面，页眉，页眉左边，页眉右边等，要是那个部分出现问题便于
修正。
例题
*{
    margin: 0;
    padding: 0;
    border: 0
    }
/*整个页面*/
.page {
    width: 100%;
    height: auto;
    }   
/*页眉*/
.header{
    width: 100%;
    height: 60px;
}
/*页眉左边*/
.header-left {
    width: 500px;
    height: 100%;
    float: left;
    padding-left: 24px;
    line-height: 60px;
}
.header-left a{
    color: #222222;
    font-family: "arial,helvetica,sans-serif";
    font-size: 13px;
    text-decoration: none;
    margin: 19px 31px 0 0;
}
/*页眉右边*/
.header-right {
    width: 162px;
    height: 100%;
    float: right;
    padding-left: 24px;
    line-height: 60px;
}
.header-right a{
    color: #222222;
    font-family: "arial,helvetica,sans-serif";
    font-size: 13px;
    text-decoration: none;
    margin: 19px 0 0 32px;
    }


display:block 行级标签拥有块级标签属性 
display:inline-block 行级标签不独占一行
import 重要 提升样式优先级
outline:none 去掉边框
position:relative父容器相对子容器绝对

心得体会：今天上午我们进行了页眉，主内容区，广告，页脚，等常用板块的设计，了解了四个定位：粘性定位 相对定位，绝对定位（相对定位 绝对定位组合使用）。
下午我们进行昨天作业的讲解。昨天设计的百度页面，由于对好多标签等的不熟悉，弄得一塌糊涂。经过老师一下午的讲解不但温习了前几天学的知识，而且又了解到
新的知识。我从百度网页中感受到，要做好一个网页不但要细心，而且要有清晰的思路。就比如一些高度和宽度的计算等都不能马虎！