郭姗姗-2020-10-30

知识点：

一、定位+页面布局：
 1、 建立html文件
 2、设置整个页面：<div class="page bg"></div> 同时选择类选择器
       css文件中       .bg{background: red;}      用背景来检测设置的目标
       页眉部分：      <div class="header">我是页眉</div> 用文字来标注设置的页面
       导航栏部分：   <div class="naver">我是导航</div>   用文字来标注设置的页面
       网页主内容区：<div class="main ">我是主内容区     （广告部分如下）   </div>   用文字来标注设置的页面
           主内容区加入广告：<div class="ad bg">广告 </div>   用文字来标注设置的页面
       页脚部分:<div class="foot ">我是页脚</div>
 3、*{border: 0;margin: 0;padding: 0;} 通用选择器 设置整个布局的边框 外边距 内边框
        整个页面：.page{width: 100%;……}       不会出现滚动条
        页眉：.header{……height: 120px;}        页眉的高度 用背景装饰时，红色背景的高度
        导航栏：.naver{……. border-bottom:1px #dedede solid  ;下边框的大小、颜色
                     position: sticky;/*粘性定位*/                                                       （1）
                     top: 0px;/*页眉的高度 红背景距离0时 */
        主内容区：.main{……position: relative;}相对定位                                     （2）
        广告：.ad{……position: absolute;绝对定位  子绝对 父相对（必写）          （3）
                        position: fixed;固定位置 此时位置脱离原文档流 在内容区 与内容区无关
                                                                                                                         （4）
                         right: 0px;}                            距离右边0时执行position
       页脚部分：.foot{}     
       测试样式:   .bg{}      
二、设置百度页面：
 1、建立html文件
 2、<title>百度一下，你就知道</title>       设置标题
      <link rel="shortcut icon" href="img/favicon.ico"/> 设置标题图标
      <link rel="stylesheet" href="css/ccc.css" />      将html文件中引入css文件
      设置整个页面 page;          设置页眉header；       设置页眉的左边header-left
      页眉的右边header-right        （使用标签选择器）
      logo：<img src="img/dudu.png" width="270" height="129"/>  设置图片大小 
     搜索框：<form> <div class="search"><div class="inp"><input type="text" />
     <span title="按图片搜索"></span></div> <div class="search-btn"><input type
     ="submit" value="百度一下"/></div></form>   span：行级标签       search-btn：搜索按钮
     submit：提交按钮
 3、整个页面：.page{……}        页眉：.header{}            页眉的左边：.header-left{}
       text-align   line-heigh   font size    文字居中
       margin：x  x；   上下  左右
      .btn{……color: #fff !important;……}                        important相同选择器提高样式优先级
      .btn{ ……display: inline-block;……}                        让行级标签拥有块级标签的特性(自定义大小)依旧
                                                                                    保留行级标签不独占一行的特性
      .logo{……margin-top: -15px;……}                          上部外边距
      搜索框：.search{……border-radius:10px;}             搜索框边框为圆角 10px
      百度一下的输入框:.inp{……position: relative;}        父容器相对
      outline: none;取消获取焦点的边框
      相机：.inp span{……background-position: 0 -50px；……}        向上移    
      display: inline-block;       让行级标签有块级标签自定义大小的的属性 依旧保留不独占一行的特性
     display:flex;      弹性布局，常移动端使用               text-align:;让文本居中
     .search-btn input{ background: transparent;}     让背景透明
     max-heigh:;最高高度        min-heigh:;最低高度
 注：水平方向不要有滚动条 缩放为100%

心得体会：
今天早上学习了定位和页面布局，这一章节相对来说学的比较稳定，因为能在课堂上跟着老师即时练习，
所以实现的效果比往常要好很多。但是百度页面的布局要差强人意，因为有一部分在原始百度页面上的检查
代码并没有像老师一样找到，所以还是有部分没有实现，不过老师在群里面今天学习的代码，可以根据代码
慢慢的在周末进行分析，按理来说是可以跟上来的分享。虽然学习了百度页面的布局代码，但是我认为设计
一个完美的页面仍然是有难度的，就像老师说的，联系起来的知识很多，小细节也很多。还是要课下多多练
习，希望自己多多进步。