秀日措-2020-10-30

知识总结

定位和页面布局

定位 position

position: sticky; /*粘性定位*/

position; relative; /*相对定位 父相对*/

position; absolute; /*绝对定位 子绝对*/

position: fixed;固定位置----脱离原文档流

页面布局

/*整个页面*/  <div class="page">
.page{
    width: 100%;
    height: auto;
}

/*页眉*/  <div class="header">
.header{
    width: 100%;
    height: 60px;
}

/*页眉的左边*/
.header-left{
    width: 448px;
    height: 100%;
}
    text-decoration: none;/*去掉下划线*/

/*页眉的右边*/
.header-right{
    width: 143px;
    height: 100%;
}

/*导航栏*/  
.naver{
         
}

/*主内容区*/
.main{
      width=“100%”
      height=600px；
      
}

/*测试样式*/

.bg{
         background: red;

}

/*页脚*/
.footer{
      
          
}
    
display: inline-block;/*让行级标签拥有块级标签的特性(自定义大小)依旧保留行级标签不独占一行的特性*/

display:flex; /*弹性布局*/

/*搜索框*/   <div class="search">
.search{
    width: 652px;
    height: 44px;
    margin: 0 auto;
    border-radius:10px;
}
/*百度一下的输入框*/
.inp{
    width: 544px;
    height: 40px;
    float: left;
    position: relative;/*父容器相对*/
}

    position: absolute;/*子容器绝对*/
    

/*百度一下按钮*/
.search-btn{
    width: 106px;
    height: 100%;
    ...
}

学习心得

今天主要学习了定位和页面布局，学习效果还是挺不错的，然后因为昨晚的

作业我们完成的都不太好，所以下午就给我们讲了下作业，虽然作业做的不

好，但毕竟我们都做过，所以通过老师讲解，我们也知道了自己错在哪，卡

在哪，收获还是挺大的。