发表于: 2018-07-16 22:59:09

1 698


  今天完成的事情:

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
    了解了相关的属性之后运用起来就很熟悉了。









返回列表 返回列表
评论

    分享到