发表于: 2018-11-14 00:22:44

1 687


今天完成事情

       

task1

     目录:

         1 写单页入门   2 常见web页面自适应  3 开发企业官网   4 使用框架和更高级语言   

         5 js入门       6 移动项目开发       7 学习异步       8 学习框架进行快速开发 

         9 微信小程序   10 入复盘项目

task2

     基本元素 布局+定位 样式 切图 版本控制

     display:inine/block inine-block  none;行元素 块元素

     float: left right   左右浮动

     position:relative相对 absolute绝对  static左右排列  fixed窗口定位

task3

     form表单  flex弹性盒子

     forom  input:text input:password input:radio input:checkbox seleck button lable

     flex    

     父容器: dispaly:flex;  flex-direction: x轴方向   flex-warp 是否换行

         justify-content x轴对齐方式 align-items y轴对齐方式 align-content 多线轴对齐方式

     子容器:order子容器顺序 align-self 子容器在y轴的对齐方式  flex 子容器伸缩 

task4

    grid栅格 grid布局   雪碧图   ????

    父容器  display grid-template-columns grid-template-rows grid-template-areas grid-        template grid-column-gap grid-row-gap grid-gap justifty-items align-items justfy-

        conter grid-auto-colums grid-auto-rows grid-auto-flows grid

    子容器 grid-column-siart grid-column-end grid-row-start grid-row-end grid-columd          grid-row grid-area justfy-sely align-self

task5

    自适应和响应式

    长度单位  自 em rem ex ch vw vh  不  px in cm mm pt pc

    viewport可视区

    layout布局

    响应式三要素  媒体查询 流式布局 弹性图片

task6

    bootstrap

        入门     框架介绍   安装     概述

        整体架构 架构思想   栅格系统  css组件

        基础布局  排版 代码 表格 表单 按钮

        总结反思  总结 反思

    组件框架思想   js组件 css组件 基础布局组件  栅格系统 响应式设计

    栅格系统  

        主要规则  row必须在container中   在row中 创建column  具体内容放在column中

        实现原理  页面宽度 container宽度 row补全宽度 column的组合 浮动 宽度 偏移 嵌套

        css组件   basic基本样式 size尺寸 special 特殊样式  color 颜色样式 status 状态样         式            animat 动画样式

        基础布局 排版 代码 表格 图像 按钮 表单    围绕布局样式

task7

     html5 

     新增元素 article aside figure figcaption header footer hgroup nav section  time               putput mark

     新增表单特性 

            placeholer 占位

            autocmplete 规定表单是否应该启用完成填充功能

            autifocus   为表单挑选正确的起点焦点

            list+dataist 显示输入建议

            min+max 最小和最大值 

            step 规定数字的间距 

            requred 规定是否必填

     表单

        tel email url  search  range  color  number  

        placeholder autocomple autofocus lisrt+datalist  min+max   required

task8

    动画

    trarform:translate(20px;20px)  位移

    transform: scale(2.1.5)   缩放

    transform:rotate( 20deg)    旋转

    transform:skewx(20deg) x轴旋转

    translation 过度

    trsndition-property 制定那个css属性过度   all默认所有

    teansition-duration 制定过度时长

    transition-timing-function 制定变化曲线速度

    teansirion-delay  指定延迟执行的时长

    animation

      key语法   @keyname 动画名称{时间点(元素状态)}

      属性

       animation-name 动画名称

       animation-duation 动画一份周期花费的时间

       animarion-timing-fuction 动画的速度曲线

       animation-delay 延迟执行

       animation-airection 动画是否在下一份周期你行播放

       animarion-lteatlion-count 动画播放次数

       animatlon-fill-mode 动画时间之外的状态

       animation-play-stare 动画是否在运行或暂停 

明天计划的事情

      继续完成任务八


  师兄我的任务七    帮忙审核一下谢谢啦


返回列表 返回列表
评论

    分享到