陈菊-2020-10-30

知识总结

<!--整个页面-->
        <div class="page">


/*整个页面*/
.page{
    width: 100%;
    height: auto;
}




<!--页眉-->
                   <div class="header "></div>

/*页眉*/
.header{
    width: 100%;
    height: 60px;
}

/*页眉的左边*/
.header-left{
    width: ？px;
    height: ？%;
    padding-left: ？px;
    line-height: ？px;
    float:left ;    
}
.header-left a{
    color: #222222;
    font-family: "arial, helvetica, sans-serif";
    font-size: ？px;
    text-decoration: none;
    margin: 19px 31px 0 0;
    }


/*页眉的右边*/
.header-right{
    width: ？px;
    height:？% ;
    float: right;
    line-height: ？px;
    padding-right: ？px;
}
.header-right a{
    color: #222222;
    font-family: "arial, helvetica, sans-serif";
    font-size: ？px;
    text-decoration: none;
    margin: 10px 0 0 32px;
}



<!--logo-->
        <div class="logo">
        <img src="img/baidu.jpg"  width="270" height="129"/>
       </div>




.logo{
    width: 270px;
    height: 150px;
    margin: 0 auto;
    margin-top: -15px;
}


/*测试样式*/
.bg{
    background: red;
}




 /*页眉*/
.header{
    width: 100%;
    height: 120px;
}



<!--导航栏-->
        <div class=""></div>




/*导航栏*/
.naver{
    width:100%;
    height:36px ;
    border-top: 1px #dedede solid;
    border-bottom: 1px #dedede solid;
    position:sticky ;/*黏性定位*/
    top: 0px;/*页眉的高度 红条距离0*/
}


<!--网页主要内容区 -->
        <div class="footer"></div>

/*主内容区*/
.main{
    width: 100%;
    height: 800px;
    /*position: relative;/*相对定位*/
}


/*广告*/
.adv{
    width: 60px;
    height: 300px;
    /*position: absolute;/*绝对定位 子绝对 父相对（必写）*/
    position: fixed;/*固定位置 此时位置脱离原文档流 在内容区 与内容区无关*/
    top: 300px;
    right: 0px;/*距离右边0时执行position*/
}

<!--页脚-->
            <div class="footer bg"></div>

/*页脚部分*/
.footer{
    width: 100%;
    height: 100px;
}

/*测试样式*/
.bg{
    background: red;
}

/*搜索栏*/
.search{   }
.inp{      }
.search-btn{       }

心得体会
时间过得很快，到今天已经是我们实习的第五天了。今天依旧是收获满满的一天。学习到今天我们已经会用常用指令制作
一个简单的网站。学习过程中，经常会出现跟不上老师步伐的时候，但是最后在同学们的互相帮助下课后都对没跟上的知
识点做了相应的补充。希望我们在老师的带领下可以一天比一天进步，只要学有所得，过程再辛苦都是值得的！