今天完成的事

      1   html  代码规范

             1.1    缩进与换行

                       强制使用 4 个空格不允许使用，其他   2个空格  或者  tab健,  建议每行不要超过120个字符。

             1 .2   

                  class  命名      必须全部 字母小写   单词用  -  分割

                  id       命名      不可以用相同的 名字   强烈建立 全部用小写

            1.3

                 class   和id 命名不可以用相同的 名字      比如   “a”

            1.4 标签名

                    全部用小写 字母

            1.5

                嵌套原则

               p中不得嵌套   div

            1.6 通用模式

               启动  ie、  edge模式

    <meta http-equiv=X-UA-Compatible<span "<="" span=""> content=<span "<="" span="">IE=Edge<span "<="" span="">>

            1.7   禁止   img  图片   src 为空

  2   css代码规范

              css  书写 顺序

                 1.位置属性(position, top, right, z-index, display, float等)
              2.大小(width, height, padding, margin)
              3.文字系列(font, line-height, letter-spacing, color- text-align等)
              4.背景(background, border等)
              5.其他(animation, transition等)

            css 规范

                  css缩写属性

                   比如 padding：1rem 2rem 1rem 0；

             命名缩写

                  #nav

             16进制颜色 代码缩写

              css命名 规范

                   使用  中-   不要使用   _ 下划线

              css 转态前面加 状态前缀  比如

                    .is-nav

            常见的css 命名规则

          1)页面结构

                 容器: container                                        页头：header                内容：content/container                       页面主体：main

                 页尾：footer                                            导航：nav                      侧栏：sidebar                                        栏目：column

         页面外围控制整体佈局宽度：wrappe         左右中：left right center

       2)导航

                 导航：nav                                       主导航：mainnav                    子导航：subnav                                   顶导航：topnav

                 边导航：sidebar                              左导航：leftsidebar                右导航：rightsidebar                            菜单：menu

                 子菜单：submenu                           标题: title                                摘要: summary

     3)功能

                 标志：logo                                    广告：banner                           登陆：login                                           登录条：loginbar

                 注册：register                               搜索：search                            功能区：shop                                       标题：title

                 加入：joinus                                  状态：status                             按钮：btn                                            滚动：scroll

                标籤页：tab                                    文章列表：list                           提示信息：msg                                    当前的: current

                小技巧：tips                                   图标: icon                                  注释：note                                          指南：guild

                服务：service                                 热点：hot                                   新闻：news                                        下载：download

                投票：vote                                      合作伙伴：partner                    友情链接：link                                     版权：copyright

深度思考： 

         1   css 可以绘制那些 常见的特殊形状

              答  有   

                     缩放transform: scale(0.5)                     如图  1

                     倾斜 transform: skew(30deg)               如图  2

                       移动 transform: translate(45px)       如图  3

               如图

         2   如何理解 vertical-align 和 line-height

                     line-heiht 是指文本 基线 baseline之间的垂直距离

                      属性有     normal   默认属性    number   设置 数字  length 设置固定的行间距

        3  请解释 一下  css3中的   flex的 弹性布局 

                      我会 很熟练 精通  不不写了

         4    html中的   dl ul  ol  用哪个好

                    ul的意思是   ul许列表的意思

                    ol是有序列表的意思

                   常见的问题   如何去掉 黑点

                     list-style-tyle：none；

           作业画   三角形    太极图    梯形

学习任务6的知识点

             前端的第一个框架  bootstrap的学习

      介绍

                BootStrap 是Twitter的工程师开发的前端框架，可以非常方便的设计出好看的页面效果。

       认识

           在使用之前  先再来认识一下这个框架   用了和不用有什么区别

           区别： 能明显的 看出   按钮   用了和不用的区别  很大的不同    样式好看了很多

     使用框架

            1     然后就是引入 每个 框架的数据包   jquery     bootstap的css    bootstrap的js

                注意顺序不能错了

         2   然后及时使用里面组件就行

                比如

                按钮    <button type="button" class="btn btn-primary">提交按钮</button>

                图片   

      3   栅格布局

        代码

       样式

     4 组件的使用

              这是 下啦菜单的使用

     5   模态框的使用

       相对   绝对   浮动  前面学过了

新知识   雪碧图的使用

         介绍：

                  background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧            图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某          些场景也常常会使用到这个属性，这次就总结下它的用法。

    使用的准备工作

          在线制作

                 https://www.toptal.com/developers/css/sprite-generator  

                可以把  自己想要的在这里制作出来

            最后制作如图

         然后就是使用

       雪碧图的使用总结

                     就是把  需要的图片都 做在一张图上   利用  background-position: -40px 0; 定位的功能找到自己需要的图片就行