H5C3新增样式笔记 H5C3新增了许多标签、表单属性以及立体属性。 大部分特性都具有兼容性问题，（IE9+以下版本基本不兼容，但其他浏览器兼容效果还是很好的）。 H5新增标签： 1.语义标签 *在IE9中，需要将这些素转为块级素——display：block；* 2.多媒体标签 可以在不借助flash插件的情况下，插入音视频。 属性属性名属性值必须属性srcurl地址显示播放控件controlscontrols播放器宽度widthpx播放器高度heightpx循环播放looploop等待时显示图片poster图片url自动播放autoplayautoplay *为了照顾不同浏览器兼容性问题，尽量将视频合适保存为.mp4格式。同时为了节约流量，谷歌红绿灯浏览器将自动播放关闭了，我们需要打开自动播放并且添加muted属性。 *显示控件，不同浏览器样式是不同的 属性属性名属性值必须属性srcurl显示播放控件controlscontrols自动播放autoplayautoplay循环播放looploop *为了照顾不同浏览器兼容性问题，尽量将视频合适保存为.mp4格式。同时为了节约流量，谷歌红绿灯浏览器将自动播放关闭了，我们需要打开自动播放并且添加muted属性。 3.新增input中type类型type说明email必须为邮箱名url必须为地址date必须为日期time必须为时间month必须为月份week必须为周number必须为数字tel必须为电话号码search必须为搜索框color必须为颜色 4.新增表单类型属性属性名属性值表单内容不能为空requiredrequired表单提示‘本文placeholderplaceholder自动聚焦（搜索框）autofocusautofocus自动填充autocompleteautocomplete提交多个文件multiplemultiple C3新增样式： 一.新增选择器 1.属性选择器：根据不同属性选择设置样式。权重为0，0，1，0 E element 素 att attribute属性 val value 属性值E[att]以att属性的标签E[att = “val”]以att属性为val属性值的标签E[att^ = “val”]以att属性为val开头的标签E[att $= “val”]以att属性为val结尾的标签E[att *= “val”]含有val的属性 2.结构伪类选择器E:first-childE标签下第一个子素E:last-childE标签下最后一个子素E:nth-child(n)E标签下按公式选择E:first-of-typeE标签下第一个子素E:last-of-typeE标签下最后一个子素E:nth-of-type(n)E标签下按公式选择 n（even 偶数 odd 奇数 5n 五的倍数 n+5 从五开始的） child是基于父素排序，而type是基于类型排序。 3.伪素选择器：权重是0，0，0，1::after素内后面插入::before素内前面插入 *after与before属于行内素，这两个素在文档中找不到故称伪类素。 *这两个素必须要有content属性，即必须要有内容。 二.新增样式 1.盒子模型 该盒子模型与之前的css盒子模型不同，给该盒子设置padding以及border不会撑大盒子。 2.滤镜 模糊处理，px值越大，越模糊。 3.计算 4.过渡 transition：经常搭配：hover使用 谁过渡给谁用该属性属性属性名属性值属性(宽 高 等)transition-propertywidth：10px持续时间transition-duration5s过渡曲线transition-timing-functionease过渡延迟transition-delay5s 5.2D转换 translate移动： *translate不影响其他盒子，对行内块素无效。 rotate旋转： *deg degree 度。 *正数为顺时针，负数为逆时针。默认旋转中心是素中心点。 *中心点可以更换：transform-origin：x y； xy间用空格 scale 缩放： *xy间用逗号隔开，xy是倍数关系，不是px，以中心点缩放，可以更换中心点，不影响其他盒子。 6.CSS3动画 animation 相比于过渡，动画可以产生更有趣生动的画面。并且可以连续自动播放。 定义动画：animation name是动画名，在body标签中需要使用。 使用动画：属性属性名属性值动画名animation-name动画名称动画持续时间animation-duration时间，例如5s动画运动速度animation-timing-functionease 先快后慢动画延迟animation-delay时间，例如5s循环次数animation-iteration-count默认1次，写纯数字下周期播放方向animation-directionnormal 正常alternate 逆向结束状态animation-fill-modeforwards 最后一个关键帧backwards 最初的关键帧播放状态animation-play-staterunning 跑paused 停 *animation-timing-function：step(5); 分五步播放完，可以用作定格动画。 7.3D转换 translate平移： 透视： 透视越小，盒子在视角中越大，透视要写在被观察素的父素上。 rotate 旋转： *XYZ中填入deg。 style 呈现： 子素开启立体，默认flat不开启3D立体。同样，代码是写在父素上。 浏览器私有前缀 为了照顾不同浏览器的兼容性问题。 -moz- 火狐私有 -ms- ie私有 -webkit- Safria、chrome以及以webkit为内核的浏览器私有 -o- opera私有
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/59622.html
