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

　　表单控件：

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

随机推荐

初识Azkaban
先说下hadoop 内置工作流的不足 (1)支持job单一 (2)硬编码 (3)无可视化 (4)无调度机制 (5)无容错机制在这种情况下Azkaban就出现了 1)Azkaban是什么 Azkaba ...
ZooKeeper：数据模型
ZooKeeper数据模型 ZNode ZNode 分类 Stat Watcher Watcher工作原理 Watcher事件说明 Watcher注册事件发布示例 ZooKeeper 数据模型整 ...
MySQL 导入数据
MySQL中可以使用两种简单的方式来导入MySQL导出的数据. 使用 LOAD DATA 导入数据 MySQL 中提供了LOAD DATA INFILE语句来插入数据. 以下实例中将从当前目录中读取文 ...
萌新笔记——linux下（ubuntu）反删除（误删恢复）与回收站制作
刚刚有个小伙伴不小心删了他写了好几的天代码,为他心疼之余帮他找回了文件. 想到我之前也常常误删一些文件,就干脆分享一下我的反删除方法,并说说我做的回收站(好low的,求大神指点) 首先是反删除软件ex ...
ubuntu 安装 vmware 12
安装VMware Workstation 12 ubuntu15.10安装VMware Workstation12的步骤如下: 1.在 https://download3.vmware.com/sof ...
redis字符串
字符串类型是redis的基本类型字符串数据类型的相关命令用于管理 redis 字符串值,基本语法如下:COMMAND KEY_NAME SET 和GET用于设置和读取key的值 1.SET key ...
[No000098]SVN学习笔记5-分支，合并，属性，补丁，锁，分支图
行结束符和空白选项在项目的生命周期中,有时可能会将行结束符由 CRLF 改为 LF,或者修改一段代码的缩进.不幸的是这样将会使大量的代码行被标记为已修改,尽管代码本身并没有被修改.这里列出的选项将会 ...
最长不下降序列nlogn算法
显然n方算法在比赛中是没有什么用的(不会这么容易就过的),所以nlogn的算法尤为重要. 分析: 开2个数组,一个a记原数,f[k]表示长度为f的不下降子序列末尾元素的最小值,tot表示当前已知的最长 ...
C#进阶系列——WebApi 异常处理解决方案
前言:上篇C#进阶系列——WebApi接口传参不再困惑:传参详解介绍了WebApi参数的传递,这篇来看看WebApi里面异常的处理.关于异常处理,作为程序员的我们肯定不陌生,记得在介绍 AOP 的时候 ...
2016第三届C++大会参会感悟（上）
继05年第一届C++大会,09年第二届,2016年10月28日-29日,在上海举行第三届C++大会.讲师主要有C++之父 / Bjarne Stroustrup,前Facebook研究科学家 / An ...

H5+CSS3知识点

H5+CSS3知识点的更多相关文章

随机推荐

热门专题