H5 新增标签、css新增样式，手写 tab 切换 水平垂直居中
H5新增标签
1、结构标签
| 标签 | 描述 |
|---|---|
| section | 独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分 |
| article | 特殊独立区块，表示这篇页眉中的核心内容 |
| aside | 标签内容之外与标签内容相关的辅助信息 |
| header | 某个区块的头部信息/标题 |
| hgroup | 头部信息/标题的补充内容 |
| footer | 底部信息 |
| nav | 导航条部分信息 |
| figure | 独立的单元，例如某个有图片与内容的新闻块 |
2、表单标签
| 标签 | 描述 |
|---|---|
| 必须输入邮件 | |
| url | 必须输入url地址 |
| number | 必须输入数值 |
| range | 必须输入一定范围内的数值 |
| Date Pickers | 日期选择器 |
| a.date | 选取日、月、年 |
| b.month | 选取月、年 |
| c.week | 选取周和年 |
| d.time | 选取时间（小时和分钟） |
| e.datetime | 选取时间、日、月、年（UTC时间） |
| f.datetime-local | 选取时间、日、月、年（本地时间） |
| search | 搜索常规的文本域 |
| color | 颜色 |
3、媒体标签
| 标签 | 描述 |
|---|---|
| video | 视频 |
| audio | 音频 |
| embed | 嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等 |
4、其他功能标签
| 标签 | 描述 |
|---|---|
| mark | 标注（像荧光笔做笔记） |
| progress | 进度条；<progress max="最大进度条的值" value="当前进度条的值"> |
| time | 数据标签，给搜索引擎使用； |
发布日期<time datetime="2014-12-25T09:00">9：00</time> |
|
更新日期<time datetime="2015- 01-23T04:00" pubdate>4:00</time> |
|
| ruby和rt | 对某一个字进行注释 |
<ruby><rt>注释内容</rt><rp>浏览器不支持时如何显示</rp></ruby> |
|
| wbr | 软换行，页面宽度到需要换行时换行 |
| canvas | 使用JS代码做内容进行图像绘制 |
| command | 按钮 |
| deteils | 展开菜单 |
| datailst | 文本域下拉提示 |
| keygen | 加密 |
| bdi | 定义文本的文本方向，使其脱离其周围文本的方向设置 |
CSS3新增样式
一、边框
| 属性 | 描述 |
|---|---|
| border-radius | 圆角 |
| border-image | 图片边框 |
二、背景
| 属性 | 描述 |
|---|---|
| background-image | 添加背景图片 |
| background-size | 设置背景图片尺寸 |
| background-origin | 指定背景图像的位置区域 |
| background-clip | 背景剪裁 - 从指定位置开始绘制 |
三、渐变
| 属性 | 描述 |
|---|---|
| Linear Gradients | 线性渐变 - 向下/向上/向左/向右/对角方向 |
| Radial Gradients | 径向渐变 - 由它们的中心定义 |
四、文本阴影
| 属性 | 描述 |
|---|---|
| text-shadow | 文本阴影 - 指定水平阴影，垂直阴影，模糊的距离，以及阴影的颜色 |
| box-shadow | 盒子阴影 |
| text-overflow | 文本溢出 - 指定应向用户如何显示溢出内容 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |
| word-break | 规定非中日韩文本的换行规则 |
五、字体
| 属性 | 描述 |
|---|---|
| @font-face | 首先定义字体的名称（比如 myFirstFont），然后指向该字体文件 |
六、2D转换
| 属性 | 描述 |
|---|---|
| translate() | 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动 |
| rotate() | 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转 |
| scale() | 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 |
| skew() | 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 |
| matrix() | matrix()方法和2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。 |
七、3D转换
| 属性 | 描述 |
|---|---|
| translate3d(x,y,z) | 定义 3D 转化 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值 |
| scale3d(x,y,z) | 定义 3D 缩放转换 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转 |
| perspective(n) | 定义 3D 转换元素的透视视图 |
八、过渡
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property | 规定应用过渡的 CSS 属性的名称 |
| transition-duration | 定义过渡效果花费的时间，默认是 0 |
| transition-timing-function | 规定过渡效果的时间曲线，默认是 “ease” |
| transition-delay | 规定过渡效果何时开始，默认是 0 |
九、动画
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性 |
| animation-name | 规定 @keyframes 动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是 0 |
| animation-timing-function | 规定动画的速度曲线，默认是 “ease” |
| animation-delay | 规定动画何时开始，默认是 0 |
| animation-iteration-count | 规定动画被播放的次数，默认是 1 |
| animation-direction | 规定动画是否在下一周期逆向地播放，默认是 “normal” |
| animation-play-state | 规定动画是否正在运行或暂停，默认是 “running” |
| animation-fill-mode | 规定对象动画时间之外的状态 |
十、多列
| 属性 | 描述 |
|---|---|
| column-count | 规定元素应该被分隔的列数 |
| column-fill | 规定如何填充列 |
| column-gap | 规定列之间的间隔 |
| column-rule | 设置所有 column-rule-* 属性的简写属性 |
| column-rule-color | 规定列之间规则的颜色 |
| column-rule-style | 规定列之间规则的样式 |
| column-rule-width | 规定列之间规则的宽度 |
| column-span | 规定元素应该横跨的列数 |
| column-width | 规定列的宽度 |
| columns | 规定设置 column-width 和 column-count 的简写属性 |
JS中选项卡的几种写法
html：
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block;">111</div>
<div>222</div>
<div>333</div>
</div>
css：
.active{
background:red;
}
#div1 div{
width:200px;
height:200px;
border:1px solid red;
display:none;
}
script：
一、JS写法
window.onload=function(){
var oDiv=document.getElementById("div1");
var aInput=oDiv.getElementsByTagName("input");
var aDivCon=oDiv.getElementsByTagName("div");
for(var i=0;i<aInput.length;i++){
aInput[i].index=i;
aInput[i].onclick=function(){
for( var i=0;i<aInput.length;i++){
aInput[i].className="";
aDivCon[i].style.display="none";
}
this.className="active";
aDivCon[this.index].style.display="block";
}
}
}
二、jQuery写法
$(function(){
$("#div1").find("input").click(function(){
$("#div1").find("input").attr("class","");
$("#div1").find("div").css("display","none");
$(this).attr("class","active");
$("#div1").find("div").eq($(this).index()).css("display","block")
});
})
元素水平居中的几种方式
html:
<div class="parent">
<div class="children">实现元素垂直居中的方法</div>
</div>
css:
1、通过定位和translate实现
<style>
.parent{
width:100%;
height:400px;
background:#666;
position:relative;
}
/* 未知宽高 */
.children{
position:absolute;
top:50%;
left:50%;
background:red;
transform:translate(-50%,-50%);
}
</style>
2、通过定位和margin实现
<style>
.parent{
width:100%;
height:400px;
background:#666;
position:relative;
}
/* 已知宽高 */
.children{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
background:red;
margin-left：-100px;
margin-top:-100px;
}
</style>
3、通过定位和margin实现
<style>
.parent{
width:100%;
height:400px;
background:#666;
position:relative;
}
/* 已知宽高 */
.children{
width:200px;
height:200px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
</style>
4、通过flex实现
<style>
.parent{
width:100%;
height:400px;
background:#666;
display:flex;
align-items:center;
justify-content:center;
}
.children{
background:red;
}
</style>
5、通过table属性实现
<style>
/* 将父元素设置为table，子元素设置为table-cell，利用table属性实现 */
.parent{
display:table;
width:100%;
height:400px;
background:#666;
}
.children{
display:table-cell;
vertical-align:middle;
text-align:center;
background:red;
}
</style>
浙公网安备 33010602011771号