发表于: 2018-07-16 22:59:09
1 701
今天完成的事情:
1.修改任务8,9
2.写任务10;
3.运用表单页;切图与制作雪碧图;
明天计划:
1.完成任务10;
2.复习前面的知识;
遇到的问题:
调整bootstrap下拉菜单时的小问题
收获总结:
1.学习linear-gradient() 函数:
linear-gradient() 函数用于创建一个线性渐变的 "图像"
CSS 语法:background: linear-gradient(direction, color-stop1, color-stop2, ...);
取值:
direction:角度值指定渐变的方向(或角度)
color-stop1, color-stop2,.:用于指定渐变的起止颜色
2.响应式、自适应、移动的区别:
响应式和自适应的关系很密切,经常二者是互通的。响应式通常意味着对待任何变化,反应更积极更快。
而自适应往往是应对一个新需求或是情况的被动反应,例如变化。响应式设计应对不同因素的变化,都会
很流畅自如,例如设备宽度。而自适应设计会基于一定的因素搭建。将二者结合是一种理想化,提供一个完
美功能模式的网站。
3.任务8&9的任务总结:
链接:http://new.wiki.jnshu.com/pages/viewpage.action?pageId=23102534
任务名称:CSS任务8&9
成果链接:https://zzzheli.github.io/task8/task8-1.html
任务耗时:7.11~7.15 共计5天
技能脑图:
个人脑图:
官网脑图:
任务总结:
a.任务进度基本符合预期,无延期。
b.任务8&9完成要点:框架方面:学会运用bootstrap框架,其中包括响应式导航栏,轮播图,栅格布局,按钮框。布局方面:需要运用媒体查询做响应式布局,通过不定宽加自适应进行页面布局。CSS样式方面:选择器的运用:类选择器,相邻兄弟选择器,子元素选择器等等相互搭配使用才能发挥出更好更便捷的效果。flex盒子:flex盒子的功能十分强大,其中的排列方式,布局方式,换行与否的设置等等都十分实用,运用好flex对于完成任务占有重要影响。媒体查询:媒体查询设置好相应断点的不同的样式才能将网页做到响应与否,配适于不同尺寸的设备。剩下的零零散散关于CSS圆的绘制,页面跳转,半透明,自定义颜色 背景设置......都是CSS中的基础,运用好基础知识才能更好的完成任务。
c.关于任务中遇到的一些问题:
1. 媒体查询使用时断点设置出现了点问题,导致到设备断点的时候页面布局效果不理想。
解决方法:断点设置应该合理,根据具体的布局来写。
2.PC端页面与响应式布局的先后权衡:之前写任务的时候,没有考虑清楚它们的先后顺序,边写页面边配置响应式,导致调整了很久 消耗了比较多的时间;其实应该先写好PC端的总体页面布局,再来慢慢配置响应式媒体查询,这样做起来就比较快捷方便。
解决方法:PC端页面与响应式布局的先后权衡:先写总体页面布局再配置响应式。
3.修改bootstrap框架中的样式:之前不知道如何去自定义bootstrap框架中的样式
解决方法:查看其bootstrap框架中的源代码,或者使用开发者模式查找bootstrap框架中的相应样式。
4.bootstrap轮播图的运用及其原理:之前引入bootstrap的代码做起来很简单,但是其具体的原理没有搞清楚。
解决方法:查看官网教程运用轮播图,查看其bootstrap框架中的源代码查找轮播图的工作原理。
5.flex盒子运用:之前对于flex的比较陌生。
解决方法:查看相关教程了解到flex的6个主属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
了解了相关的属性之后运用起来就很熟悉了。
评论