发表于: 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 动画是否在运行或暂停
明天计划的事情
继续完成任务八
师兄我的任务七 帮忙审核一下谢谢啦
评论