语义化标签
(1)header 头部标签
<header><header/>
(2)nav 导航标签
<nav><nav/>
(3)article 内容标签
<article><article/>
(4)section 块级标签
<section><section/>
(5)aside侧边栏标签
<aside><aside/>
(6)footer 尾部标签
<footer><footer/>
audio 音频标签
语法:(1)<audio src="音频路径" controls="controls"></audio>
(2)<audio controls="controls">
<source src="media/snow.mp3" type="audio/mpeg" />
<source src="media/snow.ogg" type="audio/ogg" />
您的浏览器不支持播放声音
</audio>
注:不同浏览器支持的格式不同,解决浏览器兼容问题
注:谷歌浏览器必须加静音属性,才能实现自动播放
属性:(1)autoplay="autoplay"
如果出现该属性,则音频在就绪后马上播放。
(2)controls="controls"
如果出现该属性,则向用户显示控件,比如播放按钮。
(3)loop="loop"
如果出现该属性,则每当音频结束时重新开始播放。
(4)preload="preload"
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。
(5)src="路径"
要播放的音频的 URL。
video 视频标签
语法:(1)<video src="音频路径" controls="controls"></video>
(2)<video muted="muted" loop="loop" poster="media/pig.jpg" controls>
<source src="media/video.mp4" type="video/mp4" />
<source src="media/video.ogg" type="video/ogg" />
您的浏览器太low了,不支持播放此视频
</video>
注:不同浏览器支持的格式不同,解决浏览器兼容问题
注:谷歌浏览器必须加静音属性,才能实现自动播放
属性:
(1)autoplay=“autoplay”
视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
(2)controls=“controls”
向用户显示播放控件
(3)loop=“loop”
播放完是否继续播放该视频,循环播放
(4)muted=“muted”
静音播放
(5)preload=“auto”(预先加载视频)
preload=“none”(不预先加载视频)
规定是否预加载视频(如果有了autoplay 就忽略该属性)
(6)poster="文件路径"
加载等待的画面图片
新增input表单
语法:<input type="输入类型">
输入类型:(1)type="email"
限制用户输入必须为Email类型
(2)type="url"
限制用户输入必须为URL类型
(3)type="date"
限制用户输入必须为日期类型
(4)type="time"
限制用户输入必须为时间类型
(5)type="month"
限制用户输入必须为月类型
(6)type="week"
限制用户输入必须为周类型
(7)type="number"
限制用户输入必须为数字类型
(8)type="tel"
手机号码
(9)type="search"
搜索框
(10)type="color"
生成一个颜色选择表单
表单属性:(1)required
=“required
”
表单拥有该属性表示其内容不能为空,必填
(2)placeholder="提示文字"
表单的提示信息,存在默认值将不显示
(3)autofocus=“autofocus”
输入光标自动聚焦到指定输入框
(4)autocomplete=”on “ (默认)打开
autocomplete =”off” 关闭
当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中曾经已填写的选项
(5)disabled="disibled"
使按钮不能点击
属性选择器
语法:(1)div[att] 选择具有att属性的div元素
(2)div[class="val"] 选择具有class属性且属性值等于val的div元素
(3)div[class^="val"] 匹配具有class属性,且属性值为val开头div元素
(4)div[class$=''val''] 匹配具有class属性,且属性值为val结尾div元素
(5)div[class*=''val''] 匹配具有class属性,且属性值中含有val结尾div元素
结构伪类选择器
语法:(1) ul li:first-child
选择ul里第一个li
(2)ul li:last-child
选择ul里最后一个li
(3)ul li:nth-child(6)
选择ul里第6个li
ul li:nth-child(even)
选择ul里偶数的li标签
ul li:nth-child(odd)
选择ul里奇数的li标签
ul li:nth-child(2n)
选择ul里2*n的li标签,也可以(3n)(4n).... n从0开始计算,2n相当于选择偶数
ul li:nth-child(n+5)
选择ul里从第5个开始后的所有li,包含第五个
ul li:nth-child(-n+5)
选择ul里第5个li前的所有li,包含第五个
注::nth-child(n) 选择父元素里的第n个孩子,不管是否是同一种类型
(4)div span:first-of-type
选择div里第一个span
(5)div span:last-of-type
选择div里最后一个span
(6)div span:nth-of-type(2)
选择div里第2个span,也可以(3)(4)......
伪元素选择器
语法:(1)div::before {content:"内容"}
在div里的内容前添加一个内容
(2)div::after {content:"内容"}
在div里的内容后添加一个内容
注:1.必须有content属性,但可以为空内容
2.before和after会创建一个行内元素,可以通过display转为行内块
二。2D转换(变换)transform(移动,旋转,缩放)
(移动)语法:(1)transform:translate(x,y)
连写
(2)transform:translateX(100px)
向x轴移动100px,X为大写
(3)transform:translateY(100px)
向y轴移动100px,Y为大写
注:1.X,Y为大写
2.translate类似定位,不会影响到其他元素的位置
3.transform:translateX(50%),表示向x轴移动自身宽度的一半
4.对行内标签没有效果
让盒子垂直居中,水平居中
(1)transform:translate(-50%,-50%)
注:同样要使用子绝父相
(旋转)语法:(1)transform:rotate(度数deg); 顺时针
(2)transform:rotate(-度数deg); 逆时针
注:通常和过渡一起使用
模拟三角:1.使用伪元素添加一个正方形盒子,给正方形只设置两个边框
2.定位到指定位置
3.旋转45度
转换中心点 transform-origin
语法:(1)transform-origin:left top;等
注:1.可以是方位名词
(2)transform-origin:x y;例:transform-origin:50px 50px;
注:2.可以是像素值
(3)transform-origin:0; 只写一个值的时候 第二个值默认为 50%;
2d缩放 scale
语法:转换的属性值为 scale(宽的倍数,高的倍数) ;
(1)transform-scale(2,2);或transform-scale(2);
注:修改了宽高为原来的2倍
(2)transform-scale(.5,.5);或transform-scale(.5);
注:缩小了1倍
2D旋转综合写法
语法:transform:translate()rotate(度数deg) scale(.5,.5);
注:1.顺序.位移,旋转,缩放
2.顺序不能变更,有位移及其他属性时,位移必须最前面
动画
语法: /* 我们想页面一打开,一个盒子就从左边走到右边 */
/* 1. 定义动画 */
@keyframes 名称 {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用(使用)动画 */
/* 动画名称 */
animation-name: 名称;
/* 持续时间 */
animation-duration: 2s;
}
注:必须属性:动画名称,动画执行时间
常用属性:1. 动画名
设置要使用的动画名 animation-name:xxx;
2. 持续时间
设置动画播放的持续时间 animation-duration:3s
;
3. 速度曲线
和设置过渡的速度曲线一样 animation-timing-function:linear;
linear: 匀速
ease: 慢-快-慢 (逐渐慢下来) 默认值
ease-in: 慢-快。
(加速)
ease-out: 快-慢。(减速)
ease-in-out: 慢-快-慢。(先加速后减速)
steps(2) 设置分几步完成动画效果
4. 延迟时间
animation-delay: 0s; 默认是0
5. 循环次数
设置动画播放的循环次数 animation-iteration-count: 2;
infinite 为无限循环
6. 循环方向
animation-direction
:normal;
1. normal 默认值 ,正向运行
2. reverse 反向运行
3. alternate 正-反-正...
(倒车)
4. alternate-reverse 反-正-反..
5. 以上与循环次数有关
7. 动画结束状态:
animation-fill-mode 设置动画在等待或者结束的时候的状态
forwards:动画结束后,元素样式停留在 100% 的样式
backwards: 在延迟等待的时间内,元素样式停留在 0% 的样式
(默认)
both: 同时设置了 forwards和backwards两个属性值
注:有了无限播放就不要结束状态
8. 暂停和播放
animation-play-state 控制 播放 还是 暂停
running 播放
paused 暂停
注:一般鼠标悬停(hover)时使用此属性
动画简写
语法:animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
注:1.前两个属性必须写,暂停动画不在简写里
2.给同一个盒子加两个动画,中间用逗号隔开animation: name duration,name duration;
3D transform:translate3d
语法:
移动:
1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
(简写)
2. translform:translateX(100px) 仅仅是移动在x轴上移动
3. translform:translateY(100px) 仅仅是移动在Y轴上移动
4. translform:translateZ(100px) 仅仅是移动在Z轴上移动
(一般用px为单位)
注:1.xyz不能省略,没有的用0表示
2.z轴是垂直屏幕的方向,到眼睛的方向是正值
旋转:1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度 了解即可
注:1.x轴旋转时正值为往后倒,负值往前倒。(耍单杠)
2.y轴旋转时正值为往右转,负值往左转。(钢管舞)
3.z轴旋转时正值为往右转,负值往左转。(抽奖转盘)
透视 perspertive:100px;
注:1.给需要呈现3d效果的父盒子添加这个值
2.使用3d时必须设置这个值
3d呈现 transform-style
transform-style: flat; 平面模式,不开启3维立体环境
transform-style: preserve-3d; 3维立体环境
注: 代码写给父级,但是影响的是子盒子
过渡transition
语法:1.transition-duration 定义过渡效果花费的时间。默认是 0。
2.transition-property 规定应用过渡的 CSS 属性的名称。
3.transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
4.transition-delay 规定过渡效果何时开始。默认是 0。
简写:transition: 要过渡的属性 花费时间 运动曲线 何时开始;
例:transition: all (全部属性) 1s(运动完成所需时间) linear(匀速) 1s(延迟1秒运动);
常用:transition: all 1s;
属性值:运动曲线: linear: 匀速
ease: 慢-快-慢 (逐渐慢下来) 默认值
ease-in: 慢-快。
(加速)
ease-out: 快-慢。(减速)
ease-in-out: 慢-快-慢。(先加速后减速)
旋转木马案例
注:1.先放6张图片在同一位置,每张图片沿y轴转60度,依次度数变大60度,并沿z轴前移300px。
css3兼容处理
- 谷歌 -webkit
-
火狐 -moz
-
IE -ms
-
欧朋-o-
注:如对 border-radius 进行兼容性处理
-webkit-border-radius: 30px 10px;
-moz-border-radius: 30px 10px;
-ms-border-radius: 30px 10px;
border-radius 一定要放在最后
border-radius: 30px 10px;
如果发现添加前缀也解决不了兼容性问题,那么就不要使用该css3属性
三。 理想视口 ideal viewport
语法:<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
属性:1.
背景缩放background-size
语法: background-size: 图片的宽度 图片的高度;
注:1.background-size: 500px; 只写一个参数 肯定是宽度 高度省略了 会等比例缩放
2.background-size: 50%; 里面的单位可以跟% 相对于父盒子来说的
3. background-size: cover; cover 等比例拉伸 要完全覆盖div盒子 可能有部分背景图片显示不全
4. background-size: contain; 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域
CSS3盒子模型box-sizin
语法:box-sizing: border-box;
注:1.移动端使用,加到盒子的css中去
2.好处:padding和border不会撑大盒子,设置百分比时会将边框和外边距也算在内
移动端特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
/*禁用横向滚动条*/
overflow-x: hidden;
移动端常见布局(注:固定的盒子必须有宽度)
1. 流式布局(百分比布局)
语法:width:100%; 100%代表为浏览器显示的宽度
注:max-width 最大宽度 (max-height 最大高度)
min-width 最小宽度 (min-height 最小高度)
设置浏览器拉伸时最大和最小的显示宽度和高度,也就是让他不能无限放大或缩小
2. flex 弹性布局(强烈推荐)
语法:display:flex;(必须添加这个属性才能设置其他属性)
注:给父元素添加display:flex;属性来控制子盒子的位置和排列方式。
父项常见属性
1. 设置主轴的方向:
语法:flex-direction:;
属性值:1.flex-direction: row; (默认,从左往右)
2.flex-direction:row-reverse ;(从右到左)
3.flex-direction: column; (从上到下)
4.flex-direction:column-reverse;(从下到上)
注:1.水平轴的默认方向是:水平向右,
垂直轴的默认方向是:垂直向下
2.设置父盒子内子盒子的排列方式,加给父盒子。
2.设置子盒子在主轴上的排列方式(也就是让盒子在大盒子里居中,靠下,还是靠上)
语法:justify-content:flex-start;
属性值:1.justify-content:flex-start; (默认,从头部开始,主轴是x轴则从左到右,主轴是y轴则从上到下)
2.justify-content: flex-end;(从尾部开始排列)
3.justify-content: center;(在主轴上居中)
4. justify-content: space-around;(平分剩余空间)
5.justify-content: space-between;(两边的子元素贴边,中间的平分剩下的空间)
注:1.要注意主轴的方向。
3.设置是否换行(设置子盒子满了是否换行)
语法:flex-wrap:nowrap;(默认,不换行)
属性值:1.flex-wrap:nowrap;(默认,不换行)
2.flex-wrap:wrap; (换行)
注:默认子元素不会换行,显示不下时会改变子盒子的大小
4.设置侧轴上的子元素排列方式(单行 )y轴
语法:align-items: ;
属性值:flex-start 从头部开始
flex-end 从尾部开始
center 居中显示
stretch 拉伸
注:1.拉伸时需要没有高度。
2.子盒子只有单行时使用。
5.设置侧轴上的子元素的排列方式(多行)y轴
语法:align-content:;
属性值:flex-start (默认,在侧轴的头部开始排列)
center(在侧轴中间显示)
space-between(在侧轴两边的子元素贴边,中间的平分剩下的空间)
space-around(在侧轴平分剩余空间)
flex-end(在侧轴尾部开始排列)
stretch(设置侧轴上子盒子平分父盒子的高度)
注:1.仅限子盒子有换行(多行)时使用
小简写: flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
语法:flex-flow:row wrap;
flex-flow:主轴方向 是否换行;
子项常见属性
1. flex 属性(放大当前元素的宽度,用来设置某个盒子占剩余空间的比例值)
语法:flex: 0;(默认值0)
flex:20%;
注:1.谁设置了谁就占。
2.不能直接设置0,可以不写。
3.可以写百分比,相对于父亲的宽度。
2.控制子项自己在侧轴上的排列方式
语法:align-self:;
属性值:flex-start 从头部开始
flex-end 从尾部开始
center 居中显示
注:1.控制某一个子盒子的排列顺序
2.相当于某一个子盒子需要单独设置排列位置时使用(靠上,靠下,居中......)
3.order 属性定义盒子的排列顺序(相当于第3个可以变到第一个)
语法:order: 0; (默认是0,负值小)
注:越小越靠前。值为负
背景线性渐变
语法:background: linear-gradient(起始方向,?颜色1,?颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);(从左往右)
background: -webkit-linear-gradient(left top, red , blue);(左上往右下)
注:1.背景渐变必须添加浏览器私有前缀
2.起始方向可以是: 方位名词 或者 度数 , 如果省略默认就是 top
3.
less+rem+媒体查询布局
1.媒体查询语法规范
语法: @media screen(查询类型) and(关键词) (max-width: 800px)(媒体特性:小于等于800时) {
body {
background-color: pink;
}
}
注:1. 这句话的意思就是: 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式
2.从小往大写或从大往小写
查询类型
属性值:1.all(用于所有设备)
2.print (用于打印机和打印预览)
*3.scree (用于电脑屏幕,平板电脑,手机等)
关键词
属性值:*1.and:可以将多个媒体特性连接到一起,相当于“且”的意思。
2.not:排除某个媒体类型,相当于“非”的意思,可以省略。
3.only:指定某个特定的媒体类型,可以省略。
媒体特性
属性值:1.width :定义输出设备中页面可见区域的宽度
2.min-width :定义输出设备中页面最小可见区域的宽度(大于设定的值时改变样式)
3.max-width :定义输出设备中页面最大可见区域的宽度(小于设定的值时改变样式)
混合布局
|
|