Html5-CSS3

1. 多媒体标签

1.1 audio 音频标签

使用

<audio src="小猪佩奇.mp3" autoplay> </audio>

支持的格式

格式	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

1.2 video 视频标签

使用

  <video src="小猪佩奇.mp4" autoplay controls ></video>

支持的格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

video常用属性、方法、事件

属性	方法	事件
duration 视频播放时长	play 播放	canplay 视频加载完毕准备播放
currentTime 当前播放进度	pause 暂停	timeupdate 播放时-持续触发
volume 音量大小

source标签

可以通过在多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时，自动会切换到第二个source标签

    <!-- 当1.mp4出错时，自动切换到2.mp4 ... --><video ><source src="1.mp4"><source src="2.mp4"><source src="3.mp4"></video>

object-fit属性

当video标签视频内容宽度没有铺满video标签时，可以在css写上该属性即可

    video {/* 让视频内容铺满整个video标签 */object-fit: fill;}

1.3 公共属性

以下属性是要直接写在标签上的如 autoplay controls

<video src="小猪佩奇.mp4" autoplay controls ></video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

2. 伪类选择符

2.1. E:first-child

匹配父元素的第一个子元素E。

  <style>ul li:first-child{background-color: red;}</style><ul><li>列表项一</li><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>

E:last-child 则是选择到了最后一个li标签

2.2. E:nth-child(n) E:nth-last-child(n)

匹配到父元素的第n个元素或者是倒数第n个元素

相比 E:first-child 则要强大了不少，功能如下（死记硬背是最好的）

匹配到父元素的第2个子元素

ul li:nth-child(2){}
匹配到父元素的倒数第2个子元素

ul li:nth-last-child(2){}
匹配到父元素的序号为奇数的子元素

ul li:nth-child(odd){} odd 是关键字奇数的意思（3个字母）
匹配到父元素的序号为偶数的子元素

ul li:nth-child(even){} even（4个字母）
匹配到父元素的前3个子元素

ul li:nth-child(-n+3){}

选择器中的 n 是怎么变化的呢？

因为 n是从 0 ，1，2，3… 一直递增

所以 -n+3 就变成了
- n=0 时 -0+3=3
- n=1时 -1+3=2
- n=2时 -2+3=1
- n=3时 -3+3=0
- …
匹配到父元素的后3个子元素

ul li:nth-last-child(-n+3){}

2.3 E:nth-of-type(n)

这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可

  <style>ul li:nth-child(2){/* 字体变成红色 */color: red;}ul li:nth-of-type(2){/* 背景变成绿色 */background-color: green;}</style><ul><li>列表项一</li><p>乱来的p标签</p><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>

也就是说

E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

3. 属性选择符了解

E[att] 选择具有att属性的E元素。
E[att=“val”] 选择具有att属性且属性值等于val的E元素。
E[att^=“val”] 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$=“val”] 选择具有att属性且属性值为包含val的字符串的E元素
E[att*=“val”] 选择具有att属性且属性值为包含val的字符串的E元素。

4. 伪元素选择器了解

4.1 伪元素种类

E::before 在E元素前插入一个元素
E::after 在E元素后插入一个元素
E::first-letter 选择到了E容器内的第一个字母
E::first-line 选择到了E容器内的第一行文本

4.2 h5写法和传统写法区别了解

单冒号 E:before
双冒号 E::before
浏览器对以上写法都能识别 双冒号 是h5上语法的规范

4.3 伪元素的注意事项了解

想要让伪元素有效，必须遵循以下注意事项

伪元素只能给双标签加不能给单标签加
伪元素的冒号前不能有空格如 E ::before 这个写法是错误的
伪元素里面必须写上属性 content:"";

5. 2D转换（变换）transform

5.1 2d移动 translate

2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似定位

使用2d移动的步骤：

给元素添加 转换属性 transform
属性值为 translate(x,y) 如 transform:translate(50px,50px);

  div{transform: translate(50px,50px);}

5.2 2d旋转 rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
使用步骤：

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{transform: rotate(0deg);
}

旋转中心点 transform-origin: x y;

**注：**x y默认的中心点是元素的中心点(50% 50%),还可以给xy设置像素或者方位

5.3 2d缩放 scale

div{transform: scale(宽的倍数，高的倍数);transform: scale(x,y);//综合写法
}

6.动画

/* 1 声明动画函数 */
@keyframes ani_div {      0% {        width: 100px;        background-color: red; }      50% {       width: 150px;       background-color: green; }      100% {       width: 300px;        height: 300px;       background-color: yellow;}
}div {      width: 200px;     height: 200px;      background-color: aqua;     margin: 100px auto;      animation-name: ani_div;  /* 2 调用动画 */       animation-duration: 2s; /* 持续时间 */ animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out;/*速度曲线 匀速/慢快慢/慢快/快慢/慢快慢*/animation-delay: 0s;/*延迟时间*/animation-iteration-count: 2/ inﬁnite 为无限循环 ;/*循环次数*//*animation-direction:循环方向*/animation-ﬁll-mode:forwards/backwards/both;/*等待或者结束的状态 100样式/0%样式/同时*/animation-play-state: running/paused;/*播放/暂停*/
}/*多个动画的写法，用，隔开*/
animation: name duration timing-function delay iteration-count direction ﬁll-mode,
animation: name duration timing-function delay iteration-count direction ﬁll-mode;/*动画结束事件animationend*/
/*元素在动画结束之后，会自动触发的事件 animationend*/
var div = document.querySelector("div");
div.addEventListener("animationend", function () {      console.log("div的动画结束之后，触发");
})

7. 3D转换 transform

3D移动

1. transform:translate3d(x,y,z)  其中 x y z 分别指要移动的轴的方向的距离
2. translform:translateX(100px)  仅仅是移动在x轴上移动
3. translform:translateY(100px)  仅仅是移动在Y轴上移动
4. translform:translateZ(100px)  仅仅是移动在Z轴上移动 /* 父元素 */
body {
/* 视距 */     perspective: 1000px;/*perspertive 就是用来设置 人 和 物体 的距离 */
}/* 目标 */
div {      width: 200px;      height: 200px;      background-color: aqua;      margin: 100px auto;      /* z轴的移动 */      transform: translateZ(0px);
}

3D旋转 rotate3d

左手准则

左手的手拇指指向 x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

transform:rotateX(45deg); /*沿着x轴正方向旋转 45度 */
transform:rotateY(45deg); /*沿着y轴正方向旋转 45deg */
transform:rotateZ(45deg); /*沿着Z轴正方向旋转 45deg*/
transform:rotate3d(x,y,z,deg); /*沿着自定义轴旋转 deg为角度*/

3D缩放 scale3d

transform: scale3d(1 ,1,2);  /*宽，高 缩放一倍，厚度放大两倍 */
transform: scaleX(1); /*只缩放宽 */
transform: scaleY(1); /*只缩放高 */
transform: scaleZ(1); /*只缩放厚 */

3D呈现 transform-style

代码写给父元素

transform-style: ﬂat;  /*平面模式  -  不开启3维立体环境 */
transform-style: preserve-3d;  /*3维立体环境*/

8.背景缩放background-size

background-size: 背景图片宽度 背景图片高度
单位： 长度|百分比|cover|contain;
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

9.渐变

div {background: -webkit-linear-gradient(left,biue,skyblue)//起始方向，颜色，颜色
}

10.移动端大量使用 CSS3盒子模型box-sizin

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

CSS3盒子模型：盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了

/*CSS3盒子模型*/ box-sizing: border-box;

移动端布局

flex布局

display: flex;

**父项常见属性 **

1.ﬂex-direction：设置主轴的方向

ﬂex-direction: row/row-reverse/column/column-reverse;/*左->右/右->左/上->下/下->上*/

2.justify-content 设置主轴上的子元素排列方式

flex-start	默认值，头部开始（左对齐）
flex-end	尾部开始（右对齐）
center	主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

3.ﬂex-wrap设置是否换行

nowrap 不换行
wrap 换行

4.align-items 设置侧轴上的子元素排列方式（单行）

ﬂex-start 从头部开始
ﬂex-end 从尾部开始
center 居中显示
stretch 拉伸（子元素没有高度）

5.align-content 设置侧轴上的子元素的排列方式（多行）

flex-start	默认值，头部开始（左对齐）
flex-end	尾部开始（右对齐）
center	主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间
stretch	设置子项元素高度平分父元素高度
align-self	控制子项自己在侧轴上的排列方式（在子元素自己身上写）
order	定义项目的排列顺序，数值越小越靠前（默认值0）

rem布局

//common.less
a {text-decoration: none;
}
// 一定要写到最上面
html {font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {html {font-size: 320px / @no;}
}
// 360
@media screen and (min-width: 360px) {html {font-size: 360px / @no;}
}
// 375 iphone 678
@media screen and (min-width: 375px) {html {font-size: 375px / @no;}
}// 384
@media screen and (min-width: 384px) {html {font-size: 384px / @no;}
}// 400
@media screen and (min-width: 400px) {html {font-size: 400px / @no;}
}
// 414
@media screen and (min-width: 414px) {html {font-size: 414px / @no;}
}
// 424
@media screen and (min-width: 424px) {html {font-size: 424px / @no;}
}// 480
@media screen and (min-width: 480px) {html {font-size: 480px / @no;}
}// 540
@media screen and (min-width: 540px) {html {font-size: 540px / @no;}
}
// 720
@media screen and (min-width: 720px) {html {font-size: 720px / @no;}
}// 750
@media screen and (min-width: 750px) {html {font-size: 750px / @no;}
}

//index.less
// 首页的样式less文件
@import "common";
// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
// link 是把一个 样式文件引入到 html页面里面
body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial,Helvetica;background: #F2F2F2;
}
// 页面元素rem计算公式： 页面元素的px / html 字体大小 50
// search-content
@baseFont: 50;
.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 15rem;height: 88rem / @baseFont;background-color:#FFC001;.classify {width: 44rem / @baseFont;height: 70rem / @baseFont;margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;background: url(../images/classify.png) no-repeat;// 背景缩放background-size: 44rem / @baseFont 70rem / @baseFont;}.search {flex: 1;input {outline: none;width: 100%;border: 0;height: 66rem / @baseFont;border-radius: 33rem / @baseFont;background-color:#FFF2CC;margin-top: 12rem / @baseFont;font-size: 25rem / @baseFont;padding-left: 55rem / @baseFont;color: #757575;}}.login {width: 75rem / @baseFont;height: 70rem / @baseFont;line-height: 70rem / @baseFont;margin: 10rem / @baseFont;font-size: 25rem / @baseFont;text-align: center;color: #fff;}
}// banner
.banner {width: 750rem / @baseFont;height: 368rem / @baseFont;img {width: 100%;height: 100%;}
}
// ad
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}
// nav
nav {width: 750rem / @baseFont;a {float: left;width: 150rem / @baseFont;height: 140rem / @baseFont;text-align: center;img {display: block;width: 82rem / @baseFont;height: 82rem / @baseFont;margin: 10rem / @baseFont auto 0;}span {font-size: 25rem / @baseFont;color: #333;}}
}

less运算

1rem	html字体的大小
页面元素的rem值	页面元素值(px)/(屏幕宽度/划分的份数)
html中font-size的大小	屏幕宽度/划分的份数
页面元素的rem值	页面元素值(px)/html中font-size的大小

响应式布局

设置宽度为100%	超小屏设备（手机）	<768px
设置宽度为750px	小屏设备（平板）	‘>’=768px-<992px
设置宽度为970px	中等屏幕（桌面显示其）	‘>’=992px-<1200px
设置宽度为1170px	宽屏设备（大桌面显示器）	‘>’=1200px

H5-C3-移动端布局相关推荐

移动端布局三种视口_移动H5的meta视口标签、弹性布局原则和背景图片适配
很多小伙伴对viewport的理解不是很透彻,于是这一篇重点聊聊viewport(视图)的知识点.以帮助大家更加容易理解移动端H5页面的适配方案. 解读移动H5适配最重要的html标签:meta视口标 ...
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生（安卓）交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发混合开发.原生开发.H5开发的区别: 简述:主流APP:原生APP.H5(webapp).混合APP,相对应的定制研发即原生开发.H5开发.混合开发原生APP开发优缺点: 可以访问手机 ...
01移动端布局基础之流式布局
技术交流QQ群:1027579432,欢迎你的加入! 1.移动端基础浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器等. 移动端常见 ...
关于移动端布局和pc端写法
一:移动端准备工作 <meta name="viewport" content="width=device-width, initial-scale=1.0, ma ...
前端开发响应式布局和移动端布局有哪些特点和区别？
同学们在进行前端开发的时候经常会运用到响应式布局,在进行移动端页面开发的时候还会使用到移动端布局的知识,那么你知道他们都有哪些优缺点和相同之处吗?下面小千就来给大家列举一下. 响应式布局响应式布局是 ...
H5+搭建移动端应用
1. H5+搭建移动端应用前两篇介绍了全栈系统里面后台和前端: 后台篇:Flask搭建后台前端篇:Vue2.0搭建PC前端项目线上地址:项目访问链接,账号:admin 密码:admin 今天讲述 ...
脸萌团队分享会－H5在移动端
公司里的设计师们一直不清楚HTML5是做什么的.有android开发.IOS开发.要个H5开发干嘛?每天都看着我清闲清闲的~ 所以为了增进团队友谊,借一次公司内部的分享会,我制作了PPT,主要大概讲解 ...
【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍布局:layout 对事物的全面规划和安排页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
html+css移动端布局
文章目录移动端一.移动端基础 **1 .浏览器现状** **2 .手机屏幕现状** **3.常见移动端屏幕尺寸** **4.移动端调试方法** 5.总结二.视口 **1.布局视口** `layo ...
rem移动端布局怎么适配IOS和Android
rem移动端布局怎么适配IOS和Android 昨天"佬大"问我做的h5页面在ios上面显示正常,但是Android就变惨不忍睹了,于是我又开始了度量之路,几个小时过去了.... ...

H5-C3-移动端布局

Html5-CSS3

1. 多媒体标签

1.1 audio 音频标签

1.2 video 视频标签

1.3 公共属性

2. 伪类选择符

2.1. E:first-child

2.2. E:nth-child(n) E:nth-last-child(n)

2.3 E:nth-of-type(n)

3. 属性选择符了解

4. 伪元素选择器了解

4.1 伪元素种类

4.2 h5写法和传统写法区别了解

4.3 伪元素的注意事项了解

5. 2D转换（变换）transform

5.1 2d移动 translate

5.2 2d旋转 rotate

5.3 2d缩放 scale

6.动画

7. 3D转换 transform

8.背景缩放background-size

9.渐变

10.移动端大量使用 CSS3盒子模型box-sizin

移动端布局

flex布局

rem布局

响应式布局

H5-C3-移动端布局相关推荐

最新文章

热门文章

H5-C3-移动端布局

Html5-CSS3

1. 多媒体标签

1.1 audio 音频标签

1.2 video 视频标签

1.3 公共属性

2. 伪类选择符

2.1. E:first-child

2.2. E:nth-child(n) E:nth-last-child(n)

2.3 E:nth-of-type(n)

3. 属性选择符 了解

4. 伪元素选择器 了解

4.1 伪元素种类

4.2 h5写法和传统写法区别 了解

4.3 伪元素的注意事项 了解

5. 2D转换（变换）transform

5.1 2d移动 translate

5.2 2d旋转 rotate

5.3 2d缩放 scale

6.动画

7. 3D转换 transform

8.背景缩放background-size

9.渐变

10.移动端大量使用 CSS3盒子模型box-sizin

移动端布局

flex布局

rem布局

响应式布局

H5-C3-移动端布局相关推荐

最新文章

热门文章

3. 属性选择符了解

4. 伪元素选择器了解

4.2 h5写法和传统写法区别了解

4.3 伪元素的注意事项了解