task8.task9任务总结

官网脑图：

个人脑图：

总结知识点：开始对首页布局，首先引入bootstrap组件，在head里引入bootstrap.min.css，在body最下面引入jQuery.iin.js与bootstrap.min.js（为了防止一些bug）。然后就可以在bootstrap里找到我们需要的响应式导航栏，

引入进我们的html，发现其样式跟我们需求样式差距较大，删除我们不需要的东西之后，对其添加样式，由于是引入的bootstrap，之前的样式权重较高，于是采取一些增加我们修改样式的权重值，以致于达到修改样式效果，

代码如下：

css样式如下：

，利用定位知识，做一个白色长条定到导航栏文字下方，并利用媒体查询，设置出hover效果（hover时下方出现白条，移动端不会出现白条。）

然后布局footer。引入bootstrap的三列栅格系统。代码如下

，进行一些样式修改，达到我们需要的效果。

对首页的main内容，引入四列栅格系统，一步一步修改，达到美观效果，满足需求。。

然后是下面的合作方的logo图，发现引入不了栅格系统，于是利用媒体查询设置，大于992px效果。767-992px效果，320-767px效果。代码如下

。

最后还差一个轮播图插件，从bootstrap找到相应的轮播图效果，引入我们的html，操作简单，但是原理不理解。

然后布局页面二：页面二利用的是不定宽布局中：左边不定宽，右边自适应布局，我使用的依然是栅格！不多描述。页面二的难点在于hover效果。hover圆的时候可以出现实心圆。那怎么设置hover字的时候也出现实心圆?经百度发现hover也可以达到效果，利用hover+，可以对兄弟级也产生hover效果。对css使用之后，发现没有用，于是继续百度，在此期间，对伪元素的了解加深：：before，：：after。

伪元素将会在内容元素的前后插入额外的元素，因此当我们添加它们时，使用以下的标记方式，他们在技术上是平等的。

<p>
<span>:before</span>
 This the main content.
<span>:after</span>
</p>

但是这些元素实际上并不在文档中生成。它们将在外部可见，但是你将不会在文档的源代码中找到它们，因此，实际上它们是“虚假”的元素。尽管作为“虚假”的元素，事实上伪元素表现上就像是“真正”的元素，我们能够给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。

使用伪元素常见的属性有：content‘’，display：block。需要注意的是，默认生成的是内联元素，所以我们一定要把他设置display：block使他成为块级元素，才可以达到我们改变属性的效果。

在第三个界面。我利用伪元素达到了一个炫酷的清楚浮动效果，利用的就是“伪元素三件套”，

学习了伪元素，发现也没有使用好，改变不了hover效果，这时候师兄告诉我，兄弟级的改变hover效果，被改变的只能放在后面，也就是说。文字放前面。空心圆放在后面，这样才可以对文字使用hover+效果时，让后面的空心圆变成实心圆。css代码如下：

。现在的效果是文字在前，圆在后，我们需要利用定位知识，把文字定到前面去，就可以达到我们的需求效果

然后就是最后一个界面。这里可以发现三个界面的header跟footer是一样的，直接代码拿过来就可以使用，页面三也是使用的bootstrap三列栅格。然后把一个栅格样式改变成我们需要的样式，剩下的复制就可以，在设置我们的职业推荐样式时，注意border。在这里border效果还是出了一些问题，在师兄帮助下才改掉。

最后一个页面的难点在于hover动画效果，我的想法是不hover时，显示的是职业界面。hover时把隐藏的界面显示出来，隐藏的界面覆盖住原界面。并且半透明。于是在大盒子里添加一个盒子，设置hover时的效果。代码如下：

css如下：

，原理是父级设置position：relative。自己设置absolute。在hover时定位上去，同时设置rgba。没有hover时使用display：none；

即可以达到效果。如图：