祈长有-2020-10-30

知识总结

（1）定位
第一步重点  <link rel="stylesheet" href="css/style1.css"/>后期应该形成一种规律，第一步操作。
在后期播放中应该缩放100%
<!--类选择器两个名称--><div class="page bg"> 
/*测试样式*/
.bg{
    background: red;
}
        <!--定位-->
        <div class="page bg"> <!--页眉--><div class="header bg"></div> （bg 选一个）
position:sticky;/*粘性定位*/position定位
top: 0px;/*页眉和导航栏高度为0即粘性*/
                                    <!--定位-->练习内容
    <div class="page"> 
        <!--页眉--><div class="header">我是页眉</div>
        <!--导航栏--><div class="naver bg">我是导航</div>
        <!--网页主内容区--><div class="main bg">我是主内容区</div>
        <!--页脚--><div class="footer bg">我是页脚</div>  

                                          <!--定位-->
        <div class="page"> 
            <!--页眉--><div class="header"></div>
            <!--导航栏--><div class="naver"></div>
            <!--网页主内容区--><div class="main"></div>
            <!--广告--><div class="adv bg"></div>
            <!--页脚--><div class="foter"></div>
        </div>
/*网页主内容区*/  
.main{
    width: 100%;
    height: 600px;
    position: relative;/*相对定位*/
}
/*广告*/
.adv{
    width: 60px;
    height: 300px;
    /*position: absolute;/*绝对定位*/*/
    position: fixed;/*固定位置*/
    top: 100px;
    right: 0px;
}   
position: absolute;/*绝对定位*/子容器（子绝对，给定位）广告区
position: relative;/*相对定位*/父容器（父相对）主内容区
position: fixed;/*固定位置*/  

脱离原文档流
                                            style.css 练习内容
*{
    margin: 0;
    padding: 0;
    border: 0;
}
/*整个页面*/
.page{
    width: 100%;
    height: auto;
}
/*页眉*/
.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: 600px;
    position: relative;/*相对定位*/
}
/*广告*/
.adv{
    width: 60px;
    height: 300px;
    /*position: absolute;/*绝对定位*/*/
    position: fixed;/*固定位置*/
    top: 100px;
    right: 0px;
}   

/*页脚*/  
.foter{
    width: 100%;
    height: 600px;
}
/*测试样式*/
.bg{
    background: red;
}
（2）百度作业练习内容
<title>清华</title>
更改图片/标志<link rel="shortcut icon" href="img图片位置。ico" />
         <link rel="stylesheet " href="css" />css应用

/*页眉左边*/.header-left    javascript 空
.header-left a{
    color: #222222;
    font-family: "arial, helvetica, sans-serif";字体大小等
    font-size: 13px;
    text-decoration: none; 删除字体下划线
<a href="javascript：void（0）">新闻</a>链接
display: block;让行级标签拥有了快级标签的特性
display: inline-block;行内（让行级标签拥有了快级标签的特性自定义大小/依旧保留行级标签不独占一行的特性）
display: flex;弹性布局     #fff白色   important重要  border-radius:改圆角

（3）
min-height最低高度    max-height最高高度
<!--logo-->
            <div class="logo bg"></div>
            <img src="img/cartoon_da_pincel3d_0311_36391_m.jpg" width="500" height="600"/>高度自己根据实际情况来定
.logo{
    width: 600px;270px
    height: 189px;
    margin: 0 auto;
    padding: 190px;
}
margin: 0 auto;margin-top: -20px;向上移动20             margin: 0 auto;居中
/*搜索框*/
.search{<!--搜索框-->
              <div class="search">
                  
              </div>

background-position: 背景图片左移;     <span title="按图片搜索"></span>

心得体会
1.定位的学习同时明白第一件事应该 2.position: absolute;/绝对定位/子容器（子绝对，给定位）广告区position: relative;/相对定位/父容器（父相对）主内容区 二选一。
3.position:sticky;/粘性定位/明白相关含义。
4.删除字体下划线，在作业当中没有理解下划线的删除，再具体练习后掌握相关内容。
5.让行级标签拥有了快级标签的特性自定义大小/依旧保留行级标签不独占一行的特性display: inline-block;行内，这一命令的使用。后期应该学会练习，在理解的基础上掌握命令。