一、今天完成的事情：

1.完成了任务8，但还有些地方需要修改

2.学习给职业介绍页添加hover效果，同时还具有半透明的效果

3.学习用CSS写出圆环

4.学习做出文字环绕效果

二、明天计划的事情：

1.修改任务8，重新提交审核

2.归纳总结任务8

3.思考任务8的深度思考

三、遇到的问题：

写职业介绍页面hover效果的时候，花了比较久的时间。一开始不知道ios要放在哪个div里面，放在要hover的方框同层级上，会把方框挤压下去。后来放在hover的方框的子级上，然后使用position:relative相对定位，覆盖到方框上。再使用background-color:rgba(0,0,0,0); 将覆盖层变成黑色隐藏效果。然后再在hover动作时设定background-color:rgba(0,0,0,0.6);形成半透明效果。

四、收获：

1.学习给职业介绍页添加hover效果，同时还具有半透明的效果

实现hover效果首先需要将半透明层制作出来，新建一个div，在html将覆盖层div放在要被覆盖层的子级尾部。然后通过position:relative来将覆盖层移动覆盖住被覆盖层。接着添加样式 background-color:rgba(0,0,0,0); 选择该半透明样式是因为，该半透明效果要求ios上的文本不会透明。使用opacity会是背景跟文本一起透明，不可选用。然后在hover动作时添加 background-color:rgba(0,0,0,0.6); 则可实现设计图的hover效果了。

<div class="web-hover">
    <div class="web-hover-t">iOS工程师</div>
    <div class="web-hover-text">
        iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的，因此同样属
        于类Unix的商业操作系统。国内iOS开
        发起步相对较晚，人才培养机制更是远
        远跟不上市场发展速度。有限的iOS开
        发人才成了国内企业必争的资源。国内  iOS开发起步相对较晚，人才培养机制
        更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
    </div>
</div>

.content .web-list .web-list-col,.web-hover {
    padding: 0;
    width: 32%;
    height: 4.46rem;
    background-color: #ffffff;
    border: #d3d4d6 solid 0.01rem;
}
.content .web-list .web-hover {
    background-color: #000000;
    position: relative;
    width: 100%;
    top: -4.43rem;
    background-color:rgba(0,0,0,0);
    font-size: 0.18rem;
    color: #ffffff;
    font-weight: bold;
    border-right: 0;
    border-left: 0;
}
.content .web-list .web-hover:hover {
    background-color:rgba(0,0,0,0.6);
}

2.用CSS写出圆环效果

定出相等的高宽，然后添加background-color，这个属性是圆环内圆的颜色。

然后再写出圆的样式，这样就形成一个圆环了

.content .cont .contbar .contbar-choice .choice .circle {
    height: 0.1rem;
    width: 0.1rem
    background-color: #ffffff;
    border: #fd954e solid 0.01rem;
    border-radius: 50%;
}

3.前面写的页面是使用position定位来移动文本放在图片旁边的，这个方法有很大缺陷，不能实现文字环绕的效果

后来其实只要使用float就可以简单的实现文字环绕的效果。给图片添加float:left。html里文本放在图片同层级下，

则海洋就自然实现了文字环绕的效果了。

<div class="contprg-t">
    <img class="contprg-pic" src="img/tudou.jpg"/>
    <div class="contprg-t-text">
        土豆网公司成立于1998年11月， 是目前中国最大的互联网综合服务提供商之一，也是中国
        服务用户最多的互联网企业之一。成立10多年以来，腾讯一直秉承一切以用户价值为依归的
        经营理念，始终处于稳健、高速发展的状态。2004年6月16日，腾讯公司在香港联交所主板
        公开上市（股票代号700）。
    </div>
</div>

.content .cont .contprg .contprg-pic {
    float: left;
    height: 6.5vw;
    width: 15.7vw;
}

进度：任务8

任务开始时间：06.07

预计demo时间：06.15

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-729.html