今天完成的事情：.完成了任务六的hearder和footer。

明天计划的事情：完成任务六
遇到的问题：如何插入雪碧图中图标的位置；如何插入列表；底部图标和文字不居中

收获：会简单生成雪碧图，和简单的定位。

           用对雪碧图理解不是很深刻，用雪碧图做任务六的底部，过于麻烦，最后选择普通插入图片。

          line-height的%值，他是基于当前字体尺寸的百分比行间距。

           学会了一种下拉列表框的方法。

           对于Flex理解还是不够深刻，按钮不能运用这个属性。

具体如下

1按要求需要： hearder紧贴顶部

     添加居中按钮组和居右的按钮组

     添加右侧图标：从“雪碧图”中把icon_position图标找出来。

先将任务图片用PS把6个小图标切出来；

      再【制作雪碧图】：在https://www.toptal.com/developers/css/sprite-generator

上把6个图标文件选进去，点击生成。

然后左侧会自动生成各个图标在雪碧图中位置，右侧为雪碧图。

最后设置background-position（就是网站在左侧自动生成的）和图片位置：position。

发现问题：图标只出来1/4

解决：

两个解决方法：1.上传雪碧图时就按照你需要的大小上传

                       2.使用background-size: 属性缩放整块背景图，这里要注意下缩放了背景图的大小，对应的background-position也要同比例缩放

 2列表头

     紧贴heard （把他放入到<heard> </heard>）

发现问题：居中问题

原因是：line-height用了%，他是基于当前字体尺寸的百分比行间距。我理解成基于当前height。

解决方案：line-height= height， 

制作下拉框，之后调试盒子属性，和下拉框和内容属性。         

     【css模拟下拉框】编码如下

<div>

  <button>下拉菜单</button>

  <div>

    <a href="#">内容1</a>

    <a href="#">内容2</a>

    <a href="#">内容3</a>

  </div>

</div>

dropdown是css中Bootstrap的内容。是下拉菜单。默认隐藏。

之后再编写 .dropdown:hover .dropdown-content {display: block;}，作用在鼠标移上去后显示下拉菜单。

里面<a>是超链接。可以用其他元素。

另外：标签cursor：光标形状。

                             default     默认光标（通常是一个箭头）

                             auto 默认。浏览器设置的光标。

                            crosshair 光标呈现为十字线。

                             pointer    光标呈现为指示链接的指针（一只手）

另外：盒子阴影box-shadow

3主体：高度在列表头和footer之间，超出有滚条

      注意垂直居中，如果屏幕过窄时，设置左边的文字被截断出现”…”省略号

 【相关知识】overflow: hidden; 并且其余内容是不可见的

                                    visible 默认值。内容不会被修剪，会呈现在元素框之外。

                                    hidden 内容会被修剪，并且其余内容是不可见的。

                                    scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

                                    auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

                                   inherit 规定应该从父元素继承 overflow 属性的值。

4.布局footer紧贴底部

刚开始用雪碧图，太麻烦，之后舍弃，用了img插入。