概要: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知识点的更多相关文章

  1. H5+CSS3简单动画 知识点 汇总

    乱入几个:  1.h5的一个语义化标签   figure :用于规定独立的流内容(图像 图表 照片 代码等)   figcapition:与figure配套使用,用于标签定义figure元素标题 2. ...

  2. CSS3知识点整理&&一些demo

    css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen ...

  3. [总结]WEB前端开发常用的CSS/CSS3知识点

    css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...

  4. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  5. Html5与Css3知识点拾遗(二)

    页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...

  6. h5&css3

    HTML5 HTML5简介 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.作为新HTML语言,具有新的元素,属性和行为 它具有更大的技术集,允许更多样化和强 ...

  7. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

  8. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

  9. H5+CSS3实现手指滑动切换图片

    包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <htm ...

随机推荐

  1. UIMenuItem

    UIMenuItem *share = [[UIMenuItem alloc] initWithTitle:@"分享"action:@selector(shareClick:)]; ...

  2. nginx+tomcat https实践

    1. 安装ssl'证书 使用Let's Encrypt 的免费证书: 下载源代码: git clone https://github.com/letsencrypt/letsencrypt 我时阿里云 ...

  3. html5页面结构

    我是html5初学者,最近闲来无事,和各位一起学些下html5. 开发环境 jdk1.6,tomcat6,开发工具eclipse. 新建一个web工程,创建一个index.jsp页面.页面代码如下. ...

  4. MapReduce工作流多种实现方式

    学习 hadoop,必不可少的就是编写 MapReduce 程序.当然,对于简单的分析程序,我们只需一个 MapReduce 任务就能搞定,然而对于比较复杂的分析程序,我们可能需要多个Job或者多个M ...

  5. screen:多重视窗管理程序

    screen:多重视窗管理程序 screen [-S SCREEN_NAME]: 创建窗口,可指定窗口名称,如果不指定,则是ID.$HOSTNAME screen -ls: 列出所有的screen窗口 ...

  6. Linux下面安装MySQL

  7. Android ListView ArrayAdapter 的简单使用

    前面写了3篇关于android的文章,其中的演示程序都写在了一个工程中,当时为了方便测试就在启动页MainActivity中放了3个按钮,点击不同的按钮进入不同的示例程序页面,MainActivity ...

  8. 【转】XenServer架构之XAPI

    一.XAPI对资源池的管理 作为XenServer的管理工具集,XAPI管理XenServer的主机,网络和存储.不管是OpenStack还是CloudStack,如果使用XenServer作为虚拟化 ...

  9. 对比Haproxy和Nginx负载均衡效果

    为了对比Hproxy和Nginx负载均衡的效果,分别在测试机上(以下实验都是在单机上测试的,即负载机器和后端机器都在一台机器上)做了这两个负载均衡环境,并各自抓包分析.下面说下这两种负载均衡环境下抓包 ...

  10. C#组件系列——又一款Excel处理神器Spire.XLS,你值得拥有

    前言:最近项目里面有一些对Excel操作的需求,博主想都没想,NPOI呗,简单.开源.免费,大家都喜欢!确实,对于一些简单的Excel导入.导出.合并单元格等,它都没啥太大的问题,但是这次的需求有两点 ...