今天把任务14的重构完成好了,任务14中的重构之后的部分之前就是使用的媒体查询方式写的所以修改起来十分迅速。在不使用bootstrap框架之后,原先的一些内容发生少许的变化,大体上都是字体格局位置的变化,所以利用原先的内容能让重构完成的很快。并且今天的内容使用到了sass中的新内容,那就是在一个sass文件中引用多个其他的sass文件,这样的好处是什么呢。主要是实现了我们对一些部分产生模块化的区分,在我们本次的任务中,三张页面的页首和页尾均是使用的同种样式,所以选择把header部分和footer部分的scss样式单独写在两个文件中,当我们在a页面想用时直接调用header部分,footer部分和自己写的main部分的scss样式。当我们下次需要修改之时就可以之修改头或尾中的scss样式通过重新编译可以节约非常多的时间和心神。
今天遇到的一个样式的问题,在我们写完一个页面的整体样式后发现页面的右边会多出一块白边来,检查一下并不是我们各个模块的问题,因为并没有使用过浮动,父元素也没有因为乱设置定位而造成父元素坍塌,所以网上找了一下解决的方法。具体的方式是让我对html这个标签重新写一下它的样式改为
官方脑图:

我的脑图:

任务总结:
1.任务八是我们css中遇到的最大的一个难题,因为它要求我们要学习好多的模块话的东西。本任务用到的是bootstrap框架中的一部分东西;
2.bootstrap中的导航栏可以直接拿过来在我们这个任务中运用,稍加修改样式就能实现任务中的要求,在我们进行样式修改时需先找到你想改的那个元素的选择器;
3。轮播图的效果是bootstrap中实现的相对来说较好的一部分,拿过来直接利用就可以了。
4.栅格布局是bootstrap中的精髓,因为运用栅格布局我们很好的实现了响应式的模块化的效果。但在任务运用的过程中发现要控制间距样式起来比较的麻烦;
5.所以可以使用css中更为方便的媒体查询来对需要做响应式布局的地方进行修改
6.css中的动画效果能让交互效果更加的赏心悦目,我们可以用动画实现很多,旋转,轮播变色等等很多;
7.在我们使用伪类的过程中后续任务发现对于兄弟元素中使用伪类需要把触发的点写在出现效果的元素之前才生效了。
评论