概要：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）

自定义字体：

　　格式：

  1. @font-face {
  2.   font-family: 'miaov';
  3.  
  4.   src: url('../fonts/glyphicons-halflings-regular.eot');
  5.   src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  6.   url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
  7.   url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
  8.   url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
  9.   url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  10. }

　　转换字体格式生生成兼容代码：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切换　　

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<style>
  7. 			.tab-control a{
  8. 				display: inline-block;
  9. 				text-decoration: none;
  10. 				color: #fff;
  11. 				height: 20px;
  12. 				width: 40px;
  13. 				text-align: center;
  14. 				line-height: 20px;
  15. 				background-color: pink;
  16. 			}
  17. 			.tabs{
  18. 				border: 1px solid red;
  19. 				height: 200px;
  20. 				width: 200px;
  21. 				/*overflow: hidden;*/
  22. 				overflow: auto;
  23. 			}
  24. 			.tabs div{
  25. 				width: 100%;
  26. 				height: 100%;
  27. 			}
  28. 			:target{
  29. 				display: block;
  30. 			}
  31. 		</style>
  32. 		<!--
  33. 			E:target 表示当前的URL片段的元素类型，这个元素必须是E
  34. 		-->
  35. 	</head>
  36. 	<body>
  37. 		<div class="tab-control">
  38. 			<a href="#tab1">tab1</a>
  39. 			<a href="#tab2">tab2</a>
  40. 			<a href="#tab3">tab3</a>
  41. 		</div>
  42. 		<div class="tabs">
  43. 			<div id="tab1">tab1</div>
  44. 			<div id="tab2">tab2</div>
  45. 			<div id="tab3">tab3</div>
  46. 		</div>
  47. 	</body>
  48. </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

　　　　矩阵使用如下：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<style>
  7. 			div{
  8. 				width: 100px;
  9. 				height: 100px;
  10. 				background-color: pink;
  11. 				transition: 3s;
  12. 				margin: 100px auto;
  13. 			}
  14. 		</style>
  15. 		<script>
  16. 			window.onload = function() {
  17. 				var box = document.getElementById("box");
  18. 				box.onclick = function() {
  19. 					var a = 1,
  20. 						b = 0,
  21. 						c = 0,
  22. 						d = 1,
  23. 						e = 0,
  24. 						f = 0;
  25.  
  26. 					var deg = 60;
  27.  
  28. 					a=Math.cos(deg/180*Math.PI);
  29. 					b=Math.sin(deg/180*Math.PI);
  30. 					c=-Math.sin(deg/180*Math.PI);
  31. 					d=Math.cos(deg/180*Math.PI);
  32.  
  33. 					box.style.transform = "matrix("+a+","+b+","+c+","+d+","+e+","+f+")"
  34. 					box.style.filter = "progid:DXImageTransform.Microsoft.Matrix( M11= "+a+", M12= "+c+", M21= "+b+" , M22= "+d+",SizingMethod='auto expand')";
  35.  
  36. 				}		
  37.  
  38. 			}
  39. 		</script>
  40. 	</head>
  41. 	<body>
  42. 		<div id="box"></div>
  43. 	</body>
  44. </html>

第五课 CSS3 and H5 知识点的更多相关文章

  1. 第五课 Css3旋转放大属性，正六边形的绘制

    ---恢复内容开始--- 一.效果 二.知识点 1.background-color: rgba(0,0,0,.4);   (红色.绿色.蓝色.透明度(0-1)) 2.position: absolu ...

  2. 【C语言探索之旅】 第二部分第五课：预处理

    内容简介 1.课程大纲 2.第二部分第五课: 预处理 3.第二部分第六课预告:   创建你自己的变量类型 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语 ...

  3. [译]Quartz.NET 框架 教程（中文版）2.2.x 之第五课 SimpleTrigger

    第五课 SimpleTrigger 如果你需要在一个指定时间段内执行一次作业任务或是在指定的时间间隔内多次执行作业任务,SimpleTrigger应该能满足你的调度需求.例如,你希望触发器在2015年 ...

  4. NeHe OpenGL教程 第四十五课：顶点缓存

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  5. kali linux 渗透测试视频教程 第五课 社会工程学工具集

    第五课 社会工程学工具集 文/玄魂 教程地址:http://edu.51cto.com/course/course_id-1887.html   目录 第五课社会工程学工具集 SET SET的社会工程 ...

  6. Adafruit的树莓派教程第五课：使用控制电缆

    Adafruit的树莓派教程第五课:使用控制电缆 时间 2014-05-09 01:11:20 极客范 原文 http://www.geekfan.net/9095/ 主题 Raspberry PiM ...

  7. NeHe OpenGL教程 第三十五课：播放AVI

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  8. NeHe OpenGL教程 第二十五课：变形

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  9. NeHe OpenGL教程 第十五课：纹理图形字

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

随机推荐

  1. C#基础练习

    1.冒泡排序 namespace _0 { class Program { public static int[] BubbleSort(int[] arr) { ; i < arr.Lengt ...

  2. http请求与响应(content-type)

    http请求信息由浏览器把地址栏URL信息和页面(html.jsp.asp)组装成http请求消息体(如下). <request-line>(请求消息行)<headers>(请 ...

  3. JAVA源码分析-HashMap源码分析(一)

    一直以来,HashMap就是Java面试过程中的常客,不管是刚毕业的,还是工作了好多年的同学,在Java面试过程中,经常会被问到HashMap相关的一些问题,而且每次面试都被问到一些自己平时没有注意的 ...

  4. 【转】[教程]在 win7 / win8 下安装苹果系统 (懒人版)

    前言   这篇安装教程的素材在国庆就准备好了,但那时学习任务比较重,没有时间发帖,一直拖到现在.趁这个周末有空,赶紧写完它,希望能帮助一些景友. 论坛已经有不少安装教程,如果对这篇安装教程有疑问可以去 ...

  5. thinkphp使用ajax

    thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 一.thinkphp使用ajax返回数 ...

  6. [慢查优化]建索引时注意字段选择性 & 范围查询注意组合索引的字段顺序

    文章转自:http://www.cnblogs.com/zhengyun_ustc/p/slowquery2.html 写在前面的话: 之前曾说过"不要求每个人一定理解 联表查询(join/ ...

  7. 一个ListView怎么展示两种样式

    private class MyBaseMsgAdapter extends BaseAdapter { //获取数据适配器中条目类型的总数,修改成两种(纯文本,输入+文字) @Override pu ...

  8. 微信开发(一)内网映射之natapp的使用

    1.https://natapp.cn/client/lists 从官网下载客户端和注册账号 2.打开文件后退出 当前Ctrl+C 输入natapp -authtoken=xxxxx 此为从我的客户端 ...

  9. 配置子目录Web.config使其消除继承，用虚拟目录创建多个网站的方法

    来源:http://www.wtnzone.com/post/2011/02/20/Set-Web-Config-to-Turn-Inheritance-Off.aspx ASP.NET提供了强大的W ...

  10. 关于数组去重的几种方法-------javascript描述

    第一种方法:借助json对象来实现,若json对象中无该属性则添加,否则不添加,最后返回json对象的属性,时间复杂度为O(n) function deleteArrayRepeat(arr) { v ...