今天完成的事情：

bs中的hidden相当于display:none;都是不占空间的，而visibility:hidden;这个虽然也是隐藏，但占空间。而bs的visible，就等于visibility:visible，这看得见当然都占空间。

这里用这个属性做了最顶上的电话和第三方登录的显示方式。结合媒体查询可以做到和bs的效果。

其他的分成多少列的我用了百分比，也结合媒体查询修改做到和bs类似的效果。

而导航栏的点击下拉，再点击回去这块用到了js

<script type="text/javascript">

function mychat() {

var oBtn = document.getElementById('con');

if (oBtn.style.display == "block") {

oBtn.style.display = "none";

} else {

oBtn.style.display = "block";

}

}

</script>

这也就是一条判断语句，判断如果是存在，就隐藏，如果是隐藏的就变为块。总之要么显示，要么隐藏。

关于轮播图用到的是css的animation

animation与transition功能相同，都是通过改变元素

的属性来实现动画效果的。但是它们也有区别：transition是只能通过改变指定属性的开始值

与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果。animation却可以通

过定义多个关键帧以及每个关键帧中元素的属性值来实现更为复杂的动画效果。

语法

animation: name duration timing-function delay iteration-count direction;

例子可以看http://www.tuicool.com/articles/BN3iiq

一般就三步，现在HTML中做一个div，然后在css中设置它的position，keyframes，然后是animation

明天计划的事情：CSS任务中哪些没做好的再修改。看下JS。

遇到的问题：无

收获：css中display:none;和visibility:hidden;区别，以及visibility:visible的用法+媒体查询也可以实现bs中hidden和visible的功能。css动画animation的常用语句。基本JS语法。

成果链接http://119.10.57.69:880/jnshu3938/CSS/task15/task15-1/task15-1.html

代码链接https://github.com/xuoutput/HTML-CSS/blob/master/task15/task15-1/task15-1.html