.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]>
<script src=""></script>
<![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--
全屏方法
<video src="" controls></video> 插入视频
object.webkitRequestFullScreen 全屏操作
------历史---
history.back() 退回
history.forward() 前进
history.go(数字) 相对于当前回到第几条数据
h5新增-----
history.pushState();
history.replaceState();
window.onpopstate=function(){}
单页面程序
页面上的
body
<a href="baidu.com">跳转文本</a>
  空格 > > &<lt
<p>段落标签</p>
<br /> 换行标签
<h1-6>标题标签</h1-6>
块级标签:h标签 p标签 div白板
行内标签:span 白板
<form action="提交表单位置url" method="GET/POST"> 提交表单
<input type="text" /> 文本输入 value默认值
<input type="password" /> 密码输入 value默认值
<input type="button" value="按钮" />
<input type="submit" value="可点击按钮" />
</form>
<input type="checkbox" /> value name 单选框(name相同则互斥)
<input type="checkbox" /> value name(批量获取数字)
checked="checked" 默认勾选
<input type="file" /> 上传文件:
依赖form表单里面的一个属性 enctype="mulipart-----"
<input type="reset" /> 重置
<textarea>多行文本标签</textarea> name属性
<select name="显示城市" size="大小" multiple="multiple"多选> 下拉框 selected="selected" 默认选中下拉框
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
</select>
a标签 1跳转url 2锚点#id
<a href="跳转url/#id" target="_blank">文本</a>
target="_blank" 新开跳转链接,不写就当前页面跳转
<img src="图片" style="样式信息" title="提示文本" alt="图片文本"
<ul>
<li>无序标签</li>
</ul>
<ol>
<li>有序标签</li>
</ol>
<dl> 自定义列表
<dt></dt>
<dd></dd>
</dl>
表格 简写
<table border:1边框>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<td colspan="占几行"></td> 用作合并横向单元格
<td rowspan="占几列"></td> 合并纵向单元格
lable标签 跟input一起用关联,点击用户名获取光标
<lable for="i1">用户名</lable>
<input id="i1" type="text" name="user" />
<field> 带字边框
<legend>登录</legend>
</field>
移动web
--------触摸点
touchlist
touchs 触摸集合点
changedTouchs 改变的触摸点
targetTouchs 当前元素点的集合
clientX clientY 基于浏览器窗口
pageX pageY 基于页面
screenX screenY 基于屏幕
--------
媒体查询
@meaia screen and (max-width:768px){
}
-------bootstrap---
normalize 和reset
<!--共同点:都是重置样式,增强浏览器的表现一致性-->
<!--不同点:-->
<!--举个例子:ul-->
<!--reset.css list-style:none-->
<!--normalize.css 不会重置ul样式,不会重置本身在浏览器表现一致的元素-->
<!--一句话,都是增强浏览器的表现,但是normalize不会重置已经一致的浏览器-->
<!--响应时布局容器container-->
<!--container-fluid--> 流式布局
row 行,填充container容器的内间距左右15px
col列
col-lg 大屏设备以上生效 1170px
col-md 中屏设备以上生效 970px
col-sm 小屏设备以上生效 750px
col-xs 超小屏以上生效
第二个*代表每一行的等分,默认12行等分
col-xs-offset-3 列偏移多少
col-xs-pull-3 往前拉 多少
col-xs-push-3 往后推 多少
visible-lg 大屏显示 其他隐藏
visible-md
visible-sm
visible-xs
hidden-lg
hidden-md
hidden-sm
hidden-xs
<button data-toggle="collapse" data-target=".box">切换</button>
<a href=".box" data-toggle="collapse">切换</a>
collapsed 折叠
data-toggle="collapse" 声明折叠属性
data-target="xx" 目标属性 --选择权
ajax
ajax
异步与同步
// 三元简写
var xhl = new window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
// 状态0,请求初始化 xhl.readystate==0
xhl.open("GET", data);
// 状态1,打开请求 xhl.readystate==1
xhl.send();
xhr.onreadystatechange=function(){
}
// 状态0,请求初始化
// 状态1,打开请求
// 状态2,发送请求打开响应头
// 状态3, 请求处理
// 状态4,请求完成
<P></P>
<P></P>
$.ajax({
url:"baidu",
type:"get" //请求方法
datatype:"json" //请求类型
data:{id:1,name:"ab"}
}
.done(function(){
alert(data)
})
.fail(function(){
console.log("error")
})
)
css
#
css
标签上设置style属性
background=color:red;height:20px
编写css样式
1.标签的style属性
2.写在head里面,style属性
#i1{background=color:red;height:20px} id="i1"
.cl{background=color:red;height:20px} class="c1"
div{...} div选择器
#i1{...} id="i1" id选择器
.c1{...} class="c1" class选择器
优先级:标签上的style优先,然后就近原则
注意:css样式也可以写在单独文件中,引用
<link rel="stylesheet" href="commons.css" />
3.关联层级选择器(空格) span div{} span下的div段
4.组合选择器(逗号,) span,div,.c1{} 多个选择
5.属性选择器 input[type="text"]{...}
注释/* */
6边框
<div style="border:1px solid red;">
asadd
</div>
border 边框 solid实线 dotted虚线 颜色red
border-left 左边 top上边
5
height 高度 百分比
weidth 宽度,像素 百分比
text-align:ceter 水平方向居中
line-height:height 垂直方向根据标签高度居住
color 字体颜色
font-size 字体大小
font-weight 字体加粗
6 float
让标签飘起了,快级标签可进行堆叠
style="clear:both;" 父包子
style="display:inline;" 变成行内标签
style="display:block;" 变成块级标签
style="margin: 0 auto; 一行铺满无边界
7 display
display:none; 让标签消失
display:inline;
display:block;
display:inline-block;
具有inline,默认自己有多少占多少
具有block设置高度 宽度 padding margin
行内标签:无法设置高度 宽度 padding margin
块级标签:设置高度 宽度 padding margin
8 paading margin(0,auto)
paading 边距
CSS补充
position:fixed 固定位置
top bottom left right
relative + absolute 相对定位
CSS补充
</style>
层级选择器 .c1 div 表示从c1下面的div
组合选择器 .c1,.c2,div 表示这些标签都是这种样式
属性选择器
<style>
input[type="text"]{表text选择器示in莆田里面的
}
</style>
style优先级
引用外部属性
<link rel="stylesheet" href="文件.css"
border:1 solid red 边框宽度1px 实体 红色
solid实线 dotted虚线
height 高度
width宽度
line-height 根据标签高度垂直居中
text-align:center 水平居中
color 颜色
font-family字体
font-size 字体大小
font-weight 字体加粗
**** float浮层****
float:left 左漂 float:right 右漂
clear:both 父包子
display:none 隐藏
display:inline 变为行内标签
display:block 变为块级标签
display:inline-block 行内块级都有
行内标签:无法设置高度宽度 padding margin
块级标签:设置高度宽度 padding margin
*** padding margin***
padding 内边距 margin:0 auto 外边距
***css****
position:fiexd 固定在页面某个位置
posiyion:relative+absolute 相对某个位置固定
opcity:0.5 透明度
z-index:8 背景位置
overflow:hidden 拖超过范围隐藏
overflow:auto 超过范围出现滚动
当鼠标移动到当前标签时,.c1属性才会生效
.c1:hover{属性} 鼠标点上去的改变颜色
background-image:url(图片路径) 默认div大 图片重复
background-repeat:repeat-y 竖着重复/
repeat-x 横着重复
background-position:x y 可移动背景图标
background-position-x:8px 水平移动
background-position-y:8px 垂直移动
html
html 行内标签
<input type="text" /> 输入文本标签
<input type="password" /> 输入密文标签
行内标签
input系列
<input type="text" name="属性" value="值" />
<input type="password" name="属性" value="值" />
<input type="submit" value="提交" /> 提交按钮 表单
<input type="button" value="提交" /> 单纯按钮
<input type="radio" name="gender" value="1" />
圆形单选框value name 如果name相同就会互斥
<input type="checkbox" name="x" value="zhi" />
复选框或者多选框,批量拿值
默认选中 checked="checked"
<input type="file" name="名字" /> 上传文件
上传文件依赖form表单的一个属性enctype="multipart/form-data"
<input type="reset" value="重置" /> 重置为默认
<textarea name="属性">默认值</textarea>
默认值直接放中间
<select name="mingzi" size="大小" multiple=multiple> 多选
<option value="1">上海</option>
<option value="2" selected="selected">北京</option> 默认值
</select>
a标签 行内标签
跳转 <a href="跳转" title="跳转提示 "targe="_blank">内容</a>
锚点 href="#某个标签的id" 标签的id不吮许重复
title 跳转提示
target="_blank" 跳转到新开链接