html笔记1

vertical-align:middle 图片中心线居中
小圆点用before
.zhongxin s::before{
content:"";
display:block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
right: 10px;
}
过渡动画 transition
属性 时间 速度ease linear
延时
移动 transform
translate(x,y) 如果写百分号，就走自己宽度的百分比
translateY translateX
缩放 scale（x，y）
旋转 rorate(度) 90deg
transform-origin:top right 旋转角度
伪类选择器
：first-child
: last-child
:nth-child(n)
skew(deg,deg) 斜切
--------动画=---- infinite无限次播放 alternate 轮流反向播放 paused暂停播放
animation:动画名字 花费时间 运动曲线 开始时间 播放次数 是否反向
声明动画
@keyframes 动画名字 {
form{} —0%
to{} —100%
}
--------伸缩布局
display：flex 父亲添加
flex：1 代表一份
min-width 最小宽度
max-width 最大宽度
box-shadow 盒子阴影
-----弹性布局
display：flex 定义弹性
flex-direction 排列方向
row 默认主轴水平，左端方向
row-reverse 主轴水平，右端方向
column 垂直方向 上沿
column-reverse 垂直方向 下沿
flex-wrap 换行属性
nowrap 默认不换行
wrap 换行
wrap-reverse 换行，第一行在下方
justify-content 对齐方式
flex-start 头部对齐 flex-end 尾部对齐
center 中间对齐 space-between两端对齐 apace-around
algin-items 交叉轴上对齐方式
flex-start 起点对齐 flex-end 终点对齐
center终点对齐 baseline基线对齐 stretch默认铺满
background：-webkit-linear-gradient()
渐变的起始位置，起始颜色 位置；结束颜色 位置；
---------设置图片自适应----
background-size:cover 图片自适应大小
background-attachment:fixed 背景固定视差效果

条件注释：写在网页任何地方，根据浏览器版本加载内容
<–! -->
lt< gt> lte<= gte>=
<–![if lt IE 9]>

<![endif]–>

 视差滚动效果Stellar.js插件
 $(function () {
/*1.引入*/
/*2.结构   data-stellar-background-ratio="0.3"  样式 bg 需要 background-attachment: fixed;*/
/*3.初始化插件*/
$.stellar({
    horizontalScrolling: false,
    responsive: true
});

});

 background-attachment:fixed
 data-stellar-background-ratio="0.3"  
 滚动视差

-------dom扩展
获取元素方式 css选择器
querySelector() 获取符合选择器的第一个元素
querySelectorAll() 获取符合选择器的所有元素

------h5–
全屏方法
插入视频
object.webkitRequestFullScreen 全屏操作
------历史—
history.back() 退回
history.forward() 前进
history.go(数字) 相对于当前回到第几条数据
h5新增-----
history.pushState();
history.replaceState();
window.onpopstate=function(){}
单页面程序