HTML5

第一课

HTTP(超文本传输协议)(Hyper Text Transfer Protocol
HTTPS:Hyper Text Transfer Protocol Over
***HTML5概述 ***
HTML:超文本标记语言(Hyper Text Markup Language),用来描述网页的一种语言。
超文本:
1.包含了文字.图片.音/视频等,超越文本限制。
2.从一个文件链接另一个文件,超级链接文本。
***1.HTML5概述 ***
1.HTML不是编程语言,而是一种标记语言。
2.标记语言是一种标记标签。
3.HTML使用标记标签来描述网页。
4.HTML文档也叫做wed页面。
HTML5文档结构

:document type;声明文档类型

<!html>标签是HTML页面的根元素
<!head>标签是网页头部标签,定义元数据等。
<!title>标签定义的文档标题。中必须要有的。

标签定义的文档主题。 **

第二课

**
1HTML5标签定义及属性 ***
标签:放在"<>"中表示某个功能的编码命令,也称为
元素
*,标记
双标签:<开始标签>标签内容</结束标签>。例<title>....</title单标签:也叫空标签<标签名/>。例<br>(<br/>),<hr>(<hr/>)
注释标签:<!…注释语句…>。
***1HTML5标签定义及属性 ***
属性:
为HTML提供的附加信息,一边描述于开始标签。
<p id="pName"style="font-size=20px;">标签内容</p> id="标签的名字(不能重复)"
style=“规定元素的行内样式

~~双标签~~ ***
(<p></p>):段落标签,为双标签
<em></em>(斜体标签)
着重显示:<strong></strong>.

 <head>
 <title>网页标题<title>
 </head>
 <body>
 <p>段落标签</p>
 <h1>一级标签</h1>
 <em>斜体显示</em>
 <strong>加粗显示</strong>
 <br>换行标签
 

***1-6级标签 ***
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
***单标签 ***
单标签:<br>(换行标签)

第三课

图片插入格式<img src=“img/xxx.png” width=“100px”/ height=“100px”/>
imgwidth:设置图片宽度
height:设置图片高度
是图片标签,单标签
src属性:指向图片的地址
<a href="#"></a>(为链接标签)
href属性:指向链接地址
列表:有序,无序
有序列表:<ol><li></li></ol>·(打出来网页有序号的)
无序列表:<ul><li></li></ul>unorder line(打出来网页没序号的 要的话需要在文本里加)

表单标签

1.表单域<form>表单域内的信息提交给服务器。
2.表单标签;<input/><select></select><textarea></textarea>文本域。
3.提示信息。
4.形式:<form>
昵称:<input type="text" /><br />
密码:<input type="password" /><br />
性别:<input type="radio" name="sex" />男<input type="radio" name="sex" /><br>
爱好:<input type="checkbox" />看电影<input type="checkbox" />篮球<input type="checkbox" />游戏
<input type="button" value="提交" />
<input type="reset" />
<input type="submit" />
<form/>
5.密码输入:password
6.radio:实现二选一,name必须一致
7.checkbox:多选框,实现多选
8.submit:把内容提交到服务器
9.button:按钮 点击之后产生的效果
10.reset:重置按钮
11.<select></select>:下拉列表
12.<option></option>:下拉选项
13.<textarea></textarea>:文本域,输入多数文本

**

表格标签

**
<table>

<thead>
<tr>
<th>名称</th>
<th>净流入</th>
<th>流入最大股东</th>
</tr>
</thead>
<tbody>
<tr>
<td>电子元件</td>
<td>57.07亿</td>
<td>阿里巴巴</td>
</tr>
</tbody>

</table>

1.

:表格标签
2.:表头部分
3.:单元格文本部分(身体)
4.:table row 表格的行

:表头写数据的单元格 :单元格文本部分写数据的单元格
<th>和<td>的不同是<th>是表头部分的单元格字体打适合标题部分
而<td>字体中等适合写文本数据。

DIV

1.div没有含义
2.div单独占一行(就是和"块"差不多)
3.div用于存放其他标签元素
4.div用于布局网页
熊永贵 11:24:35

第一课

HTTP(超文本传输协议)(Hyper Text Transfer Protocol
HTTPS:Hyper Text Transfer Protocol Over
***HTML5概述 ***
HTML:超文本标记语言(Hyper Text Markup Language),用来描述网页的一种语言。
超文本:
1.包含了文字.图片.音/视频等,超越文本限制。
2.从一个文件链接另一个文件,超级链接文本。
***1.HTML5概述 ***
1.HTML不是编程语言,而是一种标记语言。
2.标记语言是一种标记标签。
3.HTML使用标记标签来描述网页。
4.HTML文档也叫做wed页面。
HTML5文档结构

:document type;声明文档类型

<!html>标签是HTML页面的根元素
<!head>标签是网页头部标签,定义元数据等。
<!title>标签定义的文档标题。中必须要有的。

标签定义的文档主题。 **

第二课

**
1HTML5标签定义及属性 ***
标签:放在"<>"中表示某个功能的编码命令,也称为
元素
*,标记
双标签:<开始标签>标签内容</结束标签>。例<title>....</title单标签:也叫空标签<标签名/>。例<br>(<br/>),<hr>(<hr/>)
注释标签:<!…注释语句…>。
***1HTML5标签定义及属性 ***
属性:
为HTML提供的附加信息,一边描述于开始标签。
<p id="pName"style="font-size=20px;">标签内容</p> id="标签的名字(不能重复)"
style=“规定元素的行内样式

~~双标签~~ ***
(<p></p>):段落标签,为双标签
<em></em>(斜体标签)
着重显示:<strong><>加粗.

 <head>
 <title>网页标题<title>
 </head>
 <body>
 <p>段落标签</p>
 <h1>一级标签</h1>
 <em>斜体显示</em>
 <strong>加粗显示<>
 <br>换行标签
 

***1-6级标签 ***
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
***单标签 ***
单标签:<br>(换行标签)

第三课

图片插入格式<img src=“imgx.png” width=“100px”/ height=“100px”/>
imgwidth:设置图片宽度
height:设置图片高度
是图片标签,单标签
src属性:指向图片的地址
<a href="#"></a>(为链接标签)
href属性:指向链接地址
列表:有序,无序
有序列表:<ol><li><></ol>·(打出来网页有序号的)
无序列表:<ul><li><></ul>unorder line(打出来网页没序号的 要的话需要在文本里加)

表单标签

1.表单域<form>表单域内的信息提交给服务器。
2.表单标签;<input/><select><lect><textarea></textarea>文本域。
3.提示信息。
4.形式:<form>
昵称:<input type="text" /><br />
密码:<input type="password" /><br />
性别:<input type="radio" name="x" />男
<input type="radio" name="x" /><br>
爱好:<input type="checkbox" />看电影<input type="checkbox" />篮球<input type="checkbox" />游戏
按钮:<input type="button" value="文本框任意输入"/>
<input type="reset" value="文本框任意输入"/>
<input type="submit" value="文本框任意输入"/>
下拉列表: <select> <option>总经理</option> <option>经理</option> <option>组长</option> <option>员工</option> <lect>


提交意见:<textarea></textarea>
<form/>
5.昵称框:text
6.密码框:password
7.radio:多选一框(有几个选项就写几个radio但只能选一个),name的文本必须一致 name(和id差不多)
8.checkbox:多选框(有几个选项就写几个checkbox,任意选择),实现多选
9.普通按钮:button (点击之后产生动作)
重置按钮:reset (重置按钮 默认文本为重置)
提交按钮:submit (把内容提交到服务器 默认文本为提交)
更改文本: value (更改按钮内的文本)
10.下拉列表:<select><lect>
下拉选项:<option></option>
11.<textarea></textarea>(主要是一大堆文本,就是结尾那些 意见反馈或者建议 啥的。)

表格标签

<table>

<thead>
   <tr>
      <th>名称</th>
      <th>净流入</th>
     <th>流入最大股东</th>   
   </tr>
</thead>
<tbody>
   <tr>
       <td>电子元件</td>
       <td>57.07亿</td>
       <td>阿里巴巴</td>
</tr>
</tbody>

</table>

1.<table></table>:表格标签
2.<thead></thead>:表头部分
3.<tbody></tbody>:单元格文本部分(身体)
4.<tr></tr>:table row 表格的行

<th></th>:表头写数据的单元格
<td></td>:单元格文本部分写数据的单元格

<th>和<td>的不同是<th>是表头部分的单元格字体打适合标题部分
而<td>字体中等适合写文本数据。

DIV

1.div没有含义
2.div单独占一行(就是和"块"差不多)
3.div用于存放其他标签元素
4.div用于布局网

1.1Web标准的构成

1.HTML:结构类似身体。
2.CSS:表现类似外观装饰。
3.JavaScript:行为类似动作。

简单理解:结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中。

1.2 CSS 定义

CSS:层叠样式表(Cascading Style Sheets)也叫CSS样式表级联式表
(用来设置HTML页面中的文本内容丶图片的外形丶以及版面的布局和外观显示样式。)

1.内联样式:用标签内加style实现。
2.内部样式:用style标签来实现。
<style> 选择器{ 属性:值; 属性:值; ...... } </style>
3.外部样式:
第一步:在css文件夹下新建.css 文件,写样式。
第二步:在head里用<link/>引用。
href:链接.css文件路径
加上rel=“stylesheet”

同时用听谁的?:
内部样式和外部样式听谁的?
谁在后面听谁的!意思是网站是从上往下“读”的他先“读”了上面的那个
然后继续往下,到下面了又“读”下面那个所以就用下面那个样式。
如果有内联样式就直接听他的,因为他是最下面的了(直接就在标签里
)。

总结:
内联样式:
优点:书写方便,权重高
缺点:结构,样式混写
使用情况:较少
控制范围:控制一个标签
内部样式:
优点:部分结构和样式相分离
缺点:没有彻底分离
使用情况:较多
控制范围:控制一个页面
外部样式:
优点:完全实现结构和样式相分离
缺点:需要引入
使用情况:吐血推荐
控制范围:控制多个页面

熊永贵 11:24:54

1.1Web标准的构成

1.HTML:结构类似身体。
2.CSS:表现类似外观装饰。
3.JavaScript:行为类似动作。

简单理解:结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中。

1.2 CSS 定义

CSS:层叠样式表(Cascading Style Sheets)也叫CSS样式表级联式表
(用来设置HTML页面中的文本内容丶图片的外形丶以及版面的布局和外观显示样式。)

1.内联样式:用标签内加style实现。
2.内部样式:用style标签来实现。
<style> 选择器{ 属性:值; 属性:值; ...... } </style>
3.外部样式:
第一步:在css文件夹下新建.css 文件,写样式。
第二步:在head里用<link/>引用。
href:链接.css文件路径
加上rel=“stylesheet”

同时用听谁的?:
内部样式和外部样式听谁的?
谁在后面听谁的!意思是网站是从上往下“读”的他先“读”了上面的那个
然后继续往下,到下面了又“读”下面那个所以就用下面那个样式。
如果有内联样式就直接听他的,因为他是最下面的了(直接就在标签里
)。

总结:
内联样式:
优点:书写方便,权重高
缺点:结构,样式混写
使用情况:较少
控制范围:控制一个标签
内部样式:
优点:部分结构和样式相分离
缺点:没有彻底分离
使用情况:较多
控制范围:控制一个页面
外部样式:
优点:完全实现结构和样式相分离
缺点:需要引入

标签选择器

1.标签选择器:可以选择出所有相同的标签。
特点:不能差异化选择
div{color:green;}

类选择器

类选择器:可以选出一个或者多个标签。
特点:根据需求选择
HTML文件中:<p class=“nav”>类选择器</p>
css文件中:.nav{
color:red;}
样式点定义
结构类调用·
一个或者多个
开发最常用
**

ID选择器

**
ID选择器:一次只能选择一个标签。
特点:每个HTML文档中的ID是唯一的,只出现一次。
HTML文件中:<p id=“nav”>ID选择器</p>
css文件中:#nav{
color:red;}
样式#号定义
结构ID调用
只能调一次
别人勿使用


4.1盒子模型的组成


1.盒子模型:把HTML页面中的布局元素看作是一个矩形的盒子,即一个盛装内容的容器。他包括:边框border、外边距margin、
内边距padding和内容content。
2.边框:border:边框的粗细,边框的颜色,边框的样式;solid:实线,dashed:虚线,dotted:点线边框
样子:border: (像素大小)( 颜色)(选取边框 实线、虚线、点线)
3.内边距: 上、右、下、左:顺时针
三个值:第一个是上边距,第二个是左右边距,第三个是下边距
两个值:第一个是上下边距,第二个是左右边距

**

盒子模型:

**
1.一个值:上下左右
2.两个值:上下,左右
3.三个值:上,左右,下
4.四个值:上下左右
5.(*)星号表示:初始化网页元素:网页中所有元素的内外边距都为0px。
*{margin:0;padding:0;}
6.盒子水平居中:左右外边距设置为auto(自动),前提条件:有width
7.快速建盒代码:.box¥{box¥}*n,n表示个数
8.给相邻的两个盒子都设置margin,垂直方向取两者之间的最大值
9.塌陷:嵌套的两个盒子都设置了margin,取垂直方向的外边距最大值
10.塌陷的解决方法:(1)给父元素加border(2)给父元素加overflow:hidden;overflow(溢出),hidden(隐藏)
11.合并的解决方式;只给一个盒子外边距
**

块级元素:

**
1.独占一行
2.可以设置width/height
3.默认width是父级元素宽度的100%
4.块级元素里可以放块级元素和行内元素
行内元素:
1.一行可以显示多个
2.width/height设置无效
3.width默认内容的宽度
4.行内元素里只能放文字或其他行内元素

常见的块元素;

1.常见的块元素有:

-

,

,

,
  • ,

  • 文字类的标签内不能使用快元素,比如

    ,

    -

    等标签
    主要用于存放文字,因此标签内不能放块级元素。
    行内元素的特点
    1.常见的行内元素有,,,…
    链接里不能再放标签
    特殊情况链接
    里可以放块级元素,但是给转换一下块级模式最安全
    **

行内块元素:

**
,,,同时具有块元素和行内元素和行内元素的特点
1.一行显示多个,但是两个元素之间有空白间隙;
2.默认宽度是内容本身的宽度
3.width/height可控制

图片对齐属性:align
文字和图片居中对齐:center
top文字显示在图片的顶部
bottom显示在图片的底部

转换为块元素

display:block;
**

转换为行内元素

block:inline;
**

转换为行内块元素

display:inline-block;

1.5清楚浮动

1.额外标签法:也称为隔墙法。
**clear:both;**清楚两侧浮动。both丨left丨right
2.父级添加 overflow:hidden 属性
3.父级添加after 伪元素
4.父级添加双重伪元素(主要为2. 3. 4.)

注:

方法一:overflow:hidden 属性为清楚浮动第一个方法

方法2:父级添加 after 尾元素

.clearfix(类名字随意取):after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
(兼容IE6/7)
.clarfix{
*Zoom:1;
}

方法3:父级添加双尾元素

.clearfix(类名字随意取):before , .clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
***}***(兼容IE6/7)

2.1定位模式

1.relative:相对定位,相对于原文档的位置进行定位。
2.absolute:绝对定位,相对与上一个已经定位的父元素进行定位。
3.fixed:固定定位,相对与浏览器窗口进行的定位。

注:position:指定位的模式
(1)position:relative;
(相对定位的元素移动时的参照点是自己原来的位置。不脱标:继续保留原先的位置,不会脱离标准流。

边偏移:
边偏移属性:值;(单位px)
边偏移属性:
(1)top 顶部偏移量。top:50px;
(2)bottom 底部偏移量。 bottom:50px;
(3)left 左偏移量。 left:50px;
(4)right 右偏移量。 right:50px;

position:absolute;(绝对定位,相对于上一级的父级元素进行定位)
1.绝对定位的元素移动时的参照点是祖先元素的位置。
2.如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位。
3.如果祖先元素有定位(相对、绝对、固定),则以最近一级有定位元素作为参考点。
4脱标:绝对定位不占有原先的位置。
position:static(静态定位,默认定位方式)
position:relative(相对定位,相对于原文档的位置进行定位)
position:fixed(固定定位,相对于浏览器窗口进行定位)

z-index:-1;(值越大,地位越高)
层叠等级属性,用于调整层叠定位元素的堆叠顺序。
取值:可为正数和负数。
默认值为0,取值越大,定位元素在层叠元素中越靠前。


background(背景)


1.background-color:背景颜色;
2.background-image:url(img/xx.jpg);(插入图片)
3.background-repeat:no-repeat;(背景不重复)repeat(重复显示)repeat-x(y)横向、纵向显示
4.background-position:背景图像的位置;例如(left top、left bottom、right top、right bottom)居中(center)
不能重复,否则只显示后面代码
5.background-size:xx%;(图像大小、以百分比显示)
6.background-size:xxpx xxpx;(以像素大小显示)
7.background-attachment:fixed;(网页背景固定)
8.background-origin:背景图像的定位区域;【border-box(从边框开始填满图像)、padding-box(从内边距开始填满图像)、content-box(从内容区域开始填满背景图片)】
9.border: 20px solid rgba(255,0,0,0.2);(透明边框)
10.overflow:scroll;(给div内容添加滚动条)
11.border-top-left-radius:xx;(圆角)
12.action属性:接受数据的服务器地址
13.method属性:数据提交方式get/post(get是默认的提交方式,明文显示)(post:提交方式,不显示)
14.autocomplete属性:自动完成提示on/打开/off/关闭
15.name属性:给表单命名

16.placeholder:输入提示· 17.outline:取消轮廓线 18.autofocuse:自动获取光标 cursor:pointer(讲光标变成手) opacity:0.2(不设置颜色,直接设置透明度) vh(视高) vw(视宽)

加音频设置


src:音频路径
source:源
controls:控制
autoplay:自动播放(受浏览器限制,有些无法播放)
loop:循环播放
muted:静音
preload:auto(自动)metadata(加载元数据)none(不加载)
样式:




隐藏标签:display none(创建样式,写在样式里面)
加视频设置
video:视频
poster:给视频添加封面


委内效果


/hover:鼠标悬浮效果/
/transition://属性/时间/过渡效果/何时开始(过度)/
/transition:background-color 5s;(委内效果延长)/
/transition: all 5s;/
/all(所有的/全部)/
/transition:background-color 0.5s(颜色变化时间), width 5s,height 5s(宽度变化时间) ;/
/ease:默认效果:慢-块-慢;
linear:匀速开始;
ease-in:低速开始;
ease-out:低速结束
/
/transition:width 5s;(盒子的变化时间)/
/translate:(平移)/
/一个值:只位移x轴,在水平方向上移动;(可为负值)
两个值:第一个值位移x轴,第二个值位移y轴,根据自己所给的值进行坐标定位;(可为负值)
translatex()x轴位移
translatey()y轴位移
/(不会影响其他元素的位置,对行内标签没有效果)*/
/transform: translate(100px);/
/transform:转型链接单词/
/scale(n):缩放;
一个值:宽高同时缩放;
两个值:第一个缩宽,第二个缩高
/()
/transform: scale(2,0.5);/
/transform: translate(300px,400px);/
/transform:rotate(45deg);/
/rotate():旋转,注意单位为度数(deg)(可给负值,进行逆时针旋转)(正数时为顺时针旋转)/
/skew():斜切(倾斜),单位是度数deg/
/transform: skew(720deg);(可给负值,进行逆时针旋转)(正数时为顺时针旋转)/

过渡

transition: 过度属性 时间 过渡效果 延迟时间;(格式)
1.transition:background-color 2s;意为用了2秒的时间把盒子的背景颜色改成了伪类的颜色。
2.transition:width 2s;意为2秒的时间吧盒子的宽度改成伪类的宽度。
3.transition:height 2s;意为2秒的时间把盒子的高度改成伪类的宽度。
4.transition:all 2s;意为2秒的时间把盒子所有的属性改成了伪类的属性。(all意为所有的,比较长用)
以上都为transition:属性 时间;没有加过渡效果,就为默认效果:慢-快-慢。
5.过度效果:ease(默认效果:慢-快-慢)、linear(匀速变换)、ease-in(低速开始)、ease-out(低速结束)
6.transition:color 3s linear 1s;后面的1s就是一秒后开始也就是延迟时间
(transition-delay:1s)。
7.常用的:
过度属性:all所有的属性都要变换。
过度时间:单位s 0s可以省略
时间曲线:ease(默认值,慢-快-慢) linear(匀速)
延迟时间:延后多久开始变换 单位s

注:每个盒子只能完成一种过渡写多个系统只执行最后那个过渡效果,只能用逗号隔开(transition:background-color 2s linear,width 3s linear 1s,height 2s;)。

转换(变换)

1.transform属性(转换,变换的意思)
(1)
transform:translate(值,值); [translate为平移(位移)]。
单位px。
一个值:只位移X轴。
两个字:第一个值位移X轴,第二个值位移Y轴。
transform:translteY(值);只位移Y轴(上下)
transform:translteX(值);只位移X轴(左右)(和写一个值的意思一样,第一个比较简便)
不影响其他元素的位置,对行内标签没有效果。
(2)
transform:scale(n,n);[scale为缩放]。
单位为:1、0.5、2 这些
[1为一倍就是不变的意思,2为在原来的基础上变大了两倍,0.5就是在原来的基础上缩小了两倍 (1=100%、2=200%、0.5=50%)]
一个值:宽高同时缩放。
两个值:第一个值缩放宽度,第二个值缩放高度。
transform:scaleX(n,n);只缩放X轴(宽度)
transform:scaleY(n,n);只缩放Y轴(高度)
填负数为翻转效果。X轴就是左右翻转,Y轴就是上下翻转,都有就是上下左右都翻转。
(3)
transform:rotate(值deg);[rotate为旋转,只能写一个值]
单位为deg(度数)
正数:顺时针旋转。
负数:逆时针旋转。
transform:rotateX(值deg);意为沿X轴旋转。
transform:rotateY(值deg);意为沿Y轴旋转。
以上两个代码和不加X或者Y不一样沿X轴和Y轴它是立体的感觉。
注:
更改旋转的圆心:
transform-origin: left center;左中
transform-origin: right center;右中
transform-origin: left top;左上
transform-origin: left bottom;左下
transform-origin:50% 50%;
等等…
转换点:方位词,百分比,数值。
默认值为:transform-origin: center center;中心点

(4)transform:skew(值deg);[skew为斜切,只能写一个值]
单位为deg(度数)
正数:逆时针斜切。
负数:顺时针斜切。

动画 animation!

1.
创建关键帧“
key:钥匙,关键
frames:帧
from:从哪里来,动画开始
to:到哪里去,动画结束

格式:

from和to可以用百分号来取代from=0%,to=100%。所以就可以加入40%、50%等等在动画运行过程中就能先到某个地方,在到终点。
@keyframes donghua(动画名称随便取){
from(0%){
/3s0%=0:动画开始的时间点*/
/动画开始的样式/
transform:translate(0px,0px)rotate(0deg) scale(0.5);
}
50%{
transform:translate(0px,500px);
}
to(100%){
/3s100%=3s:动画结束的时间点*/
/动画开始的样式/
transform:translate(1000px,0px)rotate(780deg) scale(2);
}
}
注:opacity:1;透明度。
border-radius:50%;变圆形。

animation:动画名称 时间 循环次数 速度 动画状态;
infinite为无限循环。
时间曲线:ease(默认值 慢-快-慢),linear(匀速)
动画最后的状态:forwards(保留动画最后的样式 )
回到动画最初的样式:backwards(默认值)
延迟:animation-delay:1s;
格式:animation:donghua 3s 10 linear forwards;(意为运行donghua的关键帧,3秒做完动画,循环次数为10次,匀速,保留动画最后的样式)
这串代码放在图片、背景样式里面。

3D空间

1.认识网页3D坐标
(1)X轴:向右(正),向左(负)
(2)Y轴:向下(正),向上(负)
(3)Z轴:向前(正),向后(负)
2.透视perspective
(1)perspective用来模拟人类的视觉位置,也称为视距,即人的眼睛到屏幕的距离。
(2)perspective的单位(px)。
(3)perspective的值越大,表示视距越远,成像越小,反之。
(4)perspective写在被视察元素的父盒子上!
3.控制元素是否开启3D空间效果
(1)开启:transform-style:preserve-3d;让物体在空间3D呈现。
(2)不开启:transform-style:flat;为默认值也就是2D。
(3)写在父盒子上!
4.3D变形
(1)rotate3d(x,y,z,angle):旋转,xyz的值0或1;
取值1:表示要旋转、取值0:表示不旋转。(布尔)
意思:
rotate3d(1,1,1,angle(度数)):rotatex(angle) rotatey(angle) rotatez(angle)
rotate3d(1,0,1,angle):rotatex(angle) rotatez(angle)
rotate3d(0,0,1,angle):rotatex(0) rotatez(angle)
格式:transform:rotate3d(1,0,1,60deg);
(2)transform:translate3d(x,y,z);位移,单位px。
沿Z轴位移:值越大,离得越近,成像越大。
(3)放大缩小:
transform:scaleX(2);
transform:scaleY(2);
transform:scaleZ(2);

flex布局

1.display:flex;给 父盒子加 就能把父盒子里面的子盒子就能按照flex的布局排列!!!
2.flex-direction:;改变主轴位置的代码。
(1)flex-direction:row;为默认值(左往右)
(2)flex-direction:row-reverse;(右往左)
(3)flex-direction:column;(上往下)
(4)flex-direction:column-reverse;(下往上)
3.justify-content: ;改变主轴布局
(1)justify-content:flex-start;主轴开始位置(为默认值)
(2)justify-content:flex-end;主轴结束位置
(3)justify-content:center;居中于主轴
(4)justify-content:space-between;两端对齐
(5)justify-content:space-around;分散对齐(盒子的左右两边空隙一样,也就是边上的空隙为中间空隙的一半。大概解释 “-为空隙,0为盒子” -0–0--0–0-)
4.align-items改变交叉轴布局(只有一行)
(1)align-items:center;(中间于交叉轴)
(2)align-items:flex-start;(交叉轴开始位置)
(3)align-items:flex-end;(交叉轴结束位置)
5.flex-wrap:;换行代码
(1)flex-wrap:nowrap;不换行(默认值)
(2)flex-wrap:wrap;换行
(3)flex-wrap:wrap-reverse;反向换行
6.align-content:;主要改变多行交叉轴的布局
(1)align-content:flex-start;默认值,从交叉轴开始的位置
(2)align-content:flex-end;从交叉轴的结束位置
(3)align-content:center;从中间位置
(4)align-content:space-around;两端对齐
(5)align-content:space-between;分散对齐
7.flex-grow:存在剩余空间时项目是否变大;
(1)flex-grow:1;子盒子变宽补满主轴上空的地方。
(2)flex-grow:0;默认值不变。
8.flex-shrink:不存在剩余空间时项目是否缩小;
(1)flex-shrink:0;空间不足时子盒子不会缩小
(2)flex-shrink:1;空间不足时子盒子会缩小(默认值)
9.flex-basis:100px;占据主轴空间的大小,主轴为左右的控制盒子的长宽,主轴为上下就控制盒子的高。
(1)flex-basis:auto;为默认值
10.order:0;
可以给flex项目排序:
负值:靠前
正数:靠后
0:不变(默认值)
0:不变(默认值)

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页