首页 > 其他 > 详细

基础笔记

时间:2019-01-12 01:01:10      阅读:230      评论:0      收藏:0      [点我收藏+]

header: 定义文档的页眉

nav:定义导航链接部分

footer:定义文档或节的页脚底部

article: 定义文章

section:定义文档的节

aside:定义所处内容之外的内容、侧边

新增属性

<datalist>

  <option></option>

</datalist>

fieldset 表单相关元素分组,打包  legend搭配使用

新增input type属性

placeholder="请输入"

autofaocus

multiiple多个文件

required必填

acceskey激活快捷键

视频

audio多媒体ogg mp3 wav

<source src=""/>

  autoplay自动播放

controls 控制控件

loop 循环播放

video 视频 Ogg mpeg.4 webm

css3新增选择器

结构(位置)伪类选择器(css3)

  :first-child 首个子元素

:last-child 最后一个子元素

:nth-child 第N个子元素 (even)(odd) 奇数 (n)

全部:ntn-last-child 

属性选择器

div[class="demo"] ^= $= *=

伪元素选择器

E::first-letter

E:: first-line

E:: selection选中可设置样式

after和before

E::before {

  content:"";必带

}

  在·盒子·内容内部前面插入内容,其实before是盒子,行内盒子,可转换

E:after 之后

css3盒子模型

box-sizing: border-box padding等之类外加模式变成内减

但会压下去图片(图片内放)

文字图片对齐

     dispaly:inline-block;

    vertical:center

    margin-top: 10px;

 比特虫---在线制作ico图片 引入

过渡(css3)

  transition: 要过渡的属性(property)  花费时间(dur)  运动曲线 何时开始

            0 ease 0  (默认值)

  过渡动画:

   动画:

2D变形(css3)transform 位移、旋转、倾斜、缩放、支持矩阵动画支持取代大量靠flash才实现的效果

translate(x,y)  移动 平移 rotate(deg)

transfrom:translate(50%,50%);走自己盒子一半

scale(x,y)0 0% 1 100%

rotate(45deg)

  正为逆

transition-origin: right bottom(跳转原点)

skew(倾斜)

transform: skew(deg,deg)

鼠标经过显示阴影

box-shawdow: 4个边

3D变形

动画 animation动画名称 动画时间  动画曲线 动画开始 播放次数(inifinite) 是否反方向(alternate)

@keyframes move {

  from {}

  to {}

} 声明动画

动画旋转

flex伸缩布局

父 display: flex;

子  flex:1 占一份

min-width: 最小宽度

flex-direction: colum垂直(默认水平) row-reverse(水平翻转)

 

基础笔记

原文:https://www.cnblogs.com/jieshan/p/10258295.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!