郭姗姗-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%

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1