今天完成的事情

任务八 第一个界面完成部分，页面如下

1.顶部客服电话以及微信外部链接的制作：

使用弹性盒子即可做出来，没有难点

2.导航栏的制作：主要需要解决在“首页”和“职业”等选项的跳转，下方出现白色横条：

3.轮播图的制作：

轮播图主要使用bootstrap库来实现，目前阶段套用格式即可，其主要组成部分分为三个：指示符 ， 轮播图片 ，左右切换按钮

今天遇到的问题

1.制作头部选项时，一个400*100的父盒子内无法放下4个100*100的子盒子，最后一个盒子被挤到了下面，如下图：

问题分析：为了使四个子盒子能并排显示，故使用了display-inlineblock使其成为行内块状元素，但是inlineblock元素时存在间距的，它同时具备了块状元素的可设置宽高属性，又继承了行内元素的并排显示属性，就像行内元素内文字默认有行距一样，此处四个子盒子也具有了盒距

解决方法：1.在父元素内添加代码font-size：0px; ,添加后子盒子内的“首页”等文字会同时消失，之后给每个子盒子添加

“font-size：16px；”文字就会出现

                 2.除了使用行内块状元素特性使子盒子并排显示外，还可以直接使用浮动来实现，给每个子盒子添加代码float：left即可

2.使用bootstrap实现轮播图，下方的指示符为横条“一”字样式，而不是ui图中的小圆点形式

问题分析：轮播图引用的bootstrap内封装好的文件，指示符为bootstra库内的，那么显示效果也是bootstrap内设置好的，那么可以通过自己修改属性来实现ui图的效果

解决办法：到bootstrap官网下载好bootstrap库到本地，在其css样式中搜索carousel-indicators修改其中指示符的样式（宽度、高度以及border-redius设置好50%），在html文件中引用本地bootstrap库即可

今天的收获

1.知道了行内块状元素是有边距的，就和行内元素中文字有间距一样，在以后使用display：inline-block时就知道间距本身存在，是否会影响到页面的布局，如果影响到了，可以使用font-size这一参数来解决，或者时选择使用浮动来替代使用行内块状元素

2.学会bootstrap本地库css的修改及使用：之前在html文档head中link引用的时bootstrap的在线css样式，我们只能引用，无法对css样式进行修改，而我们在使用中如果需要惊醒相关的修改，需要先下载bootstrap库到本地文件夹，修改完成后再html文档中进行重新引用。

明天计划的事情

任务八页面一：

1.查询如何在bootstrap轮播图中插入文字，并且文字的位置和大小是可以设置的，并完成轮播图板块

2.完成页面一剩下的内容：剩下内容目前来看应该没什么大问题，主要就是利用弹性盒子来完成，但是由于涉及到的图片比较多，所以明天确定看下是否需要用雪碧图来完成，如果需要，重新看一次雪碧图的使用方法