今天完成的事情

修真院官网头部

不使用bootsrtap，使用html+css完成导航栏的制作

修真院官网轮播图

不使用bootsrtap，使用html+css完成轮播图的制作，且轮播图能实现自动切换和手动切换两种效果

修真院官网模块一

此部分主要是给4个盒子使用媒体查询，结合百分比以及弹性盒子就可以完成，并不是很难

今天遇到的问题

问题1：在制作导航栏时候，折叠状况下点击无反应，如下图

解 决：此问题发现很多人遇到过，其实问题很简单，在于父元素在设置了固定高度，当其是折叠状态时，高度不够显示出现的导航栏，取消固高即可解决此问题。

今天的收获

折叠导航栏

之前在任务十也是使用css+html制作过折叠导航栏，但是不够熟练，今天加强了理解，导航栏的制作主要是需要写两个导航模块一个非折叠的，一个折叠的，以及input标签。折叠导航栏默认是隐藏状态，通过input关联折叠导航，点击input按钮后折叠导航显示，另外一个隐藏

轮播图的制作

基本思路：

以5张图片为例：

1.基本布局：

将5张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置5个图片的总尺寸，然后放入相框容器div，相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。

2.设置动画：

然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。5张图片，需要切换4次，定义动画0%，20%，40%，80%，100%。

3.动画分解：

为了让图片切换后静置一段时间，可以将动画细分为：位移切换和静置两个阶段。

即20%~40%里面包含切换到第二张图片并且将第二张图片静置。

另外，根据需要可以对各个图片添加相应的序号和图片简介。

同时实现轮播图的自动轮播和手动切换

轮播图手动切换功能参考了如下页面代码

主要使用animation属性、@keyframes规则结合hover效果即可完成。

animation 

animation属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

@keyframes 

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

明天的计划

1.完成底部模块css样式的制作

2.完成页面一