第五课 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新增表单元素：

　　表单控件：

　　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管线 ...

随机推荐

javaweb 基于java Servlet登入简单入门案例
项目流程第一步:创建一个java webproject第二步:创建三个界面,1,login.jsp 2 success.jsp 3 fail.jsp第三步:更改新建界面编码格式,utf-8 默然编码 ...
懒加载（getter\setter理解）
为什么要用懒加载 1.首先看一下程序启动过程:(如图) 会有一个mian的设置,程序一启动会加载main.storyboard main.storyboard又会加载箭头所指的控制器控制器一旦加载, ...
myql Connect
mysql折腾笔记 2014-01-05 10:58 经常吹嘘自己玩过各种数据库. redis, mysql, sqlite, mongodb..常用数据库都不在话下,不料今天却在远程连接mysql上 ...
javaScript timer控制
<script type="text/javascript"> ; //间隔一秒循环执行 var id = setInterval(function () { num ...
关于win7 安装redis的问题
首先在https://github.com/MSOpenTech/redis/releases下载64位的安装包到任意盘中将改名为redis 使用cmd命令启动redis 进入 redis 目录 ...
MAC上安装 HLA(High Level Assembly）
1.安装HLA 最新版的hla汇编器可在这里下载,支持MacOs,Linux,Windows平台 2.安装步骤将下载好的hla程序包放在Mac根目录下最重要的一步是设置好环境变量,打开Mac根目录 ...
redis中的跳跃表
参考:http://www.leoox.com/?p=347
iOS视频边下边播--缓存播放数据流
实现视频边下边播,这里的边下边播不是单独开一个子线程去下载,而是把视频播放的数据给保存到本地.简而言之,就是使用一遍的流量,既播放了视频,也保存了视频. 用到的框架:<AVFoundation/ ...
很方便的后台ajax上传文件
<a href="javascript:void(0);" url="{:U('teacherd?id='.$vo['id'])}" class=&quo ...
转→js数组遍历千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...

第五课 CSS3 and H5 知识点

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

随机推荐

热门专题