H5+CSS3知识点
概要：CSS3美化样式、自定义字体图标、滤镜设置、CSS3选择器、transform2D转换、新增表单控件、vaild表单验证、表单样式美化等。
属性选择器：
E[attr]只使用属性名，但没有确定任何属性值
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
自定义字体：
格式：
@font-face {
font-family: 'miaov';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
转换字体格式生生成兼容代码：https://www.fontsquirrel.com/tools/webfont-generator
滤镜：
0 ~ 1
0% ~ 100%
灰度 -webkit-filter:grayscale(1);
棕色调 -webkit-filter:sepia(1);
饱和度 -webkit-filter:saturate(0.5);
色相旋转 -webkit-filter:hue-rotate(90deg);
反色 -webkit-filter:invert(1);
透明度 -webkit-filter:opacity(0.2);
亮度 -webkit-filter:brightness(0.5);
对比度 -webkit-filter:contrast(2);
模糊 -webkit-filter:blur(3px);
阴影 -webkit-filter:drop-shadow(5px 5px 5px #ccc);
注意：需要加前缀才能生效。
H5新增表单元素：
表单控件：
<form action="">
<input type="email" />
<input type="submit" />
</form>
email : 电子邮箱文本框，跟普通的没什么区别
当输入不是邮箱的时候，验证通不过
移动端的键盘会有变化
tel : 电话号码
url : 网页的URL
search : 搜索引擎
chrome下输入文字后，会多出一个关闭的X
range : 特定范围内的数值选择器
min、max、step( 步数 )
number : 只能包含数字的输入框
color : 颜色选择器
datetime-local : 显示完整日期，不含时区
time : 显示时间，不含时区
date : 显示日期
week : 显示周
month : 显示月
表单的特性和函数：
placeholder : 输入框提示信息
autocomplete : 是否保存用户输入值
默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填，不能为空
Pattern : 正则验证 pattern="\d{1,5}“
Formaction 在submit里定义提交地址
表单选择器：
E:target 表示当前的URL片段的元素类型，这个元素必须是E，例子：实现tab切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tab-control a{
display: inline-block;
text-decoration: none;
color: #fff;
height: 20px;
width: 40px;
text-align: center;
line-height: 20px;
background-color: pink;
}
.tabs{
border: 1px solid red;
height: 200px;
width: 200px;
/*overflow: hidden;*/
overflow: auto;
}
.tabs div{
width: 100%;
height: 100%;
}
:target{
display: block;
}
</style>
<!--
E:target 表示当前的URL片段的元素类型，这个元素必须是E
-->
</head>
<body>
<div class="tab-control">
<a href="#tab1">tab1</a>
<a href="#tab2">tab2</a>
<a href="#tab3">tab3</a>
</div>
<div class="tabs">
<div id="tab1">tab1</div>
<div id="tab2">tab2</div>
<div id="tab3">tab3</div>
</div>
</body>
</html>
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
旋转：
transform
rotate(90deg) 旋转函数 取值度数
deg 度数
transform-origin:x y 旋转的基点
倾斜：
skew(90deg) 倾斜函数 取值度数
skewX()
skewY()
缩放：
scale(2) 缩放函数 取值 正数、负数和小数
scaleX()
scaleY()
位移：
translate() 位移函数
translateX()
translateY()
矩阵：
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现缩放
x轴缩放 a=x*a c=x*c e=x*e;
y轴缩放 b=y*b d=y*d f=y*f;
通过矩阵实现位移
x轴位移: e=e+x
y轴位移: f=f+y
通过矩阵实现倾斜
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
矩阵使用如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
transition: 3s;
margin: 100px auto;
}
</style>
<script>
window.onload = function() {
var box = document.getElementById("box");
box.onclick = function() {
var a = ,
b = ,
c = ,
d = ,
e = ,
f = ; var deg = ; a=Math.cos(deg/*Math.PI);
b=Math.sin(deg/*Math.PI);
c=-Math.sin(deg/*Math.PI);
d=Math.cos(deg/*Math.PI); box.style.transform = "matrix("+a+","+b+","+c+","+d+","+e+","+f+")"
box.style.filter = "progid:DXImageTransform.Microsoft.Matrix( M11= "+a+", M12= "+c+", M21= "+b+" , M22= "+d+",SizingMethod='auto expand')"; } }
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
H5+CSS3知识点的更多相关文章
- H5+CSS3简单动画 知识点 汇总
乱入几个: 1.h5的一个语义化标签 figure :用于规定独立的流内容(图像 图表 照片 代码等) figcapition:与figure配套使用,用于标签定义figure元素标题 2. ...
- CSS3知识点整理&&一些demo
css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出 http://codepen ...
- [总结]WEB前端开发常用的CSS/CSS3知识点
css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- Html5与Css3知识点拾遗（二）
页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...
- h5&css3
HTML5 HTML5简介 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.作为新HTML语言,具有新的元素,属性和行为 它具有更大的技术集,允许更多样化和强 ...
- HTML5与CSS3知识点总结
好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...
- H5+CSS3做图片轮播滚动效果
HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...
- H5+CSS3实现手指滑动切换图片
包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <htm ...
随机推荐
- 「视频直播技术详解」系列之七：直播云 SDK 性能测试模型
关于直播的技术文章不少,成体系的不多.我们将用七篇文章,更系统化地介绍当下大热的视频直播各环节的关键技术,帮助视频直播创业者们更全面.深入地了解视频直播技术,更好地技术选型. 本系列文章大纲如下: ...
- SQLite使用(二)&&数据类型
1.概述 我们熟知的数据库引擎大部分采用静态数据类型,即列定义的类型定义了值的存储,并且值要严格满足列的定义,同一列所有值的存储方式都相同,比如定义了一个列类型为整型 int,不能在该列上输入'abc ...
- 实时观察Apache访问情况的工具Apachetop
Linux服务器的负载.进程等信息可以通过top命令查看.而Apache的运转如何实时的观察呢?“tail -f”log文件?这是个好方法,但是太累了! 所以,感谢Chris Elsworth为我们提 ...
- 用友NC开发的ListView切换成FormEdit
在点击 “修改” 按钮或者双击ListView中某一项Item,将进入FormEdit即卡片界面,但是 FormEdit有两种状态,一种是 可编辑的状态(点修改按钮进入的状态),一种是非可编辑状态(双 ...
- hadoop常用的操作命令
1.显示hdfs上test目录下的所有文件列表 hadoop fs -ls /test/ 2.查看hdfs中的文件内容 hadoop fs -cat /daas/bstl/term/rawdt/201 ...
- Linux基础练习题(三)
1.显示当前系统上root.fedora或user1用户的默认shell: [root@www ~]# egrep "^(root|fedora|user1)" /etc/pass ...
- EZchip花1.3亿美元买Tilera然后以8亿美元把自己与Tilera一起卖掉
2014年7月EZchip花1.3亿美元收购的Tilera2015年10 Mellanox 8亿美元收购EZchip,2016年1月完成.EZchip转手卖掉Tilera与自己? http://www ...
- sql select 1-10的数字
SELECT V FROM ( VALUES (1), (2), (3), (4), (5), (6), (7), (8), (9), (10) ) [1 to 10](V)
- python学习4
1.python中的函数的参数,这个参数的设置比起C比较特殊的地方就是参数可以预保留的.这个意思就是可以保留下来不填写,然后需要的时候再传入. 这个调用之后结果如下,另外可以看出python比起C来一 ...
- 【机器学习Machine Learning】资料大全
昨天总结了深度学习的资料,今天把机器学习的资料也总结一下(友情提示:有些网站需要"科学上网"^_^) 推荐几本好书: 1.Pattern Recognition and Machi ...