第五课 CSS3 and H5 知识点
概要：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 = 1,
b = 0,
c = 0,
d = 1,
e = 0,
f = 0; var deg = 60; 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); 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>
第五课 CSS3 and H5 知识点的更多相关文章
- 第五课 Css3旋转放大属性，正六边形的绘制
---恢复内容开始--- 一.效果 二.知识点 1.background-color: rgba(0,0,0,.4); (红色.绿色.蓝色.透明度(0-1)) 2.position: absolu ...
- 【C语言探索之旅】 第二部分第五课：预处理
内容简介 1.课程大纲 2.第二部分第五课: 预处理 3.第二部分第六课预告: 创建你自己的变量类型 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语 ...
- [译]Quartz.NET 框架 教程（中文版）2.2.x 之第五课 SimpleTrigger
第五课 SimpleTrigger 如果你需要在一个指定时间段内执行一次作业任务或是在指定的时间间隔内多次执行作业任务,SimpleTrigger应该能满足你的调度需求.例如,你希望触发器在2015年 ...
- NeHe OpenGL教程 第四十五课：顶点缓存
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- kali linux 渗透测试视频教程 第五课 社会工程学工具集
第五课 社会工程学工具集 文/玄魂 教程地址:http://edu.51cto.com/course/course_id-1887.html 目录 第五课社会工程学工具集 SET SET的社会工程 ...
- Adafruit的树莓派教程第五课：使用控制电缆
Adafruit的树莓派教程第五课:使用控制电缆 时间 2014-05-09 01:11:20 极客范 原文 http://www.geekfan.net/9095/ 主题 Raspberry PiM ...
- NeHe OpenGL教程 第三十五课：播放AVI
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- NeHe OpenGL教程 第二十五课：变形
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- NeHe OpenGL教程 第十五课：纹理图形字
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
随机推荐
- JQ-动画合集（ing...）
一:给向上按钮加动画,让页面卷回上面而不是生硬跳转.js $('#topBtn').click(function(){ $('html,body').animate({scrollTop: '0px' ...
- python学习笔记（二）
(一)模块打包 ---> 注:suba和subb文件夹下的__init__.py文件,即使为空,也必须存在 "setup.py" from distut ...
- webapi-创建项目
- wifi万能钥pc版提示手机未连接
关于PC版万能钥匙的用法 大部分人都是在“未连接到手机”再不知道怎么搞了 怎么连接到手机呢? 首先要把你的手机变成路由器 让电脑连上 这个都知道怎么搞吧 手机版万能钥匙有个一键让手机变成热点 再用电 ...
- python 生成器等语法
生成器 调用生成器函数,不会执行生成器函数中的代码,而是返回一个对象, 这个对象是生成器(可用type()函数判断这个对象类型), 如果要运行生成器函数中的代码, 需要调用 next()方法, ...
- Android studio 软件板块
- windows7下Wamp安装php扩展imagick(转)
ImageMagick是一套功能强大.稳定而且免费的工具集和开发包,可以用来读.写和处理超过185种基本格式的图片文件,包括流行的TIFF, JPEG, GIF, PNG, PDF以及PhotoCD等 ...
- CocoaPod 使用方法
huangyichengdeMacBook-Pro:~ Jack$ pod search AFNetworking/Library/Ruby/Site/2.0.0/rubygems.rb:250:in ...
- [Hadoop] Hadoop学习历程 [持续更新中…]
1. Hadoop FS Shell Hadoop之所以可以实现分布式计算,主要的原因之一是因为其背后的分布式文件系统(HDFS).所以,对于Hadoop的文件操作需要有一套全新的shell指令来完成 ...
- DOM0,DOM2,DOM3 事件基础知识
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...