Day 33

今天完成的事情

      1.开始task8,并完成8-1的导航条

      2.大致搞懂轮播图 

遇到的问题

      1.【solved】设置了访问后及悬停时的导航栏样式，但访问后的样式怎么都无效

后来给visited的字体颜色加了 !important 解决

但总是没办法在点击后使下边框仍然存在，百度之后才明白，原来点击后存在边框并不是ta被访问过，而是获取到元素焦点，即 :focus

收获

      1.bootstrap里面col-xs , col-sm ,col-md,col-lg（也可以用媒体查询，在不同屏幕宽度下，改变盒子宽度，高度）

col-lg一般用于大屏设备(min-width:1200px);
col-md一般用于中屏设备(min-width：992px);
col-sm一般用于小屏设备(min-width：768px);
col-xs用于超小型设备(max-width：768px);
后面跟数字是几，也就是占几份比如是4，也就是一行可以显示3个或者12，就是一行可以显示1个。
关于使用，一般设置的话四个属性都用到会比较好，这样就可以在不同屏幕上很好的展示。

      2.自适应的雪碧图。（只适用于尺寸一样的雪碧图）

在组合雪碧图的时候让他们竖直排列。
设置background-size:100%；
第一张图片的的background-position:0 0;
最后一张图片的的background-position:0 100%;
假设有n张图片：
每张图片所占%就是
100% 除以（n-1)
第m张图片的background-position:0 m-1/n-1;
其中m不小于1，不大于图片总数。

使用雪碧图时，图标的坐标为负值：雪碧图的默认开始坐标是左上角的 0 0  ，图片从左上角开始布置， 也就是第一个图标为0 0；要显示其余icon就要移动背景，也就是背景要向左移动才能显示icon，这时坐标的位置在X轴负值区域，Y轴也是同理，所以会出现负值。这里X轴向右是正，Y轴向下是正。

background-position：top 40px right 50px;

background-position:的关键字取值有top bottom center left right;

可是当我看到background-position：top 40px right 50px;的时候是一脸懵逼的，因为没有见过。后来查了资料，

如果是四个取值，后面的值根据前面的关键字走，如果全面的关键字是top 后面是40px;背景图片距离边框容器上边缘40px，其他方向值都是按上面一样取值。

这比只用关键字或者只用数值更加有效的精确定位。只用px，比如background-position：50px 50px，这是按照left top，为基准计算的，如果你想定位到右下角，还是用bottom 30px right 30px更有效。

      3.导航栏

其中这部分代码

是当浏览器视口（viewport）的宽度小于一定宽度值时，导航条内部的元素变为折叠排列；

当浏览器视口（viewport）的宽度大于一定宽度值时，导航条内部的元素变为水平排列。

这部分代码，则是建立导航栏内部元素

      4.关于link /visited/hover/active     

active:连接被按下的时候 （瞬间）

 :focus：获取到元素焦点

所以说，a:hover定义一定要放在a:link、a:visited的后面！

       5.如何实现轮播图？

一共有四种方式来实现：

swiper插件实现轮播图：

下载插件导入，按照教程即可实现精美效果。

JS实现轮播图：

用父容器“id=container”存放所有的内容，子容器“list”存放图片，子容器“buttons”存放按钮

jQuery实现轮播图：

css3实现轮播图：

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。
       transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
       transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。
       Animation字面上的意思，就是“动画”的意思，
我们使用CSS3的Animation制作动画，实现简单的幻灯片效果，可以省去复杂的js,jquery代码。Animation有一点不足之处，
我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，大家还是使用flash或js等。
-webkit-animation是一个复合属性，
webkit-animation: name duration timing-function delay iteration_count direction;
                              命名   持续时间  时间曲线             延时      重复几次            方向

明天计划学习

      继续完成任务八

注： 【unsolved】截日报发出前未解决的问题

        【solved】已解决现象但并未从根本上解决问题

        【solved】已解决