You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2149 lines
52 KiB
2149 lines
52 KiB
# HTML5+CSS3
|
|
|
|
## 前序：我的发现
|
|
|
|
### 1 蒙版文字
|
|
|
|
```css
|
|
/* 让文字显示背景的颜色*/
|
|
*{
|
|
background-image: -webkit-gradient(linear,0 0,0 bottom, from(#e9f8ea), to(#88d78d));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
```
|
|
|
|
|
|
|
|
## 章节一 webstorm安装与设置
|
|
|
|
|
|
|
|
优点：自动补全
|
|
|
|
## 章节二 HTML基础元素
|
|
|
|
### 1 标题标签`<h1></h1>`
|
|
|
|
作用：设置标题
|
|
|
|
```html
|
|
<h1 align="center">一号标题</h1>
|
|
<h2 align="right">二号标题</h2>
|
|
<h3>三号标题</h3>
|
|
<h4>四号标题</h4>
|
|
<h5>五号标题</h5>
|
|
<h6>六号标题</h6>
|
|
```
|
|
|
|
### 2 段落标记`<p></p>`
|
|
|
|
```html
|
|
<p align="center">这是一个段落</p>
|
|
<p align="right">这是一个段落</p>
|
|
<p>这是一个段落</p>
|
|
```
|
|
|
|
### 3 强制换行`<br></br>`
|
|
|
|
```html
|
|
<br/>
|
|
<!--没有任何属性-->
|
|
|
|
<!--HTML只能识别一个连续的空格-->
|
|
```
|
|
|
|
### 4 分割线`<hr/>`
|
|
|
|
```html
|
|
<!--
|
|
1）作用
|
|
用来分割上下文档
|
|
|
|
2）语法
|
|
<hr/>
|
|
|
|
3）属性
|
|
color：设置水平线的颜色，取值为关键词 例如red yellow
|
|
width：设置水平线的水平方向
|
|
size：设置水平线的垂直方向
|
|
align：设置水平线的水平对齐方式，默认center，取值left、right
|
|
|
|
HTML默认单位为像素(px),当你的单位为像素时，可以省略不写
|
|
|
|
4）举个栗子
|
|
<hr color="red" width="500" size="30" align="left"/>
|
|
|
|
-->
|
|
<p>这是第一个段落</p>
|
|
<hr color="red" width="500" size="30" align="left"/>
|
|
<hr color="red" width="500" size="30" align="left"/>
|
|
<p>这是第二个段落</p>
|
|
|
|
```
|
|
|
|
### 5 图片`<img/>`
|
|
|
|
```html
|
|
<!--
|
|
|
|
1）作用:引入图片
|
|
|
|
2）语法:<img/>
|
|
|
|
3）属性
|
|
src 路径 必须属性
|
|
alt 图片不能正常显示给予提示
|
|
title 鼠标选题给予提示
|
|
width 设置图片的宽度
|
|
height 设置图片的高度
|
|
|
|
****图片宽高设置其中一个属性，另外一个属性会跟着等比例缩放
|
|
|
|
图片常见格式：
|
|
jpg 不支持背景透明
|
|
jpeg 不支持背景透明
|
|
png 支持背景透明
|
|
gif 支持动图
|
|
psd ps的格式
|
|
webp
|
|
|
|
路径
|
|
1）绝对路径
|
|
①网址
|
|
②盘符
|
|
|
|
2）相对路径
|
|
①平级 直接写
|
|
②下一级 /
|
|
③上一级 ../ 上两级 ../../
|
|
|
|
HTML文件去查找目标文件
|
|
webstorm有内置的服务器
|
|
|
|
-->
|
|
<!--网址-->
|
|
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598957713150&di=d0a3a91236792b48d21de408fbba119e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180301%2Ffd414d28407e41d0a799cf62bde718d4.gif" alt=""/>
|
|
|
|
<!--盘符-->
|
|
<img src="C:\Users\Administrator\Desktop\img1.gif" alt="">
|
|
|
|
|
|
<!--平级-->
|
|
<img src="img2.gif" alt="">
|
|
|
|
<!--下一级-->
|
|
<img src="images/img3.gif" alt="">
|
|
<img src="images/img4.gif" alt="">
|
|
|
|
<!--上一级-->
|
|
<img src="../img5.gif" alt="">
|
|
|
|
<img src="images/img3.gif" alt="蜡笔小新" title="蜡笔小新哈哈哈哈" width="300" height="250"/>
|
|
```
|
|
|
|
### 6 超链接`<a></a>`
|
|
|
|
```html
|
|
<!--
|
|
1）作用:跳转到文档或者文档中某个部分
|
|
|
|
2）语法:<a></a>
|
|
|
|
默认样式：
|
|
鼠标停在超链接上光标变为小手
|
|
默认字体颜色为蓝色
|
|
鼠标按下字体颜色为红色
|
|
点击之后字体颜色为紫色
|
|
|
|
3)属性
|
|
href 路径 必须属性
|
|
target 目标，设置打开的窗口 默认_self 原窗口打开，_blank 新窗口打开
|
|
name 锚点(跳转到具体的位置)
|
|
|
|
4）锚点
|
|
①点击a跳转到a
|
|
<a href="#名字">点击</a>
|
|
<a name="名字">挑战到</a>
|
|
|
|
注意：name属性只能写在a上
|
|
|
|
②点击a跳转到块级元素
|
|
<a href="#名字">点击</a>
|
|
<开始标记 id="名字"></结束标记>
|
|
|
|
名字命名规则：
|
|
①包含数字、字母、下划线
|
|
②不要以数字开头
|
|
③起有意义的名字
|
|
|
|
5）空链接
|
|
<a href="#"></a>
|
|
效果：返回页面顶部
|
|
|
|
|
|
-->
|
|
<a href="http://www.baidu.com" target="_blank">百度一下</a>
|
|
|
|
<a href="06图片小练习.html" target="_blank">跳转到06</a>
|
|
|
|
<a href="images/img1.gif">跳转到图片</a>
|
|
|
|
<a href="images/img3.gif">
|
|
<img src="images/img1.gif" alt="">
|
|
</a>
|
|
<br>
|
|
|
|
<!--锚点-->
|
|
<a href="#me">点击我</a>
|
|
|
|
<a href="" name="me">跳转到我</a>
|
|
|
|
<a href="06图片小练习.html#me1">跳转到06的某个位置</a>
|
|
<a href="#h1">点击我</a>
|
|
|
|
|
|
<!--空链接-->
|
|
<a href="#">返回页面顶部</a>
|
|
```
|
|
|
|
### 7 文本格式化标签
|
|
|
|
```html
|
|
<!--
|
|
8、文本格式化标签
|
|
<b>加粗</b>
|
|
<i>倾斜</i>
|
|
<u>下划线</u>
|
|
|
|
<s>删除线</s>
|
|
<del>删除线</del>
|
|
|
|
<em>强调，倾斜显示</em>
|
|
<strong>强调，加粗显示</strong>
|
|
|
|
<sup>上标</sup>
|
|
<sub>下标</sub>
|
|
|
|
<small>小号字体</small>
|
|
<big>大号字体</big>
|
|
|
|
浏览器默认字体大小为16px，高度为21px
|
|
最小字体为12px
|
|
|
|
-->
|
|
<b>加粗</b>
|
|
<i>倾斜</i>
|
|
<u>下划线</u>
|
|
|
|
<s>删除线</s>
|
|
<del>删除线</del>
|
|
|
|
<em>强调，倾斜显示</em>
|
|
<strong>强调，加粗显示</strong>
|
|
|
|
<sup>上标</sup>
|
|
<sub>下标</sub>
|
|
2<sup>3</sup>
|
|
O<sub>2</sub>
|
|
|
|
<small>小号字体</small>
|
|
<big>大号字体</big>
|
|
```
|
|
|
|
### 8 无序列表`<ul></ul>`
|
|
|
|
```html
|
|
<!--
|
|
9、无序列表
|
|
1）语法
|
|
<ul> unorder list
|
|
<li>...</li> list items
|
|
<li>...</li>
|
|
<li>...</li>
|
|
</ul>
|
|
|
|
2）ul和li的属性
|
|
type：设置项目符号的类型
|
|
disc 默认值 黑色实心圆
|
|
circle 空心圆
|
|
square 实心矩形
|
|
none 不显示
|
|
|
|
3)无序列表相互嵌套
|
|
<ul>
|
|
<li>
|
|
...
|
|
<ul>
|
|
<li>...</li>
|
|
<li>...</li>
|
|
</ul>
|
|
</li>
|
|
<li>...</li>
|
|
<li>...</li>
|
|
</ul>
|
|
|
|
嵌套三级之后都是同样的点点
|
|
|
|
-->
|
|
```
|
|
|
|
### 9 有序列表`<ol></ol>`
|
|
|
|
```html
|
|
<!--
|
|
10、有序列表
|
|
1）语法
|
|
<ol>
|
|
<li>....</li>
|
|
<li>....</li>
|
|
<li>....</li>
|
|
</ol>
|
|
|
|
2）ol和li的属性
|
|
①type：设置项目符号
|
|
1 默认
|
|
A
|
|
a
|
|
i
|
|
I
|
|
|
|
②start：设置从第几个开始数，取值number
|
|
|
|
③reversed：设置倒序
|
|
reversed="reversed" 当属性等于属性值时，简写为属性
|
|
|
|
3）相互嵌套
|
|
<ol>
|
|
<li>
|
|
...
|
|
<ol>
|
|
<li>
|
|
...
|
|
<ul>
|
|
<li>..</li>
|
|
<li>..</li>
|
|
</ul>
|
|
</li>
|
|
<li>...</li>
|
|
<li>...</li>
|
|
</ol>
|
|
</li>
|
|
<li>...</li>
|
|
<li>...</li>
|
|
</ol>
|
|
-->
|
|
```
|
|
|
|
### 10 自定义列表`<dl></dl>`
|
|
|
|
<dl>
|
|
<dt>项目</dt>
|
|
<dd>项目的注释</dd>
|
|
<dd>项目的注释</dd>
|
|
<dd>项目的注释</dd>
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt>帮助中心</dt>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt>服务支持</dt>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
</dl>
|
|
|
|
<ul type="none">
|
|
<li>服务支持</li>
|
|
<li><a href="#">账户管理</a></li>
|
|
<li><a href="#">账户管理</a></li>
|
|
<li><a href="#">账户管理</a></li>
|
|
<li><a href="#">账户管理</a></li>
|
|
</ul>
|
|
|
|
```html
|
|
<dl>
|
|
<dt>项目</dt>
|
|
<dd>项目的注释</dd>
|
|
<dd>项目的注释</dd>
|
|
<dd>项目的注释</dd>
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt>帮助中心</dt>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt>服务支持</dt>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
<dd><a href="#">账户管理</a></dd>
|
|
</dl>
|
|
|
|
<ul type="none">
|
|
<li>服务支持</li>
|
|
<li><a href="#">账户管理</a></li>
|
|
<li><a href="#">账户管理</a></li>
|
|
<li><a href="#">账户管理</a></li>
|
|
<li><a href="#">账户管理</a></li>
|
|
</ul>
|
|
```
|
|
|
|
### 11 表格
|
|
|
|
#### 表格创建
|
|
|
|
```html
|
|
<!--
|
|
1）作用
|
|
展示数据
|
|
|
|
2）特点
|
|
同行等高
|
|
同列等宽
|
|
|
|
3）标签
|
|
<table></table> 表格
|
|
<tr></tr> 行 table row
|
|
<td></td> 列、单元格 table data cell
|
|
<th></th> 特殊的单元格，内容默认水平居中且加粗
|
|
<thead></thead> 表格的头部
|
|
<tbody></tbody> 表格的身体，浏览器默认
|
|
<tfoot></tfoot> 表格的脚部
|
|
|
|
表格不设置大小，默认由内容撑开
|
|
|
|
-->
|
|
<table>
|
|
<caption>表格的标题</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>三行两列的表格</th>
|
|
<th>三行两列的表格</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>三行两列的表格三行两列的表格</td>
|
|
<td>三行两列的表格三行两列的表格</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td>三行两列的表格</td>
|
|
<td>三行两列的表格</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
```
|
|
|
|
<table>
|
|
<caption>表格的标题</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>三行两列的表格</th>
|
|
<th>三行两列的表格</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>三行两列的表格三行两列的表格</td>
|
|
<td>三行两列的表格三行两列的表格</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td>三行两列的表格</td>
|
|
<td>三行两列的表格</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
#### table属性
|
|
|
|
```html
|
|
<!--
|
|
table的属性
|
|
border 设置表格的边框，默认为0
|
|
width 设置表格的宽度
|
|
height 设置表格的高度
|
|
align 设置表格的水平对齐方式，默认left
|
|
cellpadding 设置内容距边框的距离
|
|
cellspacing 设置单元格之间的距离，当取值为0，边框变为一条线
|
|
bgcolor 设置背景颜色
|
|
bordercolor 设置边框颜色
|
|
background 设置背景图片，默认水平垂直平铺
|
|
-->
|
|
```
|
|
|
|
|
|
|
|
#### tr属性
|
|
|
|
```html
|
|
<!--
|
|
height 设置一行的高度
|
|
bgcolor 设置一行的背景颜色
|
|
background 设置一行的背景图片
|
|
align 设置行里面内容的水平对齐方式，默认left，取值center、right
|
|
valign 设置行里面内容的垂直对齐方式，默认middle，取值top、bottom
|
|
-->
|
|
```
|
|
|
|
|
|
|
|
#### td属性
|
|
|
|
```html
|
|
<!--
|
|
width 设置单元格的宽度，同列等宽
|
|
height 设置单元格的高度，同行等高
|
|
align 设置单元格内容的水平对齐方式
|
|
valign 设置单元格内容的垂直对齐方式
|
|
bgcolor 设置单元格的背景颜色
|
|
background 设置单元格的背景图片
|
|
|
|
colspan 跨列，水平合并，从左往右，写在开始的td中，取值为数值，水平合并删除同一行的td
|
|
删除的个数 = 合并的个数 - 1
|
|
rowspan 跨行，垂直合并，从上往下，写在开始的td中，取值为数值，垂直合并删除下面行的td
|
|
删除的个数 = 合并的个数 - 1
|
|
-->
|
|
```
|
|
|
|
## 章节三 表单
|
|
|
|
### 1 form
|
|
|
|
```html
|
|
<!--
|
|
1、表单
|
|
1）作用
|
|
收集用户信息，提交到服务器，服务器经过一些列的处理，反馈回来，使页面具有交互性
|
|
|
|
2）标签
|
|
<form action="" name="" method="">
|
|
提交的数据
|
|
</form>
|
|
action:提交的地址
|
|
name：表单的名称
|
|
method：提交的方式，默认get，取值post
|
|
|
|
get和post的区别：
|
|
①get提交数据不安全，会在地址栏中显示；post安全
|
|
②get提交数据的大小有限制，不能大于2KB；post理论上没有限制
|
|
|
|
|
|
一个页面可以有多个表单，表单之间不可以相互嵌套
|
|
|
|
二进制：0 1
|
|
八进制：0-7
|
|
十进制：0-9
|
|
十六进制：0-9 a——f A——F
|
|
|
|
计算机底层是二进制，包含0和1，一个0或者一个1就是1位(bit)
|
|
位是计算机最小单位
|
|
1B(byte 字节) = 1b(bit 位)
|
|
1KB = 1024B
|
|
1MB = 1024KB
|
|
1GB = 1024MB
|
|
PB TB等
|
|
|
|
英文字母和数字占一个字节
|
|
汉字占两个字节
|
|
|
|
|
|
完整的表单三部分组成：
|
|
①form
|
|
②表单域 例如用户名、密码等
|
|
③表单按钮 例如登录、注册等
|
|
|
|
表单域和表单按钮可以统称为表单元素
|
|
|
|
-->
|
|
|
|
<form action="" name="form1" method="post">
|
|
|
|
</form>
|
|
```
|
|
|
|
### 2 表单元素
|
|
|
|
```html
|
|
<!--
|
|
2、表单元素
|
|
普通文本框 <input type="text" name="表单元素的名称" value="当前值"/>
|
|
密码框 <input type="password" name="" value=""/>
|
|
单选按钮|单选框 <input type="radio" name="" value=""/> 一组单选按钮name一致
|
|
多选按钮|复选框 <input type="checkbox" name="" value=""/>
|
|
提交按钮 <input type="submit" value=""/>
|
|
重置按钮 <input type="reset" value=""/>
|
|
没有功能的按钮 <input type="button"/>
|
|
提交按钮 <button></button> 默认type="submit" 双标记之间可以写内容
|
|
重置按钮 <button type="reset"></button>
|
|
没有功能的按钮 <button type="button"></button>
|
|
|
|
-->
|
|
<form action="ok.html" name="form1">
|
|
用户名：<input type="text" name="userName" value="用户名"/>
|
|
<br>
|
|
密码：<input type="password" name="password"/>
|
|
<br>
|
|
性别：
|
|
<input type="radio" name="sex" value="man"/>男
|
|
<input type="radio" name="sex" value="woman"/>女
|
|
<input type="radio" name="sex" value="hemophrodite"/>人妖
|
|
<br>
|
|
爱好：
|
|
<input type="checkbox" name="hobby" value="sing">唱
|
|
<input type="checkbox" name="hobby" value="dance">跳
|
|
<input type="checkbox" name="hobby" value="rap">rap
|
|
<br>
|
|
<input type="submit" value="登录">
|
|
<input type="reset" value="取消">
|
|
<input type="button" value="没有功能的按钮">
|
|
<button>提交</button>
|
|
<button type="reset">重置</button>
|
|
<button type="button">没有功能的按钮</button>
|
|
</form>
|
|
|
|
|
|
<!--
|
|
下拉列表：
|
|
<select>
|
|
<option>...</option>
|
|
<option>...</option>
|
|
<option>...</option>
|
|
</select>
|
|
<select>
|
|
<optgroup label="组名">
|
|
<option>...</option>
|
|
<option>...</option>
|
|
<option>...</option>
|
|
</optgroup>
|
|
</select>
|
|
|
|
多行文本框：
|
|
<textarea></textarea>
|
|
|
|
提升用户体验度：<label for=""></label> for属性和id属性一致
|
|
|
|
文件：<input type="file"/> 修改表单的编码格式为二进制 enctype="multipart/form-data"
|
|
|
|
图片提交按钮：<input type="image" src=""/>
|
|
|
|
隐藏域：<input type="hidden"/> 用户不可见，携带的信息可以正常的提交到服务器
|
|
|
|
|
|
-->
|
|
<form action="ok.html" enctype="multipart/form-data">
|
|
<p>
|
|
性别：
|
|
<input type="radio" name="sex" id="man">
|
|
<label for="man">男</label>
|
|
<input type="radio" name="sex" id="woman">
|
|
<label for="woman">女</label>
|
|
</p>
|
|
<p>
|
|
爱好：
|
|
<input type="checkbox" name="hobby" value="eat" id="eat">
|
|
<label for="eat">吃</label>
|
|
<input type="checkbox" name="hobby" value="eat" id="drink">
|
|
<label for="drink">喝</label>
|
|
<input type="checkbox" name="hobby" value="eat" id="play">
|
|
<label for="play">玩</label>
|
|
<input type="checkbox" name="hobby" value="eat" id="happy">
|
|
<label for="happy">乐</label>
|
|
</p>
|
|
<p>
|
|
下拉列表：
|
|
<select name="city" id="city">
|
|
<option value="bj">北京</option>
|
|
<option value="tj">天津</option>
|
|
<option value="sh">上海</option>
|
|
<option value="hb">河北</option>
|
|
<option value="sd">山东</option>
|
|
<option value="sx">山西</option>
|
|
</select>
|
|
<select name="city1" id="city1">
|
|
<optgroup label="北京">
|
|
<option value="bj">朝阳</option>
|
|
<option value="tj">大兴</option>
|
|
<option value="sh">东城</option>
|
|
</optgroup>
|
|
<optgroup label="河北">
|
|
<option value="hb">石家庄</option>
|
|
<option value="sd">唐山</option>
|
|
<option value="sx">廊坊</option>
|
|
</optgroup>
|
|
</select>
|
|
</p>
|
|
<p>
|
|
多行文本框：
|
|
<textarea name="texts" id="texts" cols="60" rows="20">你好，
|
|
</textarea>
|
|
</p>
|
|
<p>
|
|
文件：
|
|
<input type="file">
|
|
</p>
|
|
<p>
|
|
图片提价按钮：
|
|
<input type="image" src="images/img1.gif">
|
|
</p>
|
|
<p>
|
|
隐藏域：
|
|
<input type="hidden">
|
|
</p>
|
|
</form>
|
|
```
|
|
|
|
### 3 表单元素常用属性
|
|
|
|
```html
|
|
<!--
|
|
3、表单元素常用属性
|
|
掌握：
|
|
type 表单元素的类型
|
|
name 表单元素的名称
|
|
value 当前值
|
|
checked 默认被选中,配合单选按钮和多选按钮使用
|
|
selected 默认显示,配合option使用
|
|
|
|
了解：
|
|
disabled 禁用
|
|
readonly 只读
|
|
|
|
|
|
-->
|
|
<form action="ok.html" name="form1">
|
|
<p>
|
|
姓名：<input type="text" disabled value="用户名">
|
|
</p>
|
|
<p>
|
|
密码：<input type="password" readonly>
|
|
</p>
|
|
<p>
|
|
性别：
|
|
<input type="radio" id="man" name="sex" checked value="man">
|
|
<label for="man">男</label>
|
|
<input type="radio" id="woman" name="sex" value="woman">
|
|
<label for="woman">女</label>
|
|
</p>
|
|
<p>
|
|
爱好：
|
|
<input type="checkbox" id="sing">
|
|
<label for="sing">唱</label>
|
|
<input type="checkbox" id="dance">
|
|
<label for="dance">跳</label>
|
|
<input type="checkbox" id="RAP" checked>
|
|
<label for="RAP">RAP</label>
|
|
</p>
|
|
<p>
|
|
城市：
|
|
<select name="city" id="city">
|
|
<option value="0">北京</option>
|
|
<option value="1">天津</option>
|
|
<option value="2" selected>河北</option>
|
|
</select>
|
|
</p>
|
|
<p>
|
|
<input type="submit">
|
|
<input type="reset">
|
|
</p>
|
|
|
|
</form>
|
|
```
|
|
|
|
### 4 H5新增type类型
|
|
|
|
```html
|
|
<!--
|
|
4、H5新增type类型
|
|
邮箱：<input type="email"> 必须包含@,@后面必须有内容
|
|
网址：<input type="url"> 必须包含一个协议,协议后面必须有内容,常见的协议http和https
|
|
搜索：<input type="search">
|
|
电话：<input type="tel"> 适用于移动端
|
|
数字：<input type="number" min="最小值" max="最大值" value="当前值" step="步长"/>
|
|
范围：<input type="range" min="最小值" max="最大值" value="当前值" step="步长">
|
|
颜色：<input type="color">
|
|
日期：<input type="date">
|
|
月：<input type="month">
|
|
周：<input type="week">
|
|
|
|
|
|
-->
|
|
<form action="ok.html" name="form1">
|
|
<p>邮箱：<input type="email"></p>
|
|
<p>网址：<input type="url"></p>
|
|
<p>搜索：<input type="search"></p>
|
|
<p>电话：<input type="tel"></p>
|
|
<p>颜色：<input type="color"></p>
|
|
<p>数字：<input type="number" min="0" max="100" value="60" step="5"></p>
|
|
<p>范围：<input type="range" min="0" max="100" value="20" step="10"></p>
|
|
<p>日期：<input type="date"></p>
|
|
<p>月：<input type="month"></p>
|
|
<p>周：<input type="week"></p>
|
|
<p><input type="submit"></p>
|
|
|
|
</form>
|
|
```
|
|
|
|
### 5 H5新增表单元素属性
|
|
|
|
```html
|
|
<!--
|
|
5、H5新增表单元素的属性
|
|
placeholder="" 默认提示
|
|
autofocus 当页面一加载,input会自动获取焦点,适用所有的input,推荐写在第一个input上
|
|
|
|
了解：
|
|
required 必填项
|
|
multiple 可以输入多个,用英文的逗号隔开,适用邮箱和网址
|
|
minlength 最小长度,英文字母、数字、汉字等都算一个长度
|
|
maxlength 最大长度,英文字母、数字、汉字等都算一个长度
|
|
|
|
-->
|
|
<form action="ok.html">
|
|
<p>
|
|
姓名：<input type="text" placeholder="手机/邮箱/用户名" autofocus required minlength="2" maxlength="8">
|
|
</p>
|
|
<p>
|
|
密码：<input type="password" placeholder="密码">
|
|
</p>
|
|
<p>
|
|
邮箱：<input type="email" multiple>
|
|
</p>
|
|
<p>
|
|
<input type="submit">
|
|
</p>
|
|
</form>
|
|
```
|
|
|
|
### 6 行内元素与块级元素
|
|
|
|
```html
|
|
<!--
|
|
7、块级元素和行内元素的区别
|
|
1）块级元素独占一行,行内元素在同一行显示
|
|
2）块级元素默认宽度为100%,行内元素默认宽度由内容撑开
|
|
3）块级元素
|
|
h1~h6、p、ol、ul、li、dl、dt、dd、form等
|
|
4）行内元素
|
|
img、a、b、i、u、s、del、em、strong、sup、sub、input、button、textarea等
|
|
|
|
%：相对于父元素
|
|
|
|
-->
|
|
<h1>一号标题</h1>
|
|
<p>这是一个段落</p>
|
|
|
|
<b>加粗</b>
|
|
<a href="#">超链接</a>
|
|
```
|
|
|
|
## 章节四 H5新增元素与CSS初识
|
|
|
|
### 1 div和span
|
|
|
|
```html
|
|
<!--
|
|
1、div+span
|
|
div 块级元素 盒子、容器 无语义的标签
|
|
span 行内元素 盒子、容器 无语义的标签
|
|
|
|
-->
|
|
```
|
|
|
|
### 2 H5新增语义化布局标签
|
|
|
|
```html5
|
|
<!--
|
|
2、H5新增语义化布局标签
|
|
使页面结构更加清晰
|
|
H5新增元素IE8及其以下不支持
|
|
|
|
<header>头部</header>
|
|
<nav>导航</nav>
|
|
<footer>页脚</footer>
|
|
<aside>侧边栏</aside>
|
|
<article>文章、帖子等</article>
|
|
<section>章节、独立的一块</section>
|
|
|
|
-->
|
|
```
|
|
|
|
### 3 视频和音频
|
|
|
|
```html
|
|
<!--
|
|
3、视频和音频
|
|
1）视频
|
|
支持的格式mp4 ogg webM
|
|
标签：
|
|
<video>用户提示</video>
|
|
属性：
|
|
src 必须属性 路径
|
|
width 宽度
|
|
height 高度
|
|
autoplay 自动播放
|
|
controls 显示控制面板
|
|
loop 循环播放
|
|
muted 静音
|
|
|
|
2）音频
|
|
标签：
|
|
<audio>您的浏览器不支持音频,请升级</audio>
|
|
属性：
|
|
src 必须属性 路径
|
|
autoplay 自动播放
|
|
controls 显示控制面板
|
|
loop 循环播放
|
|
muted 静音
|
|
|
|
-->
|
|
```
|
|
|
|
### 4 CSS与引入方式
|
|
|
|
```html
|
|
<!--
|
|
1、css
|
|
层叠样式表 级联样式表 简称样式表
|
|
|
|
2、作用
|
|
1）实现了内容与表现的分离
|
|
2）提高了代码的可重用性和可维护性
|
|
|
|
3、文件后缀
|
|
.css
|
|
|
|
html文件后缀 .html 或者 .htm
|
|
|
|
4、css的特点
|
|
1）继承性
|
|
子元素可以继承父元素的样式
|
|
有继承性的属性：color,font-*,text-*,line-height
|
|
|
|
2）层叠性
|
|
一个元素可以同时设置多个样式
|
|
|
|
3）优先级
|
|
当你样式冲突时,优先级高的样式生效,优先级相同时,后写的样式生效
|
|
(html、css、JavaScript由浏览器解析执行,由上往下,由左往右的顺序解析)
|
|
|
|
5、css的语法
|
|
1）属性:属性值;属性:属性值;
|
|
2）选择器{属性:属性值;属性:属性值;}
|
|
|
|
6、css的注释(程序员的自我修养)
|
|
快捷键：
|
|
单行注释 ctrl+/
|
|
多行注释 ctrl+shift+/
|
|
|
|
语法：
|
|
/* 注释的内容 */
|
|
注意：
|
|
注释之间不能相互嵌套
|
|
|
|
-->
|
|
<style type="text/css"></style>
|
|
<link rel="icon" href="images/img1.gif">
|
|
<link rel="stylesheet" href="css/05style.css"/>
|
|
<style>
|
|
@import "css/06style.css";
|
|
</style>
|
|
<!--
|
|
2、引入方式
|
|
1）内联方式 行内样式 ——只对当前元素生效,重用性低
|
|
利用HTML的style属性
|
|
语法：
|
|
<开始标记 style="css属性:属性值;"></结束标记>
|
|
|
|
2）内部方式 ——只对当前页面生效
|
|
利用HTML的style标签
|
|
语法：
|
|
<head>
|
|
<style>
|
|
选择器{
|
|
属性:属性值;
|
|
属性:属性值;
|
|
属性:属性值;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
3）外部方式 ——实现了内容与表现的完全分离,提高了代码的重用性可维护性
|
|
利用HTML的link标签
|
|
语法：
|
|
<head>
|
|
<link rel="stylesheet" href="css文件的路径"/>
|
|
</head>
|
|
|
|
一个.css文件可以被多个HTML文件引入
|
|
一个HTML文件可以引入多个css文件
|
|
|
|
4）导入式
|
|
语法：
|
|
<head>
|
|
<style>
|
|
@import "css文件";
|
|
</style>
|
|
</head>
|
|
|
|
@import和link的区别：
|
|
①加载顺序不同，@import先加载HTML文件，再加载css文件；link是同时加载HTML和css文件
|
|
②引入内容不容，@import只能引入css文件；link还可以引入其他内容
|
|
③兼容性不同，@import有兼容性问题，IE5以上支持；link没有兼容性问题
|
|
④@import会增加页面的http请求,影响页面加载速度
|
|
⑤JavaScript操作DOM时,只能操作link引入的css
|
|
|
|
5）引入方式的优先级
|
|
内联方式>内部方式(外部方式)
|
|
内部方式和外部方式优先级相同,写在后面的样式生效
|
|
|
|
-->
|
|
|
|
```
|
|
|
|
## 章节五 CSS常用属性
|
|
|
|
### 1 字体的属性
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
1、字体的属性——继承性(自己有样式,不会继承父元素的样式)
|
|
1）字体颜色 color:;
|
|
|
|
2）字体大小 font-size:16px;
|
|
浏览器默认字体大小为16px
|
|
浏览器支持的最小字体为12px
|
|
|
|
3）字体是否加粗 font-weight:;
|
|
normal 默认值 不加粗
|
|
bold 加粗
|
|
100-900 400 = normal 700 = bold
|
|
|
|
4）字体的样式 font-style:;
|
|
normal 默认值 不倾斜
|
|
italic 倾斜
|
|
|
|
5）字体 font-family:字体1,字体2,...;
|
|
注意：当字体由多个单词组成,必须加引号
|
|
|
|
颜色的取值：
|
|
1）关键词 red blue等
|
|
2）十六进制
|
|
黑色 #000000 简写 #000
|
|
白色 #ffffff 简写 #fff
|
|
3）rgb(,,)
|
|
取值0-255
|
|
rgb(0,0,0) 黑色
|
|
rgb(255,255,255) 白色
|
|
4）rgba(,,,)
|
|
a：透明度 取值0-1 0：完全透明 1：不透明 0.18简写.18
|
|
rgba(0,0,0,.5)
|
|
|
|
|
|
*/
|
|
/*选择器{
|
|
属性:属性值;
|
|
}*/
|
|
</style>
|
|
</head>
|
|
```
|
|
|
|
### 2 背景属性
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
2、背景的属性
|
|
1）背景颜色 background-color:transparent(透明的);
|
|
|
|
2）背景图片 background-image:url("");
|
|
|
|
3）背景图片是否平铺 background-repeat:;
|
|
repeat 默认值 平铺
|
|
no-repeat 不平铺
|
|
repeat-x 水平方向平铺
|
|
repeat-y 垂直方向平铺
|
|
|
|
4）背景图片大小 background-size:x y;
|
|
取值px % cover contain
|
|
当只取一个值,等比例缩放
|
|
cover 覆盖 背景图片会覆盖整个背景区域,但背景图片可能显示不完全
|
|
contain 背景图片拉伸至最大,背景区域可能覆盖不完全
|
|
|
|
5）背景图片定位 background-position:x y;
|
|
默认值为0 0 (元素的左上角)
|
|
取值px % left right top bottom center
|
|
当只取一个值,第二个值默认为center
|
|
|
|
当取正值,背景图片往右下走
|
|
当取负值,背景图片往左上走
|
|
|
|
左上角为0% 0% 右下角为100% 100%
|
|
|
|
6）背景图片是否固定 background-attachment:;
|
|
scroll 默认值 滚动
|
|
fixed 固定
|
|
|
|
7）简写
|
|
background:color image repeat size position attachment;
|
|
后面的多个属性空格隔开,不区分前后顺序
|
|
简写属性没有取得属性值为默认值
|
|
当背景图片大小和背景图片定位取值为px或%时,一般不简写
|
|
当简写属性和单个属性同时存在,单个属性要写在简写属性后面
|
|
|
|
*/
|
|
body{
|
|
height: 3000px;
|
|
/* background-image: url("images/img2.jpg");
|
|
background-attachment: fixed;*/
|
|
background: url("images/img2.jpg") fixed;
|
|
}
|
|
.box{
|
|
width: 600px;
|
|
height: 500px;
|
|
/*background-color: red;*/
|
|
|
|
/*background-image: url("images/img1.jpg");*/
|
|
|
|
/*background-repeat: no-repeat;*/
|
|
/*background-repeat: repeat-x;*/
|
|
/*background-repeat: repeat-y;*/
|
|
|
|
/*background-size: 600px 500px;*/
|
|
/*background-size: 100% 100%;*/
|
|
/*background-size: cover;*/
|
|
/*background-size: contain;*/
|
|
|
|
/*background-position: -50px -50px;*/
|
|
/*background-position: 100% 100%;*/
|
|
/*background-position: 50%;*/
|
|
/*background-position: right top;*/
|
|
/*background-position: center;*/
|
|
|
|
background: red url("images/img1.jpg") no-repeat center;
|
|
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 3 文本属性
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
3、文本属性——继承性
|
|
1）元素内容的水平对齐方式
|
|
text-align:;
|
|
left 默认值 居左
|
|
center 居中
|
|
right 居右
|
|
|
|
2）文本装饰
|
|
text-decoration:;
|
|
none 默认值 不显示
|
|
underline 下划线
|
|
overline 上划线
|
|
line-through 删除线
|
|
|
|
3）英文字母大小写转换
|
|
text-transform:;
|
|
uppercase 全部转换为大写
|
|
lowercase 全部转换为小写
|
|
capitalize 每个单词首字母大写
|
|
|
|
4）首行缩进
|
|
text-indent:;
|
|
取值px em
|
|
px 像素 绝对单位
|
|
em 相对单位,相对于当前字体大写 默认1em = 16px
|
|
|
|
可取负值,往左缩进
|
|
</style>
|
|
```
|
|
|
|
### 4 列表属性
|
|
|
|
```html
|
|
<style>
|
|
/*
|
|
4、列表的属性
|
|
1）设置项目符号的类型
|
|
list-style-type:;
|
|
none 不显示
|
|
|
|
2）设置项目符号为图片
|
|
list-style-image:url("");
|
|
|
|
3）设置项目符号的位置
|
|
list-style-position:;
|
|
outside 默认值
|
|
inside
|
|
|
|
4）简写
|
|
list-style::
|
|
*/
|
|
a{
|
|
text-decoration: none;
|
|
}
|
|
li{
|
|
/*list-style-type: none;*/
|
|
/*list-style-image: url("images/img1.jpg");*/
|
|
/*list-style-position: inside;*/
|
|
list-style: none;
|
|
}
|
|
|
|
</style>
|
|
```
|
|
|
|
### 5 表格属性
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
5、表格的属性
|
|
1）表格的宽高,行的高度,单元格的宽高等
|
|
width:;
|
|
height:;
|
|
2）背景属性
|
|
background:;
|
|
3）表格内容的水平对齐方式
|
|
text-align:left|center|right;
|
|
4）设置单元格内容的垂直对齐方式(写在tr或者td上)
|
|
vertical-align:middle|top|bottom;
|
|
5）边框
|
|
border:;
|
|
6）内容距边框的距离
|
|
padding:;
|
|
7）边框折叠(相当于cellspacing="0")
|
|
border-collapse: collapse;
|
|
8）边框之间的距离
|
|
border-spacing:;
|
|
*/
|
|
table{
|
|
width: 1200px;
|
|
height: 400px;
|
|
background-image: url("images/img1.jpg");
|
|
text-align: center;
|
|
/*border-collapse: collapse;*/
|
|
border-spacing: 10px;
|
|
}
|
|
tr{
|
|
vertical-align: top;
|
|
}
|
|
.odd{
|
|
background-color: red;
|
|
}
|
|
.even{
|
|
background-color: green;
|
|
}
|
|
|
|
</style>
|
|
```
|
|
|
|
### 6 overflow:hidden
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
6、overflow
|
|
设置内容溢出元素框怎么处理
|
|
visible 默认值
|
|
hidden 溢出部分隐藏
|
|
scroll 显示滚动条
|
|
auto 自动,当有内容溢出,显示滚动条;没有内容溢出,不显示滚动条
|
|
|
|
7、一行文字溢出省略号显示
|
|
//文字在同一行显示
|
|
white-space:nowrap;
|
|
//内容溢出隐藏掉
|
|
overflow:hidden;
|
|
//文字溢出省略号显示
|
|
text-overflow:ellipsis;
|
|
|
|
*/
|
|
.box{
|
|
width: 300px;
|
|
height: 300px;
|
|
background-color: deepskyblue;
|
|
/*overflow: hidden;*/
|
|
/*overflow: scroll;*/
|
|
overflow: auto;
|
|
}
|
|
.box1{
|
|
width: 300px;
|
|
height: 100px;
|
|
background-color: palevioletred;
|
|
/*三个缺一不可*/
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 7 行高间距
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
7、字符之间的距离
|
|
letter-spacing:;
|
|
可取正负
|
|
|
|
8、行高
|
|
设置一行文字的高度
|
|
line-height:;
|
|
可以取值px number(行高等于当前字体大小乘以数字)
|
|
当行高等于高,一行文字垂直居中
|
|
|
|
9、元素的透明度
|
|
opacity:;
|
|
取值0-1
|
|
0：完全透明
|
|
1：不透明
|
|
|
|
|
|
*/
|
|
.box1{
|
|
/*letter-spacing: 10px;*/
|
|
letter-spacing: -5px;
|
|
}
|
|
.box2{
|
|
width: 300px;
|
|
height: 100px;
|
|
background-color: skyblue;
|
|
/*line-height: 50px;*/
|
|
font-size: 20px;
|
|
line-height: 5;
|
|
}
|
|
.box3{
|
|
width: 300px;
|
|
height: 300px;
|
|
background-color: pink;
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### AAAAAAAAA8 选择器
|
|
|
|
```html
|
|
<style>
|
|
/*
|
|
二、关系选择器
|
|
利用HTML元素之间的关系
|
|
1、子代选择器 >
|
|
范围：选中所有直接子代(儿子)
|
|
2、后代选择器 空格
|
|
范围：选中所有的后代(包含子代)
|
|
3、相邻兄弟选择器 +
|
|
范围：挨着后面的一个兄弟
|
|
4、通用兄弟选择器 ~
|
|
范围：后面符合条件的所有兄弟
|
|
|
|
|
|
三、伪类选择器
|
|
冒号连接,表示一种状态
|
|
:link 点击之前(只适用于a)
|
|
:visited 点击之后(只适用于a)
|
|
:hover 鼠标悬停(适用于所有元素)
|
|
:active 鼠标按下(适用于所有元素)
|
|
|
|
注意：当四个选择器同时存在于一个元素,必须按着先爱后恨的原则(L_V_H_A)
|
|
|
|
C3新增选择器
|
|
:first-child 第一个子元素是...
|
|
:last-child 最后一个子元素是....
|
|
:nth-child(number|odd|even|倍数) 第几个子元素是...
|
|
|
|
:first-of-type 第一个子元素
|
|
:last-of-type 最后一个子元素
|
|
:nth-of-type(number|odd|even|倍数) 第几个子元素
|
|
#getVacBox>div:nth-of-type(2)
|
|
#getVacBox下的第二个子元素
|
|
|
|
:empty 空的子元素(子元素不能包含任何内容)
|
|
:not(选择器) 否定
|
|
|
|
表单：
|
|
:focus 获取焦点时的样式
|
|
:checked 被选中时的样式(配合单选按钮和多选按钮使用)
|
|
|
|
*/
|
|
.box>p:not(.two){
|
|
color: red;
|
|
}
|
|
input:focus{
|
|
width: 200px;
|
|
height: 50px;
|
|
}
|
|
input:checked{
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
|
|
/*
|
|
四、伪对象选择器 伪元素选择器
|
|
在元素前面或者元素后面插入一个不存在的元素(伪元素)
|
|
|
|
在元素内部的最前面插入
|
|
:before|::before{
|
|
content:"";
|
|
}
|
|
|
|
在元素内部的最后插入
|
|
:after|::after{
|
|
content:"";
|
|
}
|
|
|
|
五、属性选择器
|
|
利用HTML的属性
|
|
[属性] 选中有此属性的所有元素
|
|
[属性=属性值]
|
|
元素[属性=属性值]
|
|
元素[属性^=值] 以当前值开头
|
|
元素[属性$=值] 以当前值结尾
|
|
元素[属性*=值] 包含当前值
|
|
|
|
*/
|
|
/*[class]{
|
|
color: red;
|
|
}
|
|
[type]{
|
|
width: 200px;
|
|
height: 50px;
|
|
}
|
|
[class=box]{
|
|
color: green;
|
|
}
|
|
div[class=box]{
|
|
color: orange;
|
|
}*/
|
|
|
|
p[class*=o]{
|
|
color: orange;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## 章节六 盒模型
|
|
|
|
```css
|
|
box-sizing: content-box|border-box|inherit;
|
|
/*
|
|
content-box标准盒模型，宽高定义内容大小
|
|
border-box怪异盒模型ie，宽高定义边框以内
|
|
inherit继承父元素
|
|
*/
|
|
```
|
|
|
|
```html
|
|
<style>
|
|
/*
|
|
三、弹性盒模型 伸缩盒模型 flexbox
|
|
主要用于移动端布局
|
|
目的是设置子元素排列、对齐和分配剩余空白空间
|
|
|
|
名词：
|
|
父元素——弹性容器
|
|
子元素——弹性项目
|
|
主轴——默认为x轴
|
|
侧轴——默认为y轴
|
|
|
|
注意：float在弹性盒模型中不生效
|
|
|
|
1、父元素上的属性
|
|
1）开启弹性盒模型
|
|
display:flex;
|
|
子元素默认水平排列
|
|
|
|
2）设置子元素的排列方式(设置弹性盒的方向)
|
|
flex-direction:;
|
|
row 默认值 子元素从左往右排列
|
|
row-reverse 子元素从右往左排列
|
|
column 子元素从上往下排列
|
|
column-reverse 子元素从下往上排列
|
|
|
|
3）设置子元素在主轴的对齐方式
|
|
默认主轴为x轴,侧轴为y轴;当子元素垂直排列时,y轴为主轴,侧轴为x轴
|
|
justify-content:;
|
|
flex-start 默认值 弹性盒的开始
|
|
flex-end 弹性盒的结束
|
|
center 居中
|
|
space-between 在子元素之间平均分配父元素剩余的空间
|
|
space-around 在子元素四周分配父元素剩余的空间,两端是中间的一半
|
|
|
|
4）设置子元素在侧轴的对齐方式
|
|
align-items:;
|
|
flex-start 默认值 弹性盒的开始
|
|
flex-end 弹性盒的结束
|
|
center 居中
|
|
|
|
2、写在子元素上的属性
|
|
flex-grow:number;
|
|
子元素占父元素剩余空间的比例
|
|
*/
|
|
</style>
|
|
```
|
|
|
|
### 厂商前缀
|
|
|
|
```html
|
|
<style>
|
|
/*
|
|
2、浏览器内核
|
|
渲染引擎
|
|
作用：解析HTML、css、JavaScript
|
|
|
|
3、厂商前缀
|
|
浏览器对C3新特性的支持
|
|
|
|
浏览器 厂商前缀 内核
|
|
谷歌 -webkit- blink
|
|
苹果 -webkit- webkit
|
|
火狐 -moz- gecko
|
|
欧朋 -o- blink
|
|
IE -ms- trident
|
|
|
|
*/
|
|
body{
|
|
-webkit-width:200px;
|
|
-moz-width:200px;
|
|
-o-width:200px;
|
|
-ms-width:200px;
|
|
width: 200px;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## 章节七 浮动和定位
|
|
|
|
### 1 浮动和清除
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
1、浮动
|
|
1）作用
|
|
①写图片环绕技术
|
|
②布局(块级元素水平显示)(HTML所有元素都可以浮动)
|
|
|
|
2）语法
|
|
float:;
|
|
none 默认值
|
|
left 左浮动
|
|
right 右浮动
|
|
|
|
3）原理
|
|
元素浮动后排除到普通文档流之外
|
|
元素浮动后在页面不占据位置(原位置不保留)
|
|
浮动是碰到父元素的边框或者浮动元素的边框就会停止
|
|
浮动不会重叠
|
|
元素只有左右浮动
|
|
元素浮动后都转换为块级元素
|
|
|
|
|
|
4）清除浮动的影响
|
|
如果父元素不设置高度,默认高度由内容撑开,当子元素浮动后,在页面中不占据位置,这时候父元素的高度会坍塌,对后面的元素会产生影响
|
|
|
|
清除浮动的影响：
|
|
①浮动元素的父元素设置高度(高度已知)
|
|
②浮动元素的父元素加overflow:hidden|auto;(自动找高,加了overflow属性后元素开启了BFC格式:块级格式上下文,就是变为独立的一块,子元素不会再布局上影响父元素)
|
|
③受影响的元素加clear:left|right|both;(父元素的高度没有找到)
|
|
④空div法(页面新增很多空div元素)
|
|
浮动元素后加一个空div
|
|
空div{clear:both;}
|
|
⑤伪对象法
|
|
浮动元素的父元素::after{
|
|
content:"";
|
|
display:block;
|
|
clear:both;
|
|
}
|
|
|
|
*/
|
|
</style>
|
|
```
|
|
|
|
### 2 display
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
2、display
|
|
规定了元素应该是什么框类型
|
|
属性值：
|
|
1）inline 行内元素
|
|
2）block 块级元素
|
|
3）inline-block 行内块 即在同一行显示,又可以设置宽高
|
|
常见行内块：img、input、button等
|
|
行内块会识别代码之间的空白
|
|
4）none 隐藏 隐藏后不占据位置
|
|
5）flex 弹性盒模型
|
|
6）table-cell 单元格
|
|
*/
|
|
</style>
|
|
```
|
|
|
|
### 3 position
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
3、position 元素定位
|
|
属性值：
|
|
1）static 默认值 静态定位
|
|
2）relative 相对定位
|
|
相对于自己原位置定位
|
|
定位后原位置保留
|
|
配合left、right、top、bottom移动
|
|
当top、bottom、left、right同时存在,left和top的优先级大于right和bottom
|
|
当取正值,元素往右下移动;当取负值,元素往左上移动
|
|
|
|
应用场景：
|
|
①自己小范围移动
|
|
②配合绝对定位使用
|
|
|
|
3）absolute 绝对定位
|
|
相对于已经定位(static除外)的父元素定位,如果父元素没有定位,逐级往上找,最后相对于body定位
|
|
定位后原位置不保留
|
|
配合left、right、top、bottom移动
|
|
元素绝对定位后转换为块级元素
|
|
|
|
应用场景：
|
|
①形成独立的一层
|
|
|
|
|
|
4）fixed 固定定位
|
|
相对于浏览器窗口定位
|
|
定位后原位置不保留
|
|
配合left、right、top、bottom移动
|
|
元素固定定位后转换为块级元素
|
|
|
|
应用场景：
|
|
①固定在页面某个位置
|
|
|
|
4、z-index:number; 堆叠顺序
|
|
取值越大,层级越往上
|
|
可以去负值
|
|
默认值auto
|
|
必须配合定位使用(static除外)
|
|
|
|
|
|
*/
|
|
|
|
</style>
|
|
```
|
|
|
|
## 章节八 C3新特性
|
|
|
|
### 1 圆角`border-radius`
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
1、圆角
|
|
border-radius:;
|
|
value:表示四个角
|
|
value value:左上角和右下角 右上角和左下角
|
|
value value value:左上角 右上角和左下角 右下角
|
|
value value value value:左上角 右上角 右下角 左下角
|
|
取值：px %
|
|
|
|
画圆：border-radius:50%;正方形
|
|
*/
|
|
|
|
</style>
|
|
```
|
|
|
|
### 2 阴影`box-shadow`
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
2、盒阴影
|
|
box-shadow:水平偏移位置 垂直偏移位置 模糊度 阴影尺寸 颜色 位置;
|
|
必须 必须 可选 可选 可选 可选
|
|
正负 正负 正值 正负 outset|inset
|
|
|
|
3、字阴影
|
|
text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色;
|
|
*/
|
|
.box:hover{
|
|
/*box-shadow: -10px -10px 30px -10px green inset;*/
|
|
/*box-shadow: 0 10px 30px gold;*/
|
|
box-shadow: 0 0 30px inset;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 3 背景渐变`background-image:-o-linear-gradient(,,)`
|
|
|
|
|
|
|
|
AAAAAAAAAAAAAA 上面的元素需要加position 不然会被覆盖
|
|
|
|
```html
|
|
<style>
|
|
/*
|
|
3、背景渐变
|
|
1）属性
|
|
background-image:;
|
|
简写：background:;
|
|
2）属性值
|
|
①线性渐变
|
|
background-image:linear-gradient(方向,颜色1,颜色2,..);
|
|
注意：
|
|
方向可以省略,默认从上往下渐变
|
|
取值：
|
|
a、关键词 to right,to top,to right bottom等
|
|
b、角度 deg(弧度)顺时针180为正
|
|
②径向渐变
|
|
background-image:radial-gradient(渐变的中心点,渐变的形状,颜色1,颜色2,...);
|
|
注意：
|
|
a、渐变的中心点默认为宽高的一半
|
|
可以设置top tight left bottom
|
|
注意兼容性问题
|
|
|
|
b、渐变的形状默认为椭圆
|
|
可以设置为circle
|
|
|
|
*/
|
|
.box{
|
|
|
|
/*background-image: linear-gradient(-120deg,red,orange,yellow,green,blue,purple);*/
|
|
background-image: -webkit-radial-gradient(top,circle,red,orange,yellow,green);
|
|
background-image: -moz-radial-gradient(top,circle,red,orange,yellow,green);
|
|
background-image: -o-radial-gradient(top,circle,red,orange,yellow,green);
|
|
background-image: -ms-radial-gradient(top,circle,red,orange,yellow,green);
|
|
background-image: radial-gradient(top,circle,red,orange,yellow,green);
|
|
}
|
|
.box1{
|
|
width: 60px;
|
|
height: 60px;
|
|
background-image: linear-gradient(120deg,#ff3149,#ff64a6);
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 4 位移与旋转transform
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
4、转换 变型
|
|
1）作用
|
|
使元素在位置或者形状上发生一定的改变
|
|
|
|
2）属性
|
|
transform:translate() rotate() scale() skew();
|
|
|
|
3）属性值
|
|
①位移 单位px %
|
|
transform:translate(x,y);
|
|
当只取一个值,表示水平方向移动的距离
|
|
当取两个值,表示水平方向和垂直方向移动的距离
|
|
|
|
取正值,往右下移动;取负值,往左上移动
|
|
|
|
transform:translateX();
|
|
transform:translateY();
|
|
|
|
3D位移：
|
|
transform:translate3D(x,y,z);
|
|
|
|
②旋转 单位deg(弧度)
|
|
transform:rotate(30deg);
|
|
取正值,顺时针旋转
|
|
取负值,逆时针旋转
|
|
rotate3d(x,y,z,angle) 定义 3D 旋转。
|
|
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
|
|
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
|
|
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
|
|
|
|
默认元素的中心点为元素的正中心,宽高的一半
|
|
可以通过transform-origin:; 修改元素的中心点
|
|
transform-origin: right bottom;
|
|
|
|
③缩放 取值number 取值0-1：缩小 >1:放大 默认1
|
|
transform:scale(x,y);
|
|
当只取一个值,等比例缩放
|
|
当只取两个值,表示水平方向和垂直方向
|
|
|
|
transform:scaleX();
|
|
transform:scaleY();
|
|
|
|
④倾斜 单位deg
|
|
transform:skew(x,y);
|
|
当只取一个值,表示水平方向倾斜的弧度
|
|
当取两个值,表示水平方向和垂直方向倾斜的弧度
|
|
|
|
transform:skewX();
|
|
transform:skewY();
|
|
|
|
|
|
*/
|
|
.box{
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: red;
|
|
margin: 100px;
|
|
/*transform-origin: right bottom;*/
|
|
}
|
|
.box:hover{
|
|
/*transform: translate(-20px,-30px);*/
|
|
/*transform: translateX(50px);*/
|
|
/*transform: translateY(50px);*/
|
|
/*transform: translate3d(50px,50px,0);*/
|
|
|
|
/*transform: translate(50px,50px) rotate(-60deg);*/
|
|
|
|
/*transform: scale(1.5,.8);*/
|
|
/*transform: scaleX(1.5);*/
|
|
/*transform: scaleY(1.5);*/
|
|
|
|
transform: skew(30deg,40deg);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 5 过渡`transition`
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
5、过渡
|
|
transition:过渡的属性 持续时间 速度变化类型 延迟时间;
|
|
transition: all 2s ease-in-out -1s;
|
|
1）作用
|
|
使元素从一个样式逐渐改变为另外一个样式
|
|
2）注意
|
|
过渡必须有触发事件
|
|
例如鼠标点击、鼠标悬停等
|
|
3）过渡的属性
|
|
①过渡的属性——必须
|
|
transition-property:属性1,属性2,...;
|
|
简写all
|
|
|
|
可以过渡的属性：
|
|
a、取值为颜色
|
|
b、取值为数值
|
|
c、阴影
|
|
d、转换
|
|
|
|
②过渡的时间——必须
|
|
transition-duration:;
|
|
默认为0s|0ms
|
|
取值s|ms
|
|
1s=1000ms
|
|
|
|
③过渡的速度变化类型——可选
|
|
transition-timing-function: ;
|
|
取值：
|
|
ease 默认值 先加速后减速
|
|
ease-in 加速
|
|
ease-out 减速
|
|
ease-in-out 先加速后减速
|
|
linear 匀速
|
|
|
|
④过渡的延迟时间——可选
|
|
transition-delay:;
|
|
默认0s|0ms
|
|
取值正负
|
|
当取负值,表示把这段时间的效果跳过
|
|
当取正值,表示多久以后出发这个过渡
|
|
|
|
4）简写
|
|
transition:过渡的属性 过渡的持续时间 过渡的速度变化类型 过渡的延迟时间;
|
|
*/
|
|
.box{
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: red;
|
|
/*transition-property: all;
|
|
transition-duration: 2s;
|
|
transition-timing-function: ease-in-out;
|
|
transition-delay: -1s;*/
|
|
|
|
transition: all 2s ease-in-out -1s;
|
|
|
|
}
|
|
.box:hover{
|
|
width: 1200px;
|
|
background-color: green;
|
|
border-radius: 100px;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 6 动画`animation`
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
6、animation动画
|
|
1）作用
|
|
使元素从一个样式逐渐变为另外一个样式
|
|
可以控制过程
|
|
|
|
过渡只需要控制开始和结束的状态
|
|
|
|
2）定义动画的过程
|
|
@keyframes name {
|
|
0%|from{
|
|
css样式
|
|
}
|
|
任意百分比{
|
|
css样式
|
|
}
|
|
100%|to{
|
|
css样式
|
|
}
|
|
}
|
|
|
|
3）调用动画
|
|
animation:name 持续时间 速度变化类型 延迟时间 播放次数(number|infinite) 播放方向(alternate) 动画停在最后一帧(forwards);
|
|
必须 必须 可选 可选 可选 可选
|
|
|
|
4）动画的单个属性
|
|
animation-name: ; 动画名称——必须
|
|
animation-duration: ; 动画的持续时间——必须 默认0s|0ms
|
|
animation-timing-function: ; 动画的速度变化类型——可选 默认ease 取值ease-in ease-out ease-in-out linear
|
|
animation-delay: ; 动画的延迟时间——可选 默认0s|0ms 取正负
|
|
animation-iteration-count: ; 动画的播放次数——可选 取值number|infinite
|
|
animation-direction: ; 动画的播放方向——可选 取值alternate:偶数次倒序播放
|
|
animation-fill-mode: ; 动画停在最后一帧——可选 取值forwards
|
|
|
|
animation-play-state:; 动画的播放状态 默认running 取值paused 一般配合hover使用
|
|
|
|
|
|
*/
|
|
.box{
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: red;
|
|
}
|
|
.box:hover{
|
|
animation:change 3s ;
|
|
}
|
|
@keyframes change {
|
|
0%{
|
|
border-radius: 50%;
|
|
}
|
|
25%{
|
|
background-color: green;
|
|
}
|
|
50%{
|
|
transform: rotate(360deg);
|
|
}
|
|
75%{
|
|
width: 1200px;
|
|
background-color: pink;
|
|
}
|
|
100%{
|
|
background-color: #000;
|
|
}
|
|
}
|
|
@keyframes dong{
|
|
from{
|
|
top:0px;
|
|
}
|
|
to{
|
|
top:200px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
```
|
|
|
|
|
|
|
|
## 章节九 响应式布局
|
|
|
|
### 1 媒体查询
|
|
|
|
768px-992px
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
1、媒体查询
|
|
1）作用
|
|
实现响应式布局
|
|
2）语法
|
|
①内部引入
|
|
//移动端
|
|
@media screen and (max-width:768px){}
|
|
//iPad端
|
|
@media screen and (max-width:992px) and (min-width:768px){}
|
|
//pc端
|
|
@media screen and (min-width:992px){}
|
|
|
|
②外部引入
|
|
//移动端
|
|
<link rel="stylesheet" href="" media="screen and (max-width:768px)"/>
|
|
//ipad端
|
|
<link rel="stylesheet" href="" media="screen and (min-width:768px) and (max-width:992px)"/>
|
|
//pc端
|
|
<link rel="stylesheet" href="" media="screen and (min-width:992px)"/>
|
|
|
|
*/
|
|
/*
|
|
移动端 背景颜色 红色
|
|
iPad端 背景颜色 绿色
|
|
pc端 背景颜色 蓝色
|
|
|
|
*/
|
|
/*移动端*/
|
|
@media screen and (max-width: 768px){
|
|
body{
|
|
background-color: red;
|
|
}
|
|
}
|
|
/*ipad端*/
|
|
@media screen and (min-width: 768px) and (max-width: 992px){
|
|
body{
|
|
background-color: green;
|
|
}
|
|
}
|
|
/*pc端*/
|
|
@media screen and (min-width: 992px){
|
|
body{
|
|
background-color: blue;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
```
|
|
|
|
## 2 响应式
|
|
|
|
```html
|
|
<style type="text/css">
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.items{
|
|
height: 450px;
|
|
background-color: red;
|
|
float: left;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.items>div{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: green;
|
|
}
|
|
/*移动端*/
|
|
@media screen and (max-width: 768px) {
|
|
.items{
|
|
width: 50%;
|
|
}
|
|
}
|
|
/*iPad端*/
|
|
@media screen and (min-width: 768px) and (max-width: 992px) {
|
|
.items{
|
|
width: 33%;
|
|
}
|
|
}
|
|
/*pc端*/
|
|
@media screen and (min-width: 992px) {
|
|
.items{
|
|
width: 25%;
|
|
}
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 3 多列（报纸效果）
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
2、多列
|
|
设置元素中的内容分为多少列
|
|
1）属性
|
|
①设置列的数量
|
|
column-count:number;
|
|
②设置列之间的间隙
|
|
column-gap:;
|
|
③设置列之间的边框
|
|
column-rule:style width color;
|
|
|
|
*/
|
|
.box{
|
|
width: 600px;
|
|
height: 500px;
|
|
border: 3px solid red;
|
|
column-count: 3;
|
|
column-gap: 30px;
|
|
column-rule: 3px solid red;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
|
|
|
|
## 章节十 雪碧图
|
|
|
|
### 雪碧图
|
|
|
|
```html
|
|
<style type="text/css">
|
|
/*
|
|
1、雪碧图 css精灵 css sprite
|
|
1）定义
|
|
雪碧图是一项图片整合技术
|
|
把许多小图放到一张大图上面
|
|
|
|
2）优点
|
|
①减少页面http请求
|
|
②减少图片字节
|
|
③减少命名困扰
|
|
|
|
3）原理
|
|
background-image:;
|
|
background-position:;
|
|
|
|
|
|
*/
|
|
.box1{
|
|
width: 200px;
|
|
height: 50px;
|
|
background-image: url("images/spirite.png");
|
|
|
|
}
|
|
.box2{
|
|
width: 65px;
|
|
height: 65px;
|
|
background-image: url("images/spirite.png");
|
|
background-position: -378px 0;
|
|
}
|
|
.box3{
|
|
width: 118px;
|
|
height: 37px;
|
|
background-image: url("images/spirite.png");
|
|
background-position: -393px -451px;
|
|
|
|
}
|
|
</style>
|
|
```
|
|
|
|
|