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

随机推荐

git基础
1.新的未跟踪文件新创建的README文件没有进行任何跟踪 $ git status On branch master Untracked files: (use "git add < ...
Git和Code Review流程
Code Review流程1.根据开发任务,建立git分支, 分支名称模式为feature/任务名,比如关于API相关的一项任务,建立分支feature/api.git checkout -b fea ...
SQL Server查询第31到40条数据
大致分为两种情况:ID连续和ID不连续. 1.ID连续的情况: 2.ID不连续的情况: (1).两次对表查询,效率较低. ID from A) (2).外层查询没有对表A进行查询,效率提高. ID f ...
android 闪屏还是会出现黑屏问题
public class SplashActivity extends Activity{ @Override protected void onCreate(Bundle savedInstance ...
JSON字符串和JS对象之间的转换
JSON字符串和JS对象之间的转换 1 json字符串转换为js对象 1.1 标准json格式字符串转换为Js对象 JSON字符串 str JSON.parse(str) eval(str) eva ...
Salesforce Apex页面中调用远端网络服务
本文介绍了Salesforce Apex页面中调用远端网络服务的实现过程. ### 注册远端网络服务在使用Apex代码调用远端网络服务之前,首先需要在Salesforce中注册远端网络服务地址, 本 ...
代码管理工具 --- git的学习笔记一《git的个人开发》
重点摘要: 创建了一个文件后首先先通过git add . 添加到暂缓区,然后通过git commit -m "提交的名字" 提交到本地仓库,最后才可能push到远程仓库. 1. 个 ...
codevs 2879 堆的判断
codevs 2879 堆的判断 http://codevs.cn/problem/2879/ 题目描述 Description 堆是一种常用的数据结构.二叉堆是一个特殊的二叉树,他的父亲节点比两个儿 ...
python 小功能
目录 1.上传文件 2.验证码一.上传文件首先了解一下 request.FILES : 字典 request.FILES 中的每一个条目都是一个UploadFile对象.UploadFile对象有 ...
建模前的数据清洗/ETL（python）
1. 读取数据 data= open('e:/java_ws/scalademo/data/sample_naive_bayes_data.txt' , 'r') 2. 把数据随机分割为trainin ...

H5+CSS3知识点

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

随机推荐

热门专题