一. HTML5介绍
html5潮流趋势,出现很多新的标签,动画功能更强大了,表单验证功能变强大--减轻了服务器的压力.
W3C标准包括: 结构, 表现, 行为.
二.单词总结
1.head 头
2.body 身体
3.title 标题
4.width 宽度
5.height 高度
6.align 水平居中
7.left 左
8.center 居中
9.right 右
10.href 引用
11.target 目标
12.font 文字
13.color 颜色
14.red 红色
15.green 绿色
16.blue 蓝色
17.size 尺寸(大小)
二. 网页基本结构
<html> ---主要框架
<head> ---网页头部
<title>百度一下</title> ---网页标题
</head>
<body> ---网页身体
</body>
</html>
注意:标签一般会用尖括号包着字母去表达,大量的标签构成了整个网页,多个网页构成一个完整的网站.
2.标签通常是成对出现,例如<a></a>,也会有单标签, 例如图片标签 <img/>,成对标签在书写时成对输入.
3.书写规范:要有缩进,tab可以缩进代码.一般网页代码是纯小写.
三. 记事本创建网页
步骤:
1.桌面新建记事本文件
2.输入基本的网页结构和代码
3.文件---保存----关闭记事本文件
4.将记事本文件右键---重命名: 例如百度.html ---后缀名一定要更改.
四. 使用HbuildX创建项目
1. 在D盘创建一个html文件夹
2. 打开软件 -->视图-->项目管理器
3. 界面左侧项目管理器空白处右键-->导入-->本地-->找到html文件夹
4. 建议html项目文件夹右键-->创建子目录ch01-->ch01文件夹右键创建html文件-->输入名称确定
五. 常用标签
1.段落标签 <p></p>
成对出现,有换行效果,每段之间会有空行
2.换行标签 <br/>
单标签 ,只有换行效果
区别:段落标签有空行,换行没有空行
3.标题标签 h1~h6
<h1></h1> 一级标签 一级最大
.....
<h6></h6> 六级标签 六级最小
作用: 制作标题使用. 特点: 加粗,独占一行.
4.水平线标签 <hr/>
出现一根水平线
可以通过属性控制长短.
<hr 属性名="值"/>
例如:<hr width="30%" align="left"/>
1)属性:属性可以用来控制标签,修改属性可以改变标签默认的效果
2)width 宽度 单位可以是px像素,还可以用%表示整个页面的百分比宽度,默认值是100%
3)align 水平对齐方式, 值:left 左对齐, center 居中, right 右对齐
4. 加粗 <strong></strong>
5. 倾斜 <em></em>
6. 特殊字符
1) © 版权符号
2) 空格
3) < 小于号 <
4) > 大于号 >
5) " 引号
注释: <!-- 注释内容 --> 快捷键: ctrl+shift+?
7.图片标签 <img/>
单标签,可以插入图片
<img src="图片路径" alt="图片替代文字" title="鼠标悬浮时显示的文字" width="宽度" height="高度"/>
属性解释:
1)src:图片路径,可以是绝对路径,也可以是相对路径
绝对路径:通常指在某个盘符下的某个文件夹内 D:\live\壁纸\17.jpg
相对地址:相对于我的网页文件的位置写路径 相对于网页案例3 平级的文件夹名要写 image\14.jpg
2)alt:图片替代文字
例如有的网站图片过时被删除,则会提示"该图片已被删除"
3)width:单位px像素,也可以百分比
一般设置像素为单位,设置宽度以后,高度会自动等比例缩放,无需设置.
举例:<img src="image\14.jpg" alt="该图片已被删除" title="美国短毛猫" width="200px" />
表示插入了小猫图片,悬浮时显示美国短毛猫文字,宽度200px
8.超链接 <a></a>
<a href="链接地址" target="目标窗口打开位置"></a>
1)href: 地址可以是#,表示空链接 ,页面地址或网址 例如https:\\www.baidu.com\(完整的网页地址)
2)target:新的页面打开位置, 值: _self 当前页面(默认值,自身页面) _blank :新的窗口打开
举例:<a href="https:\\www.baidu.com\" target="_blank">百度一下</a>
表示链接到百度主页,单击百度一下文字后,百度主页会在新的窗口打开
拓展:改变字体颜色
<font size="字体大小" color="字体颜色"></font>
介绍:查询网页信息和单词的网站:https://www.w3school.com.cn/h.asp
四. 超链接分类
1.页面间的连接
<a href="https://www.baidu.com">百度一下</a>
2. 锚链接 单击热点文字就会跳转标记位置
第一步: 在乙位置(目的地)创建锚标记 <a name="锚标记名称">社会活动内容</a>
第二步: 在甲位置(单击文字)创建跳转链接 <a href="#锚标记名称">单击文字</a>
3. 功能性链接
联系我们: 单击后实现功能---给网址开发人员发送邮件.
<a href="mailto:206878123@qq.com">联系我们</a>
五. ★ ★ ★ ★ ★块元素和行内元素的区别?
块元素: 无论内容多少, 独占一行. 可以设置宽度高度. 例如 p h1~h6 div ul li
行内元素: 内容撑开宽度, 行内元素的左右可以排在一行. 例如 a strong em span img
一. 列表
1. 无序列表
<ul>
<li></li>
<li></li>
</ul>
无序特性: 1)列表项没有顺序, 每个列表项li独占一行.
2)默认列表项前有实心圆点. (可以设置的)
3)一般用于无序的列表, 例如侧边栏导航, 有规律的图文组合
2. 有序列表
<ol>
<li></li>
<li></li>
</ol>
有序特性: 1)列表项有顺序, 每个列表项li独占一行
2)默认列表项前有数字
3)一般用于有序的列表, 例如问卷调查, 试卷等
3.定义列表
<dl>
<dt>定义列表的标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
定义特性:1)列表项没有顺序, 每个dt和dd都独占一行, dt是标题,dd是列表项
2)默认列表项没有符号, 列表项有缩进效果
3)一般用于一个标题下有多个列表项, 例如页尾链接到其他网站友情连接.
二. 表格
网页中离不开表格, 统计信息, 例如某宝尺码表
语法:
<table> ----表格框架
<tr> ----行
<td></td> ----单元格
<td></td>
<td></td>
</tr>
</table>
1. colspan合并列: 把多个列合并为1个
在需要合并的列的第一个单元格内写 <td colspan="合并单元格的数量"> ------ 删除多余的空td
2. rowspan合并行:把多行合并为1行
在需要合并的行的第一个单元格内写 <td rowspan="合并的数量"> ------ 删除多余的空td
3. 居中对齐
水平对齐方式: align ="值"
取值: left 左对齐, center 居中对齐, right 右对齐
1)表格的对齐 <table align = "center"> 指表格居中于整个页面
2)行的对齐 <tr align = "center"> 指这一行的所有内容居中
3)单元格的对齐 指这一个单元格内容居中
4. 表格边框
<table border="1">
5. 背景色
可以设置table, tr, td 设置哪个标签,哪个就有背景色
<table bgcolor="red"> 整个表格就是红色
6. 单元格与单元格之间的间距 cellspacing
只能设置table
<table cellspacing="0"> 就变成了一根实线了
7. 单元格内边距 cellpadding
指的内容和单元格边框的距离
<table cellspacing="3"> 内边距变成3
三. 插入视频和音频
1.插入视频 video
<video src="video/vedio.mp4" controls autoplay></video>
视频兼容性: IE 谷歌 safari 支持.mp4, 火狐和Opera不支持mp4,支持.webm
为了保证各种浏览器能够正常浏览视频, 则需要多个不同格式的资源
<video autoplay>
<source src="video/vedio.mp4" >
<source src="video/vedio.webm" >
</video>
2.插入音频 audio
<audio src="audio/凉凉.mp3" controls autoplay></audio>
视频兼容性: IE 谷歌 safari 支持.mp3, 火狐和Opera不支持mp3,支持.wav
四. 结构化元素
header 标题头部区域的内容（用于页面或页面头部区域）
section 身体区域中间的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
五. 内联框架
第一步: 设置框架
<iframe name="框架名" src="默认显示的页面路径"></iframe>
第二步: 设置跳转链接
<a href="链接的页面地址(在框架内显示的页面地址)" target="框架名"></a>
一. 表单
语法: < form method="提交方式" action="提交地址"></form>
总结: post方式提交的数据安全性要明显高于get方式提交的数据。get方式会在地址栏显示拼接的参数, post不会. 因此在实际开发中通常采用post方式提交表单数据。
二.常用表单元素
语法: <input type="表单类型" name="表单名称"/>
value 初始值, 单选框radio和复选框checkbox必须的.
size:尺寸, 文本框text和密码框可以
maxlength:最大长度. 例如文本框设置最大字符数
checked:被选中的, 例如单选框和复选框, 默认某个值被选中
1. 文本框 text
<input type="text" name="username"/>
2. 密码框 password
<input type="password" name="pwd"/>
3. 单选框 radio
<input type="radio" name="sex" value="nan"/> 注意如果一组单选按钮, name必须相同,才能实现单选效果.
4. 复选框 checkbox
<input type="radio" name="aihao" value="youyong"/> 注意如果一组复选按钮, name和value是必要属性,name是必须相同,才能实现复选效果.
5. 列表框(下拉框) select
<select name="year">
<option value="1990" selected>1990</option>
</select>
注意: name和value属性是必须的, 如果表示默认被选中 selected
6. 按钮
分类: 提交按钮submit 重置按钮 reset 普通按钮 button 图片按钮 image
<input type="image" src="图片地址" name="login">
7. 文本域 textarea
<textarea name="ziwojieshao" cols="列" rows="行">
<textarea name="jieshao" cols="30" rows="3"> --表示一行显示30个字符, 显示3行.
8. 文件域 file
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="upload">
</form>
注意: 表单编码必须写 enctype="multipart/form-data"
9. 邮箱 email
<input type="email" name="email">
邮箱表单元素会自带邮箱验证功能,如果输入的邮箱没有@ 和 . 会报错,无法提交
10. 网址 url
<input type="url" name="address">
网址表单元素会验证输入的网址格式是否正确, 必须有https://
11. 数字 number
<input type="number" name="kucun" max="最大允许值" min="最小允许值" step="合法的数字间隔">
12. 滑块 range
<input type="range" name="kucun" max="最大允许值" min="最小允许值" step="合法的数字间隔">
13. 搜索 search
<input type="search" name="address"> 比文本框多一个清空效果
四. 表单高级应用
1.隐藏域 hidden
浏览器中看不到, 但是在提交表单时可以看到隐藏域的内容被提交至服务器
<p><input type="hidden" name="userid" value="666"></p>
2. 只读 readonly
只能看不能改,文本框还处于激活状态
3. 禁用 disabled
文本框或按钮变成灰色,不能单击. 在某些场合下禁用某个按钮, 必须同意条约等才会启用.
4.表单标注
增强鼠标的操作性
先设置文本框id , 第二步: 在文本外部包裹label标签
<label for="user">用户名:</label><input type="text" name="username" id="user">
五. 表单初级验证
好处:
1.减轻服务器的压力
2.保证数据的可行性和安全性
1.placeholder 文本提示
placeholder ="提示的文本内容"
默认会显示在文本框中, 输入单击输入内容后,自动消失, 删除全部内容则会自动出现.
2. required 非空验证
要求内容不能为空
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
3. pattern 正则表达式
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
注: ^1 表示必须以1开头. 如果只有^1表示只能输入1
[358]表示数字只能是3,5,8其中一个
\d{9}表示后面必须跟9位数
二. CSS语法
选择器{
声明1; ---属性:值
声明2;
......
}
例如:
h1{
color: green;
font-size:20px;
}
五. 引入样式表方式
1.行内样式表: 把样式表写在标签内, 使用style属性引入 例如<h2 style="color: #f31f10; font-size: 60px;">老二:鑫鑫</h2>
样式类型color后跟冒号, 值 ; 分号结尾
2.内部样式表 css代码写在head标签中, 使用style标签引入
<head>
<title></title>
<style type="text/css">
css代码
</style>
</head>
3.外部样式表 css代码单独保存在扩展名为.css的文件中(单独创建一个css文件,写入css代码)
1)链接式 CSS文件先加载到网页当中，再进行编译显示.
第一步: 新建css文件, 写入css代码
第二步: 在head标签中 使用link标签引入外部样式表
<link href="样式表路径" rel="stylesheet" type="text/css"/>
2)导入式 显示HTML结构，再把CSS文件加载到网页
<style type="text/css">
@import url("css/样式表.css");
</style>
★★★★★链接式与导入式的区别
1.<link/>标签属于XHTML，@import是属于CSS2.1
2.使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
★★★★★优先级: 行内 > 内部 > 外部样式表 (就近原则)
六. 基本选择器分类
1.标签选择器
标签名称作为选择器, 对所有使用该标签的内容全部有效
例如: h1{
color:blue;
}
所有h1标签的文字都是蓝色
2. id选择器
注意：id命名可以为数字、字母、下划线组成，但是不能够用数字开头
只能使用一次,以#开头
语法: 第一步:先在标签中设置 id="id选择器名称"
第二步:在样式表中 设置样式代码
#id选择器名称{
}
3. 类选择器
可以使用多次. 以点开头
语法: 第一步:先在标签中设置 class="class选择器名称"
第二步: 在样式表中 设置样式代码
.class选择器名称{
}
一个标签中可以同时应用多种选择器, 例如 <h2 id="xinxin" class="songsong">老二:鑫鑫</h2>
如果使用多个标签,那么效果会叠加.
★★★★★优先级: id选择器 > 类选择器 > 标签选择器
七. 层次选择器
1. E F 后代选择器,中间用空格隔开, (儿子或孙子辈都有效)
选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
2. E>F 子选择器(儿子辈有效)
选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
3. E+F 相邻兄弟选择器(E的下一个元素)
选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
4. E~F 通用兄弟选择器(同级元素,E后的兄弟所有元素)
选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
?
八、结构伪类选择器
注：选择器顺序，前三种是先找顺序，再匹配类型。后三种是先匹配类型，再看顺序。
1.E：first-child:作为父元素的第一个子元素E
先看是不是第一个孩子，再看是否是P元素
2.E：last-child:作为父元素的最后一个子元素E
先看是不是最后一个孩子，再看是否是P元素
3.E：nth-child(n)：作为父元素的第n个子元素
先看是不是第n个孩子，再看是否是P元素
4.E：first-of-type:父元素内具有指定类型的第一个E元素
先看p类型，再看顺序
5.E：last-of-type:父元素内具有指定类型的最后一个E元素
先看p类型，再看顺序
6.E：nth-of-type(1):父元素内具有指定类型的第n个E元素
先看p类型，再看顺序
九. 属性选择器
1. E[attr] 选择匹配具有属性attr的E元素
2.E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
3. E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
4.E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
5. E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
十 复合选择器
* 全局选择器
并集选择器 选择器1,选择器2 用逗号隔开
同时为多个选择设置样式
自我补充：在style标签中使用 *{属性} 通用选择器
一.span标签和div标签
1.span 为了突出显示某些内容，span是行内元素
2.div 块元素（独占一行，可以定义宽度和高度），没有任何效果，空壳效果。类似于容器，用于布局。
以上两个标签：最大的优点是没有任何默认样式。
作用：1）结构化html元素 2）div+css网页布局 3）提高网页的加载速度
在样式表中：
实现行内元素转块元素，display:block;
块元素转行内元素：display:inline-block;
一、字体样式
1.font-size:字体大小（px或em为单位）
2.font-weight:字体粗细（normal正常是400粗细，bold等同于700粗细）
3.font-family:字体类型 "宋体" 可以同时设置英文中文 Arial,"宋体"
font-family："宋体"；将全文中文设置为宋体。
font-family:Buxton Sketch,"幼圆"; //表示中文是幼圆，西文是Buxton Sketch字体
4.font-style:字体风格 italic倾斜
四合一： font:风格 粗细 大小 类型 风格和粗细可以省略
二、文本样式
1.color：颜色 alt+单击颜色可以打开拾色器进行调色
颜色一共有4种表示方式
1）单词 red green
2）颜色码 #ff0000 前两位数表示红色，中间两位表示绿色，最后两位是蓝色，最小值0，最大值是f，rgb加色原理，当所有的值最大时#ffffff ,最小是黑色：#000000
简便写法：#f00
3)rgb(255,0,0) 取值范围0-255，最大值是255
4)rgba(255,0,0,0.5) 最后一个参数是透明度，取值范围0-1，最小值是0表示全透明，0.5表示半透明，1表示不透明。大于1则仍然不透明
2.text-align:水平对齐方式
值：left左对齐，right右对齐，center居中对齐，justify两端对齐（对于段落文本，可以使两端都产生对齐效果，美化页面。）
3.line-height:行高 一般用于文字的垂直居中使用。当行高与段落的高度一致时，则文字产生垂直居中效果。
4.text-indent:文本缩进：中文习惯缩进2个字符，单位有两种px
px:一般一个字体大小即缩进一个字符，字体大小100px，缩进两个字符则是200px
em:一个中文字大小
5.text-decoration:文本装饰
常用值：none代表无，line-through：删除线，underline下划线（对没有的），overline上划线
6.text-shadow:文本阴影
语法：text-shadow:阴影颜色 x轴位移 y轴位移 模糊半径;
阴影颜色可以用以上4种颜色方法表示，x轴正值为向右移动，y轴正值向下移动，模糊半径越大越模糊
偏移和模糊半径都是px为单位，如果值为0则省略px。
/* 使用阴影技术做外发光效果,可以叠多层,中间用逗号 */
text-shadow: #0f0 0 0 10px,#ff0 0 0 20px,#00f 0 0 30px;
7.垂直方向对齐方式，一般是为图片添加，目的是设置图片与文字的垂直对齐top顶 middle垂直居中 bottom底
vertical-align: middle;
四、超链接伪类
1.a:link 未单击时的链接
2.a:hover /*鼠标放上去（悬浮）*/
3.a:active 单击未释放
4. a:visited 访问后（鼠标离开后）
设置伪类的顺序：a:link->a:visited->a:hover->a:active
五、列表样式
1.list-style-type：列表样式类型，square方块，circle空心圆
2. list-style-image: url("image/manor-2.jpg"); 图片列表样式
3.list-style:none; 去掉列表前的圆点
六、背景样式
1.background-color:背景色
2.background-image: url("image/manor-1.jpg"); 背景图
3.background-repeat:no-repeat;
1）no-repeat不重复 2）repeat是x轴y轴都重复 3）repeat-x：x轴重复 4）repeat-y：y轴重复
4.background-position：20px 0px; 背景定位
1）单位px 20px 0px 表示x轴向右移动20px，向下0
2）单位% 50% 0% 表示x轴向右移动百分之50（盒子正中间）
3）单位关键词 水平方向x轴：center left right 垂直方向Y轴：top center bottom
?
四合一：background：背景色 背景图 背景定位 是否重复;
四个参数，可以只有背景色或者背景图。位置可以调整。
5.background-size:百分比
1）auto：默认，不拉伸。不变形。保持原尺寸。
2）百分比：如果只有一个值 50%，那么只有X轴拉伸为所在元素的50%，宽高等比例拉伸，不变形
如果是两个值，那么可能变形。x轴和y轴都拉伸
像素：px
3）cover:覆盖
整个图片填充整个元素。完全覆盖,不漏背景色。（以最窄的一条边进行拉伸，等比例，不变形。）
4）contain：容纳,包含
等比例，不变形。将图片缩放到宽度或者高度正好适应背景区域,显示完整的图片,可能会漏出背景色，（以最宽的一条边进行拉伸。）
?
6.渐变色
1）线性渐变 上top 下bottom 左 left 右right
background: linear-gradient(to top, #ffa5f2, #31dcff);
linear-gradient(方向，颜色1，颜色2） 至少两种颜色，可以是多种颜色。
to bottom去底部(从上到下 ) to top:去顶部(从下到上 )
to left去左部(从右到左 ) to right:去右部(从左到右 )
to bottom right 从左上到右下
2）径向渐变
background: radial-gradient(#ffa5f2, #31dcff);
只需要两种颜色，不需要方向。
一、盒子模型
用于布局用的容器，可以设置宽度高度、内边距、外边距、边框等属性
二、边框
可设置：top 顶 right右 bottom底 left左
1. border-color: 边框颜色 还可以单独设置四条中的任意一条 border-top-color:上边框的颜色. 同理下左右
2. border-width: 边框粗细 还可以单独设置四条中的任意一条 border-top-width: 上边框的粗细. 同理下左右
粗细：px为单位
3. border-style: 边框样式 还可以单独设置四条中的任意一条 border-top-style: 上边框的样式. 同理下左右
样式：solid实线 dashed虚线 dotted点状线
4. 四合一的写法: border：粗细 样式 颜色； （样式是必须的）
border-bottom: 1px dotted red;//下边框
5. 总结: 设置顺序.例如下边框为虚线
顺序: 上右下左 顺时针
如果是一个参数, 4条边一样, 二个参数,上下一样,左右一样, 四个参数就是顺时针
border-style: none none dashed none;
三、外边距 margin
1.margin: 10px; //上、右、下、左四个方向外边距都是10px
2.margin:10px 0px; //对称写法，表示上下都为10px，左右0px
3.margin: 10px 0px 20px;//三个值：上10px；右0；下20；左0
4.margin: 10px 0px 20px 15px;//四个值：上10px；右0；下20；左0
单独设置一边 : 左外边距 margin-left:10px;
网页元素居中：margin:0 auto;(网页居中对齐的必要条件: 1.块元素 2. 固定宽度)
四、内边距 padding
padding使用方式同外边距。
五、计算盒子尺寸
盒子模型总尺寸=border+padding+margin+内容宽度
六、box-sizing拯救布局
1.box-sizing：border-box //盒子的宽度等于元素内容的宽度。内边距不再会使盒子撑大。
七、圆角border-radius
顺序 左上角——右上角——右下角——左下角（顺时针）
1.border-radius:10px; //一个值：表示四个角都是10px半径 50% 边的50%
正圆设置：50%
2.border-radius: 50% 0%; //两个值：表示左上角和右下角都是50%，右上角和左下角都是0
半圆 div{
width: 200px;
height: 100px;
background: green;
border-radius: 100px 100px 0 0 ;
}
八. 盒子阴影
box-shadow:inset x-offset y-offset blur-radius color;
box-shadow:阴影类型 x偏移 y偏移 羽化半径 阴影颜色;
阴影类型 :inset 内阴影
顺序可以改变 ,必须设置x轴和y轴偏移, 其他值根据需要设置. x轴和y轴还有模糊半径的顺序是固定的.
作业：
1.上机3，作业3，作业5 (上机1和4讲过自己做一遍提交)
2.预习第7章笔记
一、盒子阴影
1.外阴影的设置方式和文本阴影一样 box-shadow:#666 10px 10px 20px;
2./*盒子阴影：inset内阴影*/
box-shadow:inset #666 10px 10px 20px;
二、单词
1.float 浮动
2.clear 清除
3.both 两者都
4.overflow 溢出
5.hidden 隐藏
三、标准文档流
标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
四、display属性
1.display：block; 可用于使行内元素转为块元素
2.display：inline; 行内元素的默认值。可以使元素显示为行内元素。
3.display：inline-block;行内块元素。既具有行内特性，又具有块元素特性（块元素在一行显示）
4.display：none; 不会显示（隐藏）
五、浮动 float
一）如何让块元素在一行显示：
1. 块元素在一行显示
display: inline-block;
2.float浮动
float:left;
二）浮动属性
1.left：元素向左浮动（从左边开始依次向右排开 假设li里面是123， 结果 123）
2.right：元素向右浮动（从右边依次向左摆开，假设li里面是123， 结果 321）
3.none:默认值。元素不浮动，并会显示在其文本中出现的位置
六、清除浮动 clear
clear：both; 清除两种浮动
七、防止父级元素塌陷
1.最简单的办法：给父级元素（塌陷的元素最大的div没有高度）添加高度
2.第二种：在设置过浮动的父级元素下方添加一个空div
<!--<div class="kong"></div>-->
3.第三种: 为父级添加overflow属性
在父级元素的样式中添加 overflow: hidden; 不一定有效
4. 第四种：为父级元素加伪类after
#fuqin:after{
content: '';
display: block;
clear: both;
}
八、overflow属性高端用法
属性值：
1.visible： 默认，内容如果溢出不会被修剪，在盒子外呈现
2.hidden 如果溢出盒子外，则内容会被修剪，其余内容不可见
3.scroll 不论内容是否溢出，都会出现滚动条。内容会被修剪
4.auto 比scroll智能，如果内容不多则不出现滚动条，如果内容溢出则会出现滚动条。内容会被修剪
一. 定位position★★★★★
分类:
1.static 默认值, 没有定位
2.relative 相对定位
相对定位的规律(特性)
1)相对于自身原来的位置, 通过指定偏移,到达新的位置
2)没有脱离标准文档流, 它对相邻盒子和父级盒子没有任何影响
3)原来的位置会被保留下来.
3.absolute 绝对定位
绝对定位的规律(特性)
1)使用了绝对定位的元素以它最近的一个设置了定位的"祖先元素"为基准进行偏移
2)如果没有祖先元素设置定位,则以浏览器为基准进行偏移
3)绝对定位脱离了标准文档流, 它会对相邻盒子和父级盒子产生影响
4)原来的位置不会被保留.
4. fixed 固定定位
特性:
类似与绝对定位, 但是它永远是以浏览器窗口为基准偏移. 固定的位置不会改变.
★★★一般会对父元素添加相对定位,给子元素加绝对定位.
作业:
1.预习第9章 写预习笔记 每个组长分配好页面,1人3个页面,
1. 上机4, 课后4 讲过的推荐
页面头尾组长周四前做好页面宽度建议不超过1200px, heeder footer写. 一定要加清除浮动.clear:after
一组主题:QQ音乐
二组主题:奔驰官网
三组主题:马蜂窝旅游网
四组主题:腾讯新闻
五组主题:网易云
一. 2D变形
css3变形是位移, 旋转, 倾斜, 缩放的合集
2D变形,语法:
transform:[transform-function]*; ---2d冒号后可以跟多个函数. 函数之间用空格
1. 位移 translate
基于x轴 y轴重新定位.
语法: transform: translate(x轴位移, y轴位移)
translate(10px) --表示x轴移动10px
translate(10px,20px) --表示x轴向右移动10px, y轴向下移动20px
2.缩放 scale
基于自身原来大小放大缩小.
语法: transform: scale(x轴缩放,y轴缩放)
scale(2) --表示宽度高度等比例放大两倍, 如果是0-1之间,则是缩小,大于1则是放大
scale(0.5,2) --表示宽度缩小一倍, 高度放大一倍
3.倾斜 skew
可以仅设置沿着X轴或Y轴方向倾斜
语法: transform: skew(x轴倾斜,y轴倾斜)
transform: skew(45deg) ---表示x轴和y轴都倾斜45度
4.旋转 rotate
可以设置旋转, 正角度顺时针旋转.
transform: rotate(45deg); ---表示旋转45度
二. 过渡 transition
语法: transition: 过渡的css属性(谁过渡) 过渡所需时间 指定过渡函数 延迟时间
transition:transition-property transition-duration transition-timing-function transition-delay
transition-property:过渡的css属性, 一般取值all表示全部过渡
transition-duration: 过渡所需时间 ,历时多久
transition-timing-function : 指定过渡函数 比如可以指定具体的旋转产生过渡.
取值: 1)ease：速度由快到慢（默认值）
2)linear：速度恒速（匀速运动）
3)ease-in：速度越来越快（渐显效果）
4)ease-out：速度越来越慢（渐隐效果）
5)ease-in-out：速度先加速再减速（渐显渐隐效果）
transition-delay:延迟, 等待多少时间开始过渡
例如建强过渡自然: 过渡写给变化的对象 例如li transition: all 3s;---历时3s
三. 动画 animation
第一步: 设置关键帧
@keyframe 关键帧名称{
from{起始样式;}
percentage{css样式;}
to{结束样式;}
}
第二步: 调用关键帧
在需要调用的选择器,写animation
animation:animation-name animation–duration animation-timing-function
animation-delay animation-iteration-count animation-direction
animation-play-state animation-fill-mode;
animation: 关键帧名称 动画所需时间 动画方式 动画延迟 动画播放次数 动画方向 播放状态 动画时间外属性
1. 关键帧名称 直接写定义的关键帧即可
2. 动画所需时间 动画一共经历多长时间
3.animation-timing-function: 动画方式
取值:1)ease：速度由快到慢（默认值）
2)linear：速度恒速（匀速运动）
3)ease-in：速度越来越快（渐显效果）
4)ease-out：速度越来越慢（渐隐效果）
5)ease-in-out：速度先加速再减速（渐显渐隐效果）
5.animation-iteration-count 动画播放次数
一般是整数,例如1. 特殊值: infinite循环
6. animation-direction 动画方向
normal: 每次向前播放
alternate: 偶数次向前(往返)
7.animation-play-state 播放状态
running将暂停的动画重新播放
paused将正在播放的元素动画停下来
8.animation-fill-mode：动画时间外属性
both：两者都，动画开始前，和结束后都应用动画中的开始和结束的状态
forwards：表示动画结束后应用关键帧最后一帧的位置（状态）
backwards:表示动画开始前应用关键帧第一帧的位置（状态）
知识点小结互动:
1. 动画用途很广泛,学好动画可以实现很多新颖效果.
2. 学好动画的关键?
项目总结
input::-webkit-input-placeholder{color:red;} ---修改默认placeholder字体颜色
09-04
207
207
03-01
1214
1214
12-13
3290
3290
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
