阶段一前端开发基础

初始HTML

本阶段重难点

3.29小时40小节4个模块

CSS选择器

盒模型

CSS三大特性

浮动和清楚浮动

CSS四种定位

CSS进阶

CSS3

前端工程师需要会的PS取图

案例/项目网页布局

前端基础开发::学习目标
学习内容Html+CSS（5、3）
最终目标：(做出如下静态网站，以达到熟练使用html+Css，精通网页布局的目的。在网上看到的任何一个网站都可以把他复刻下来)
+品优购电商网站
+博学谷官网静态网页
+猫眼视频网站
+京东商城
+淘宝商城
+学成网案例-----------------------------------------------------------------------------------------
基础学习路线HTML5基础：
+课时20%
学习常见的HTML5基础，主要学习最常见的没有兼容性的HTML标签CSS3基础：
+课时50%
学习CSS3基础，主要学习最常用的没有兼容性的CSS样式，利用前面学习的标签完成传统PC端网页布局
可以做到常见的企业级静态网页开发H5C3
+课时10%
学习HTML5新增的标签、CSS3样式，有一定的兼容性，可以与未来更好的接轨静态网页项目
+课时20%
综合以前学习的知识点，贴近于实际开发，制作品优购电商网站，完成首页，列表页，注册页制作
目的：学习网页制作实际开发制作流程规范

vscode使用

shift+alt +上下就可以复制一行

光标定在哪一行复制的时候会默认复制全行

放大缩小CTRL±

vscode是微软推出的非常轻量级的好用的编辑器

分为资源管理区还有代码区

+文件管理功能open floder

+可以在设置首选项里面去选择常用的主题格式

tab可以自动补齐

li{中国}*2

在ol里面可以加type选择用什么表示顺序

标签中多属性用空格隔开

可以设置文件项中的自动保存，要不然有时候会忘记保存或者写完要测试的时候没保存好尴尬啊

想学习快捷键的可以在左下角的设置里面找到快捷键或者快捷键映射，达到自己定义或者查找默认插件的目的

插件	作用
Chinese (Simplified) Language Pack for VS Code	中文（简体）语言包
Open in Browser	右击选择浏览器打开html文件
JS-CSS-HTML FormatterSJ	每次保存，都会自动格式化js css 和html 代码
Auto Rename Tag	自动重命名配对的HTML / XML标签
CSS Peek	追踪至样式

HTML简介

内容：
+网页
+常用浏览器
+Web标准要求：
+能够说出网页的基础组成
+能够说出什么是HTML
+能够说出常用的浏览器
+能够说出Web标准的三大组成部分

网页

+什么是网页？

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合

网站是网页中的一页，通常是HTML格式的文件，他要通过浏览器来阅读

网页是构成网页的基本元素，他通常有图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html或.html后缀结尾的文件，因此将其俗称为HTML文件。

+什么是html？

HTML：超文本标记语言，他是一种专门来描述网页的语言，他不是编程语言而是一种标记语言，里面是一整套各种功能的标签

所谓的超文本有两层含义

1.它可以加入图片、声音、动画、多媒体等内容（超越了文本的限制）

2.它可以从一个文件跳到另外一个文件，与世界各地的主机的文件链接（超级链接文本）

+网页是怎么形成的？

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析展现给用户的

前端人员开发代码->浏览器显示代码（解析、渲染）->生成最后的web网页

网页总结：

网页是由图片、链接、文字、声音、视频等元素组成的其实就是一个后缀是.html的html文件

网页生成制作：由前端人员书写的HTML文件，然后浏览器打开解析、渲染，就可以看到网页

HTML：超文本标记语言，用来制作网页的一门标记语言，由各种功能的标签组成

常用的浏览器

浏览器是网页的显示、运行的平台。常用的浏览器有EG、火狐、谷歌、Opera、safari

我们做前端的需要对所有的浏览器进行网页测试

浏览器	内核	备注
firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器的内核
Opera/chrome/EG	Blink（统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核，是webkit的二次开发做了功能的增强）	chrome/opera浏览器内核。Blink其实是Webkit的分支
IE	Trident	IE、猎豹安全、360极速、百度的内核（有一部分IE浏览器兼容模式用的是Trident，高速模式用多个是webkit采取的是双内核制）

目前国内浏览器大部分会采用webkit/blink内核

Web标准

Web标准是由W3C组织和其他标准化组织指定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织

为什么需要web标准

不同浏览器开发的浏览器不同，解析渲染的标准不一样，那么他显示的页面或者排版就会有差异

为了达到相同的效果可能要开发很多个版本

Web标准的构成

主要包括**结构(Structure)、表现(Presentation)、行为(Behavior)**三个方面

标准	说明
结构	结构用于对网页元素进行整理分类，现阶段主要学习的是Html
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学习的是JavaScript

用人来做比喻：结构就是骨架、表现就是皮肉。所以学完CSS、HTML就可以做出静态网站，就有一个完整的人出现了，但是这个人是不会动的。加上JavaScript就可以动了。

Web标准提出的最佳体验方案：结构、样式、行为分离。

简单理解就是：结构写道HTML文件中，表现写道CSS文件中，行为写道JavaScript文件中

HTML标签

内容：
+HTML语法规范
+HTML基本结构标签
+开发工具
+HTML常用标签
+HTML中的注释和特殊字符要求：
+能够说出标签的书写规范
+能够写出HTML的骨架标签
+能够写出超链接标签
+能够写出图片标签并说出alt和title的区别
+能够说出相对路径的三种形式

HTML语法规范

第一个HTML网页

每一个网页都会有一个基本的结构标签（也称为股价标签），页面内容也是在这些基本标签上书写的。

HTML页面也称为HTML文档

标签名	定义	说明
	HTML标签	页面中最大的标签，我们称之为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	设置页面的网页名
	文档的主题	元素包含文档的所有内容，页面内容基本都是放到body里面的

文档类型声明标签<第一行>

要求必须写在第一行，他不是html标签，是一个文档类型的声明标签，所以多出来了一行，只有在中的才是html标签

“”文档类型声明，作用就是告诉浏览器使用哪一种HTML版本来显示网页

这句代码的意思是：当前页面采取的是HTML5版本来显示网页

lang语言种类

用来定义当前文档显示的语言

+en定义语言为英文网页

+zh-CN定义语言为中文网页

其实对文档来说定义中文也可以写英文，定义英文也可以写中文

这些对于浏览器来说是个警示作用，（改成其他语言）显示内容会有错误

字符集

万国码

html常用标签

学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是指标签的含义，即这个标签是用来干嘛的

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。用标签的时候最好使用语义的标签，因为他是语义化的

加完标签后刷新才会出现效果

写在html中的不管隔多少行都会自动整合除非用了标签

标题标签	双标签	h1-h6	每个标签都是独占一行，重要性递减
段落标签、换行标签	双标签		这两个都是独占一行的，段落和段落之间有空隙，且会根据浏览器窗口大小自动换行；br是break的缩写，和段落标签不一样，段落垂直上只有空隙会大过换行标签
加粗	双标签	或者	推荐使用语义化
删除线	双标签	或者	推荐使用语义化
倾斜	双标签	或者	推荐使用语义化
下划线	双标签	或者	推荐使用语义化
盒子标签	双标签		块状元素，可以用display改成行内块元素。span意为跨度、跨距
盒子标签			块状元素，独占一行。division表示分割、分区
图像	单标签		src(图片路径)指定图片来源，alt(文本)替换文本，图像不能显示的文字。title(文本)提示文本鼠标放到图像上显示的文字。width(像素)设置图像的宽度，height(像素)设置图像的高度，border(像素)设置图像的外边框粗细
超链接标签	双标签	点击内容跳转	target表示的是目标窗口的弹出方式a是anchor缩写。属性href用于指定链接目标的url地址，当为标签应用href是具有了超链接的功能。target默认是—self,—blank代表新窗口打开

还有sup和sub用来表示次方还有脚标

设置图像的宽高的时候，如果只修改宽或者只修改高的话对应的高或者宽会自动等比例缩放，不会失真

图像标签可以有很多属性但是必须写在src后面其他属性没有先后顺序并且以空格分隔。属性采用的是键值对的形式定义的

目录文件夹：存放了所有素材的文件夹

绝对路径：从根目录开始（打开目录文件夹的第一层就是根目录）

相对路径：从当前文件开始

同一级往上一级走 . ./ 往下一级走 /

相对路径/

绝对路径\

URL用的是/其实就是在他服务器上的路径往下找

超链接分类

外部链接：链接外部网站

内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如

空连接：href = “#”（表示的是跳到（本页面刷新了）本页面，）锚点不管在哪里，点击后都会刷新到相应的页面

下载链接：如果href里面是一个文件或者压缩包，会下载这个文件

title=悬浮提示框

网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接（实质就是两个a中间的内容点击可跳转）

锚点链接：当我们点击链接可以快速定位到页面中的某个位置(其实这里用的是id选择器)

+加锚点：加一个id（也可以不用id，用name也是可以的）

+设置href = “#id”

跨页面跳转：

href里面加（比如想要跨页面到005文件夹中的html）005.html#锚点

特殊字符(可以去查特殊字符表)/转义字符

有很多特殊字符无法显示需要特殊字符表来帮忙显示

$nbsp：一个空格

$lt <

$gt >

$copy 版权

$reg 标签

一个小tips ，通常来说img是内联元素，为了img元素设定宽高

我们一上来就把img设置display成block

包裹img的a也要设置成block

属性和属性本身是没有差别的，差别是 * 属性是给ie去识别的，老版本的ie能够识别的是 属性

所以如果在属性底下再加一行* 属性就可以避免没有被读到的问题。但是IE现在已经不用了

在计算盒子和盒子之间距离的时候我们是不用padding的，因为padding会把整个高度拉高。

IE6里面有个bug就是如果

+两个都浮动

+margin top left都是零则

结果：margin left变double

把display变inline

宽度不够的时候会盒子会被挤到最下面

文字在调试的过程中可能会引起盒子与盒子之间的距离发生错误

写header的时候如果没有给出height的时候如果做了浮动的话height的结果是零，是因为这个时候内容是溢出的，他是不做自适应性计算的，但是浏览器会做自适应性计算，所以在设定更宽的盒子的时候多出来的部分会被撑开无法正常显示（IE做了自适应可以正常显示）。所以这时候用了浮动我们无法去定义一个高度

解决方案就是overflow：hidden；

原理：浮动之后会让子元素脱离文档流，当所有元素都脱离文档流，而于此董事父元素没有设定高度，高度会塌陷成0。浮动元素会对后面元素排版产生影响。一个是浮动元素后面的同级元素，一个是浮动元素父元素后面的同级元素。为了避免这种现象我们可以用overflow：hidden：隐藏溢出，让父元素感知到这些浮动元素的高度（其实就是浮动的清除，但是这里做的是自适应高度的计算，父元素没有设定高度，所以不会被裁剪）

img

gif：支持透明支持动画最多支持256种颜色

png：支持透明不支持动画

jpg：不支持透明不支持动画支持多种颜色

HTML制作表格和列表

一个网页有三个最关键的元素文字、图片、超链接

表格：

早期是用来做排版的那个时候没有css

目前主要是用来展示数据的

< table >< /table >

<table  width="400"  height="70" align="center"(让他水平居中，还有个align-tetx的属性是让文本居中，这个也可以让文本居中；垂直居中用的是valign) border="1"(加一个像素的边框) cellspacing="0"(单元格和单元格之间的空隙)所以就会合并成两个像素>
//caption定义表格标题
<caption>学生成绩</caption>
//tr定义行
<thead>
<tr><th>学号</th><th>姓名</th><th>语文</th><th>数学</th>
</tr>
</thead>
<tbody>
<tr><td>10001</td>    <td>张三</td>  <td>98</td>    <td>100</td>
</tr>
<tr><td>10002</td>    <td>李四</td>  <td>96</td>    <td>100</td>
</tr>
<tr><td>10003</td>    <td>王五</td>  <td>97</td>    <td>100</td>
</tr>
</tbody>
<tfoot></tfoot>
< /table >

可以通过width height去设置宽高

边框合并也可以通过css样式设置

table{border-collapse:collapse;
}

border-collapse可能的样式
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

border的css使用还可以这样写边框粗细、实线、颜色

*{border: 1px solid black;
}

合并行、列

合并行rowspan（要确保被合并的其他单元格是空的）

合并列collspan（要确保被合并的其他单元格是空的）

作业：个人简历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zlMnV6px-1624481080686)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210621125314138.png)]

HTML表单控件

<form action="指定表单提交的地址" method="GET(默认)/POST表示表单的提交方式" enctype="编码的类型"><input type="text" name="" id="" disabled maxlength="文本框的最大长度" placeholder="" disabled="disable"></input>//文本框<input type="password" name="" id=""></input>//密码，内容会被遮掩<input type="radio" name="sex" id=""></input>//单选<input type="radio" name="sex" id=""></input>//单选，否则单选无法表示（两个name一样的情况下会互斥以达到单选的效果）<input type="checkbox" checked name="" id="">多选</input><input type="file" name="" id="">上传文件</input><input type="submit" name="" id="">提交</input><input type="button" name="" id="">按钮</input><input type="reset" name="" id="">重置</input><input type="image" src="" alt="" name="" id="">图片提交按钮</input>
你最近最想去的城市
<select size="" multiple>//下拉框<option value="">成都</option><option value="">杭州</option><option value="">上海</option><option value="">武汉</option><option value="">苏州</option>
</select>
<textarea cows="可以显示多少行" cols="可以显示多上列">文本框默认是可以改变大小的但是这个是不好的</textarea>
</form>

表单靠的是表单元素来实现的

这里有快速实现input:text

真实从表单获取某个值数据靠的是value

有些表单控件是需要人为赋予功能，有些自己就有功能

不屑表单提交地址数据就会提交到当前页面

name的作用是不填则数据无法正确发送，所以name的作用其实是提交数据用的。name就相当于是key，value就是value。数据是以这样的方式提交的。需要填写数据的则不需要value，选择项的需要value。在提交类的表单元素中value里面可以用来填写默认值，然后通过js或者html5新增的功能placeholder去达到我们经常需要的那种提示文本

disabled禁用表单元素，表达的意义就是不想让别人填，只能看不能输入

小tips如果之和属性名一样可以把=和值全部去掉

checked表示的是默认选中，可用在多选或者单选中，

在下拉列表中表示默认选中的是selected，表示显示多个的是size="“下拉框选显示个数”,多个选中用的是multiple，在win中需要按住ctrl就可以实现多个选中

？之后是数据，数据和数据之间靠&隔开

初识CSS

HTML负责页面的内容、结构

CSS负责页面的样式

JS负责交互

CSS三种表达形式

行内式：在标签内加style（写一两个还可以如果大量使用这种样式则html和css代码混在一起导致无法维护）

<p style="color: green 和其他属性空格隔开最后要加；..."><p>

内嵌式：

在head里面加

外链式：

<link ref="stylesheet(样式表)" href="相关的css文件"></link>

CSS三大特性

+继承（要去看看怎么知道一个属性书否能被继承）不可继承参考1 不可继承参考2

+层叠（可以覆盖，所以可以理解的就是前端切页的过程中就是类似画画，效果是一层一层覆盖上去的叠加实现的，通过不同的选择器或者是其他方式实现精确制导，精准打击）

+优先级/权重

而对于以上三种表达样式关于第三个特性权重的体现

-在选择器里面属性值后面加 ! important是加权重的加到第一

行内样式最高（除非在选择器内部属性值后面加 ! important）> 内嵌式和外链式中，对于相同的标签的描述和他们在head中的先后有关系。后面的会把前面的覆盖
对单个标签描述：id>class>标签>*{}
对多个嵌套的标签描述：需要统计单个选择器权重之和（就慢慢加）

id：100个单位

class：10个单位

标签：1个单位

假如属性是靠继承的则权重近乎为0

如果权重相同就按照代码中选择器的顺序，后面的会把前面的覆盖。

选择器

选择器{

k:v；

}

选择器帮助我们选中指定标签的语法

id选择器 标签中用 id=“name” css样式中#name{}：id选择器的name是唯一的不可以重复使用，一般在css中用的比较少，一般在表示一个唯一东西/区域的时候会使用

类选择器 标签中用class=“name” css样式中.name{}：可以重复使用，一个标签中可以携带多个class不同的class之间要用空格隔开

标签选择器 css样式中直接标签名{}

**通配符选择器 ***{}：但是一般不太去用它，因为如果用他的话浏览器在加载时候会去把每一个标签都给加载一遍会非常麻烦非常耗内存速度就会慢下来

后代选择器 ul li{}:表示的是仅仅对ul的后代li施加效果，li可以是儿子也可以是孙子。ul和li中间用空格隔开

如果只想对儿子施加效果不想对所有后代都施加效果则可以用例如 div>p表示的是只对div的儿子p有用

并集选择器 div,p{}:用，隔开表示div和p都用到了一样的表示相当于div{xxxx}，p{xxxx}.就类似并集的那个意思。并集选择器的话不一定用的是标签，也可以是选择器和选择器。反正只要是合法的就行

**交集选择器 **div.box{}：表示的是div同时类是box才成立，就类似于类下面的方法的那个意思

伪类选择器（不同状态下元素的样式，一般针对超链接）

love hate

a：link{点击链接前
}
a：hover{鼠标碰到链接时表示的样式
}
a:visited{访问后样式
}
a:active{激活效果（按住的效果）
}

小tip li{$}表示的是生成默认的从1开始的顺序数据

div.box+tab表示的就是div中class是box

常用属性

字体

color：

+单词

+16进制#XXXXXX：一共是六位前两个表示的红色中间的是绿色最后面是蓝色，16*16-1=255，其实和RGB是一样的，RGB更方便，如果某个颜色两个值是一样的则可以省略成一个X

+RGBA模式A表示的透明度 rgb（0-255，0-255，0-255，0-1(小数可以写成.3这样的表示)）A可写可不写

相同的属性后面会把前面覆盖

小tips ：fscapture体积小可以用于取色，量取还有切图等

font-size：

设置字号

X px：多少个像素，如果不写则有个默认的在盒子模型下可以看得到，谷歌的是16px ，有的浏览器是14px

还有种单位是pt那个是印刷用的一般换算比例是3pt=4px，em=12pt=16px

如果font-size：2em；他参照的是父亲字号的两倍，如果父亲字号没有则为默认字号的两倍

font-weight：

字号加粗

100-700 400normal（可以写单词可以写数字）700bold

font-style:

调整字的外观

normal：正常

italic：变成一个斜体

oblique：外观变倾斜

font-family：

字体

font-family：“微软雅黑”,“宋体”;

因为不是所有的字体都有所以我们一般把保险的放在后面写多种字体以防没有的用去使用默认

font-variant：

font-variant：small-caps；

把小写转成大写，并且大小没什么变化，这就很离谱

字体的符合属性（简写）

行高可以不写，但是写的话就是size/行高的格式。字号字体必写

font: size/行高字体

文本属性

text-align:

设置文本水平对齐方式

center:居中对齐

right:右对齐

left:左对齐

justify：两端对齐

小tips：overflow：hidden;除了可以如上文所说做到清楚浮动，还可以做到隐藏超过设定好的边框里的文字

line-height:

设置单行文本垂直居中，多行文本做不到

设置成和height一样的时候可以做到垂直居中

text-transform:

转换大小写

uppercase：全部转成大写

lowercase：全部小写

capitalize：每个单词首字母大写，用空格作为一个单词的标识

text-decoration:

加修饰线的

none：去掉下划线

underline：加下划线

line-through:删除线

overline:上划线

text-indent:

缩进

缩进的单位有很多

em表示当前字号的两倍，也就是缩进两个字大小。比如一个字如果是20px，那么2em就是40px

这个还有一个用处:

overflow:hidden;

text-indent:-9999px;

就是先往左死里缩进，然后用hidden去隐藏。就可以达到搞掉一些不需要被看到的文字，比如超链接嵌套的文字，但是这种文字的作用是个SEO做搜索引擎的。说明这个是各个网站可以被收录。

overflow属性

letter-spacing:

文字和文字之间的距离

如果是单词的话，每一个字符都会被当成一个独立的个体来看

word-spacing:

单词与单词之间的间距，他以空格为标识

关于各种对齐的相关文档

补充一个属性

vertical-align：

垂直居中

元素（标签）显示模式属性

元素分类：

+块状/块级（可以设置宽高，独占一行，不设置宽度的时候默认宽度是父亲的100%）

div、p、h1~h6、ul、li等

+行内/内联元素（设置宽高无效，默认宽度由内容撑开，可以与其他非块级元素并排）

span、a、em、b、i、strong等

+行内块（具备行内元素和块级元素的特点，能设置宽高，并且能和其他非块级元素并排）

img、input等

通过display可以改变元素的显示模式

转成块级元素的时候要注意宽高

宽如果没设定会默认时父亲的100%

display：

+block：块状元素

+inline：行内元素

+inline-block：行内块元素

+none：元素消失（就是真的消失掉了耶）

列表属性

html中list-style-type与list-style的区别

list-style：（这是一个复合属性）

list-style的默认值为：disc outside none.

list-style-position：

设置列表项标记的位置

+outside

+inside

默认为outside

值	描述
inside	列表项标记在文本以内
outside	列表项标记在文本左侧
inherit	继承父元素的值

outside示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NDDINFIh-1624481080688)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210623170556715.png)]

inside示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wDNXcK2q-1624481080689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210623170614485.png)]

list-style-image

利用图像替换列表项的标记

list-style-type：

列表项标记的类型

+none:把列表前面的小圆点去掉

+circle：小圆点变成空心圆

+square：小圆点变成实心正方体

+disc：小圆点变成实心圆

left

值	描述
none	无标记
circle	空心圆
square	实心方块
decimal	数字，1,2,3…
decimal-leading-zero	01, 02, 03…
lower-roman	i, ii, iii, iv, v…
upper-roman	I, II, III, IV, V…
lower-alpha/lower-latin	a,b,c,d,e…
upper-alpha/upper-latin	A,B,C,D,E…
cjk-ideographic	一、二、三…

列表属性的补充

背景属性补充

浮动（将来可能会被淘汰的技术）

用div不使用浮动的时候要做成块状元素和块状元素并排的时候，通过改成行内块来是实现

但是在左块和右块；上块以及下块之间会碰见一个个白色的空隙这个是由于div会换行变成行内块时会把换行变成一个空格导致的

解决方案

+左块和右块两个div连着写（但是可读性差，不推荐使用）

+上块和下块用垂直居中那种方式middle解决

+浮动

float：

主要用于网页布局的

实现有宽高的元素的并排

+left

+right

+none

特点：

浮动后元素会脱离标准流

当子元素全部浮动后，是无法撑开父元素的，所以如果一个div包括了left和right的话，左右全部浮动后会发现这个div的宽高分别是body的100%宽以及0px的高

浮动的元素也是有高度的如果没有定义的话，是默认被子元素撑开

解决方案

+给左右的父亲div加高度（但是这个不是一个很好的方式）

+清除浮动

浮动清除（以下方式均可）

+overflow：hidden；（这是一个清除浮动的偏方；表示的是多出来的内容隐藏）

.news {background-color: gray;border: solid 1px black;overflow: hidden;*zoom: 1;}.news img {float: left;}.news p {float: right;}<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

+使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。优点：简单，代码少，浏览器兼容性好。缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。.news {background-color: gray;border: solid 1px black;}.news img {float: left;}.news p {float: right;}.clear {clear: both;}<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

+什么都不做，给浮动元素后面的元素添加clear属性

.news {background-color: gray;border: solid 1px black;}.news img {float: left;}.news p {float: right;}.content{clear:both;}<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>

+给浮动的元素的容器添加浮动（不推荐）

+使用CSS的:after伪元素

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
.news {background-color: gray;border: solid 1px black;}.news img {float: left;}.news p {float: right;}.clearfix:after{content: "020"; display: block; height: 0; clear: both; visibility: hidden;  }.clearfix {/* 触发 hasLayout */ zoom: 1; }<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

总结

通过上面的例子，我们不难发现清除浮动的方法可以分成两类：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，关于这一点。

overflow：hidden为什么能够清除浮动

overflow:hidden 的意思是超出的部分要裁切隐藏掉
那么如果 float 的元素不占普通流位置
普通流的包含块要根据内容高度裁切隐藏
如果高度是默认值auto （这时候算的是真实高度，由于其触发了BFC，需要包含子元素，所以高度不是0，而是子元素高度。）
那么不计算其内浮动元素高度就裁切
就有可能会裁掉float
这是反布局常识的

所以如果没有明确设定容器高情况下
它要计算内容全部高度才能确定在什么位置hidden
浮动的高度就要被计算进去
顺带达成了清理浮动的目标

总之，是先计算真实高度，再去隐藏。如果是先直接隐藏了，再去计算高度也就没有意义了。

盒子模型

每一个元素都可以看成一个盒子

盒子相关属性

+width:内容区域的宽

+height:内容区域的高

+padding:内边距（指的是边框到内容区域的距离）

+顺序是顺时针上、右、下、左（4）

padding：20px；四个方向都是20px

+上下相同或者左右相同的时候，也可以写成上下、左右（2）

padding：20px，30px；上下20px，左右30px

+找对立面，上、左右、下（3）

padding：10px，20px，30px；上10px、左右20px、下30px

层叠性依旧有用，写两遍的话下面的代码会把上面的覆盖掉

经过实验可以证明行内元素左右padding生效，上下不生效

+margin:外边距（盒子和其他盒子的间距）

我们一般会把内外边距都设为0，因为浏览器会给盒子设置默认的内外边距，这样会对我们的布局造成影响，所以一般情况下我们需要对其进行重置

对一个有宽度的块级元素margin：0 auto；可以让盒子水平居中

+顺序是顺时针上、右、下、左（4）

margin：20px；四个方向都是20px

+上下相同或者左右相同的时候，也可以写成上下、左右（2）

margin：20px，30px；上下20px，左右30px

+找对立面，上、左右、下（3）

margin：10px，20px，30px；上10px、左右20px、下30px

层叠性依旧有用，写两遍的话下面的代码会把上面的覆盖掉

+border（按顺序设置border-width、border-style、border-color）

-border-width:规定边框的宽度

-border-style:规定边框的样式

-border-color:规定边框的颜色

p{border:5px solid red;}
如果不想这样设置的话也可以做特定方向的设置
solid是实线的意思
dashed是虚线的意思

border补充

网站底部的footer的底线或者间隔符都可以通过设定单独的边框某个边来实现

盒子塌陷/margin塌陷

发生场景：

两个div（兄弟），上兄弟的margin-botton和下兄弟的margin-top会发生塌陷

结果：以大的为准，小的被吞噬。不是简单的叠加

解决方案
+最简单的方法就是只设置一个方向

margin的适用情况就是兄弟塌陷，处理并列关系的时候
父子塌陷

结果：儿子的margin-top传递给了父亲，最终的margin-top是以父子中较大的那个值为准。不是简单的叠加

解决方案

+在父亲中设置padding-top，但是盒子会被撑大（原理就是父盒子和子盒子之间其实是容器的关系，padding的意义指的是边框到内容区域的距离，子盒子就是内容。在未被指定宽高的情况下父亲的宽高是被儿子撑开的。在设定好了宽高的情况下，如果用的是padding的话父盒子依旧会被撑大，所以要用padding的时候要注意一下）

padding的适用情况就是父子塌陷盒子与内容（子盒子）关系的时候

盒子塌陷问题补充（1）

盒子塌陷问题补充（2）

背景

background

属性	意义
background-color	background-color 属性定义了元素的背景颜色.
background-image	属性描述了元素的背景图像.默认情况下 background-image 属性会在页面的水平或者垂直方向平铺，以覆盖整个元素实体.
background-repeat	默认背景图会被平铺
background-attachment	决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动，可简单理解为定义背景图片随滚动轴的移动方式
background-position	设置定位

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

综合属性不一定需要全部被用上

background： red no-repeat url(jiazhuang.png) 40px 50px;

url里面可以没有单引号，规范的话最好是要有单引号

background-color

CSS中，颜色值通常以以下方式定义:十六进制 - 如："#ff0000"RGB - 如："rgb(255,0,0)"颜色名称 - 如："red"以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

background-image

body {background-image:url('paper.gif');}

background-repeat

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
} 背景图像- 设置定位与不平铺
让背景图像不影响文本的排版如果你不想让图像平铺，你可以使用 background-repeat 属性:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

background-attachment

```html
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。

fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。

local：背景图相对于元素内容固定，

inhert:继承，没什么说的。

该属性可以应用于任何元素。

一、scroll【背景图滚动】
设置background-attachment:scroll,背景图是相对于元素自身固定，内容动时背景图也动。附加到元素的border。
Note:
对于scroll，一般情况背景随内容滚动，但是有一种情况例外。
对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。

下拉看效果：

这里我要强调一点我的看法：

给任何元素的背景图设置background-attachment: fixed;效果都是一样的，都是相对于视口，因为一个网页只有一个视口，该背景和元素已经没关系了，要说有关大概也只是元素不可见则背景图不可见。

而这个视口是什么呢？这里推荐一篇文章《像素与视口》

四、多背景图【background-attachment】
也可以为多个背景图设置background-attachment
body {
background-image: url(“img1.png”), url(“img2.png”);
background-attachment: scroll, fixed;
}
```
   [像素与视口1](https://blog.csdn.net/Amnesiac666/article/details/112364121)    [像素与视口2](https://bbs.huaweicloud.com/blogs/209372)   [a table of two viewports](https://www.quirksmode.org/mobile/viewports.html)   [文章引用，转载自](https://www.cnblogs.com/starof/p/4511367.html)
```

background-position(精灵图的原理)

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。可以利用 background-position 属性改变图像在背景中的位置:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
表示水平居右、垂直居上
center、top、left、botton
如果只写一个center表示全部居中
如果只写left表示另外一个默认居中，写top也是一样的另外一个默认居中还可以用像素表示
background-position：100px;
background-position：-100px,-100px;
参照点是左上角原点，如果是负值则会被裁掉并且隐藏也可以用百分比来表示
background-position：50%;
参照左上角为原点

background-size

背景图大小
background-size：100px,100px;

背景图和背景色的权重

背景图更大，优先展示

如果背景图没有展示才显示背景色

文本溢出隐藏问题（ellipsis）

场景描述：一般我们在网上看新闻的时候会有只让你看一部份然后就是省略号，剩下的要看的话需要点开剩余部分

1、css

text-overflow语法：
text-overflow : clip | ellipsis

text-overflow参数值和解释：
clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…）

单行文本溢出隐藏

white-space：nowrap；强制所有文字在一行

overflow-hidden；多出的文字裁剪并隐藏

text-overflow：ellipsis；溢出的文本以什么方式显示，ellipsis表示的是省略号

多行文本溢出隐藏

我想在第三行或者第四行的位置打省略号

display：-webkit-box；转成弹性盒

-webkit-box-orient：vertical;（浏览器内核需要时webkit的浏览器）这个是设置垂直排列的，垂直对齐

-webkit-line-clamp：3; 可以自主设定显示多少行剩下的就是省略号以及多出来的文字

overflow：hidden；多余文字隐藏

高度一般可以不设置，靠内容撑开

这里有兼容性的问题

带-webkit前缀的只有特定浏览器认识

单行
display: block;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;多行
直接用css属性设置(只有-webkit内核才有作用)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；
-webkit-line-clamp用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
display: -webkit-box将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
以下作为溢出显示省略号，line-clamp 表示显示多少行的数据，在数据最后显示….ellipsis1{
display:block;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap
}
.ellipsis2{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
text-overflow:ellipsis;
overflow:hidden
}
.ellipsis3{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
text-overflow:ellipsis;
overflow:hidden
}插件：
Clamp.jt
jQuery.dotdotdot

文本溢出隐藏补充文章引用，转载于

定位

相对定位

绝对定位

固定定位

相对定位

绝对定位

固定定位

vertical-align和line-height老基友了，掏出你的枪我们来击剑吧

vertical-align补充–张鑫旭大佬

深入理解css中vertical-align属性

vertical-align–MDN文档

vertical-align到底怎么用

一级菜单（具体代码可以参考二级菜单）导航栏实战之如何实现鼠标覆盖上去的时候中英文菜单的切换

.nav li a span{display:none;
}
.nav li a:hover{backgound-color:red;color:#fff;
}
.nav li a:hover b{display:none;
}
.nav li a:hover span {display:inline;
}
这里span中放置英文菜单，b里面是中文菜单
两者是并列的关系
当正常的时候span是消失的
当覆盖上去的时候b是消失的
当覆盖上去的时候span显示的是从none到inline的转变所以span中的英文可以展现

二级菜单实战

原理和一级菜单是一样的，就是用display让他消失然后hover覆盖上去的时候就会出现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>二级菜单</title><style>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,table,th,td {margin: 0;padding: 0;}.nav {width: 486px;height: 50px;margin: 100px auto;}.nav>li {width: 80px;height: 50px;line-height: 50px;float: left;font-size: 12px;background-color: #e5e5e5;text-align: center;border-right: 1px solid rgb(73, 67, 67);position: relative;}.nav li .nav2 {position: absolute;top: 50px;left: 0px;display: none;}span {display: none;}.nav .last {border-right: none;}ul,li {list-style: none;}a {width: 80px;text-decoration: none;display: block;color: #231d1d;height: 50px;}.nav li a:hover {background-color: #df481d;color: #fff;}.nav li a:hover b {display: none;}.nav li a:hover span {display: inline;}.nav li:hover .nav2 {display: block;}</style>
</head><body><ul class="nav"><li class="list"><a href=""><b> 菜单1</b><span class="span0"><strong>Menu1</strong></span></a><ul class="nav2"><li><a>子菜单1 </a></li><li><a>子菜单2</a></li><li><a>子菜单3</a></li></ul></li><li class="list"><a href=""><b>菜单2</b><span class="span0"><strong>Menu2</strong></span></a><ul class="nav2"><li><a>子菜单1 </a></li><li><a>子菜单2</a></li><li><a>子菜单3</a></li></ul></li><li class="list"><a href=""><b> 菜单3</b><span class="span0"><strong>Menu3</strong></span></a><ul class="nav2"><li><a>子菜单1 </a></li><li><a>子菜单2</a></li><li><a>子菜单3</a></li></ul></li><li class="list"><a href=""><b>菜单4</b><span class="span0"><strong>Menu4</strong></span></a><ul class="nav2"><li><a>子菜单1 </a></li><li><a>子菜单2</a></li><li><a>子菜单3</a></li></ul></li><li class="list"><a href=""><b>菜单5</b><span class="span0"><strong>Menu5</strong></span></a><ul class="nav2"><li><a>子菜单1 </a></li><li><a>子菜单2</a></li><li><a>子菜单3</a></li></ul></li><li class="list last"><a href=""><b>菜单6</b><span class="span0"><strong>Menu6</strong></span></a><ul class="nav2"><li><a>子菜单1 </a></li><li><a>子菜单2</a></li><li><a>子菜单3</a></li></ul></li></ul>
</body></html>

三级菜单不就是和二级菜单一样吗，就是在二级的li后面继续套li

卧龙集团首页实战li

/*index.html*/
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>卧龙控股集团有限公司</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css"><!-- 这里引入顺序是由讲究的，重置需要先引入这样后面的会把前面额覆盖，越后面的文件应该是越精细化的描述 -->
</head><body><div id="header" class="inner_c"><h1 class="logo"><!--logo：首页logo最重要，这里为了加权重 这里不要用div，搜索引擎对h1很敏感，h1的权重更高 --><a href=""><img src="img/logo.jpg" alt=""></a></h1><form action="" class="search"><!-- 在做网站的时候会发现，在pc的网站首页上会有个版型的东西，就是两边留白内容水平居中，这样做是为了适配各种宽度的屏幕的，大不了大的屏幕留白多一点 --><input type="text" name="" class="txt" placeholder="SEARCH..." /><input type="submit" value="" class="btn" /></form></div><!-- nav --><div class="nav-box "><div class="nav inner_c"><ul class="nav-list"><li><a href="#">集团介绍</a></li><li><a href="#">产品中心</a></li><li><a href="#">卧龙市场</a></li><li><a href="#">技术研发</a></li><li><a href="#">国际合作</a></li><li><a href="#">投资者关系</a></li><li><a href="#">新闻资讯</a></li><li class="lastchild"><a href="#">人力资源</a></li></ul></div></div><!-- banner --><div id="banner" class="inner_c"><a href="#"><img src="img/banner.jpg" alt=""></a></div><!-- news部分 --><div id="news" class="inner_c"><div class="news-zx"><h2 class="news-title">新闻资讯</h2><ul><li><a href="#">九刀流·阿修罗·亡者戏</a><span>2022-10-1</span></li><li><a href="#">死·黑神大龙卷</a><span>2022-10-1</span></li><li><a href="#">一刀流·死·狮子挽歌</a><span>2022-10-1</span></li><li><a href="#">二刀流·纹沙·登楼</a><span>2022-10-1</span></li><li><a href="#">二刀流·应登楼</a><span>2022-10-1</span></li><li><a href="#">九刀流·阿修罗·一雾银</a><span>2022-10-1</span></li></ul></div><div class="news-js"><h2 class="news-title">卧龙介绍</h2><h3>公司成立于1984年<br/>经过近30年的发展</h3><p>已成为电器制造、房地产开发和金融<br>投资三业并举的综合性跨国...</p></div><div class="news-zp"><h2 class="news-title">人员招聘</h2><p>培养一流的人才，铸造一流的工程<br>实现员工和企业的共同发展</p><a href=""><img src="./img/more.jpg" alt=""></a></div></div><!-- market部分 --><div id="market" class="inner_c"><h2 class="market-title">卧龙市场</h2><dl class="market-case"><dt><img src="img/market-1.jpg" alt=""></dt><dd>交通轨道：由于主要采用电器牵引，而且轮轨摩擦阻力较小，与公共...</dd></dl><dl class="market-case"><dt><img src="img/market-1.jpg" alt=""></dt><dd>交通轨道：由于主要采用电器牵引，而且轮轨摩擦阻力较小，与公共...</dd></dl><dl class="market-case"><dt><img src="img/market-1.jpg" alt=""></dt><dd>交通轨道：由于主要采用电器牵引，而且轮轨摩擦阻力较小，与公共...</dd></dl><dl class="market-case"><dt><img src="img/market-1.jpg" alt=""></dt><dd>交通轨道：由于主要采用电器牵引，而且轮轨摩擦阻力较小，与公共...</dd></dl></div><!-- 友情链接 --><div class="links-box"><div class="links inner_c"><div class="products"><h2 class="links-title">产品中心</h2><ul class="products-one products-list"><li><a href="#">汽车电机</a></li><li><a href="#">电机电机</a></li><li><a href="#">特种电机</a></li><li><a href="#">大功率电机</a></li><li><a href="#">电工设备</a></li></ul><ul class="products-two products-list"><li><a href="#">汽车电机</a></li><li><a href="#">电机电机</a></li><li><a href="#">特种电机</a></li><li><a href="#">大功率电机</a></li></ul><ul class="products-three products-list"><li><a href="#">汽车电机</a></li><li><a href="#">电机电机</a></li><li><a href="#">特种电机</a></li><li><a href="#">大功率电机</a></li></ul></div><div class="development"><h2 class="links-title">技术研发</h2><ul class="products-list"><li><a href="#">汽车电机</a></li><li><a href="#">电机电机</a></li><li><a href="#">特种电机</a></li><li><a href="#">大功率电机</a></li></ul></div><div class="marketing"><h2 class="links-title">营销网络</h2><img src="img/map.jpg" alt=""></div></div></div><!-- footer部分 --><div id="footer" class="inner_c"><ul class="footer-list"><li><a href="#">网站地图</a></li><li><a href="#">联系我们</a></li><li><a href="#">关注卧龙</a></li><li class="lastchild"><a href="#">采购系统入口</a></li></ul><div class="copyright"><span>COPYRIGHT &copy; 2013 卧龙控股集团 浙ICP备06005901号技术支持：博彩互动 分享到：</span><a href="" class="share"><img src="img/share1.jpg" alt=""></a><a href=""><img src="img/share2.jpg" alt=""></a><a href=""><img src="img/share3.jpg" alt=""></a><a href=""><img src="img/share4.jpg" alt=""></a><a href=""><img src="img/share5.jpg" alt=""></a></div></div>
</body></html>

/*reset.css*//* 重置样式 */* {padding: 0;margin: 0;}h1,h2,h3,h4,h5,h6 {font-size: 16px;font-weight: 40px;}ul,li,ol {list-style: none;}em,i {font-weight: normal;}b,strong {font-weight: 500;}a,u {text-decoration: none;}img {display: block;}/* 图片底部会多出3到5个px，是浏览器加的,改成block可以清除掉 */

/*common.css*//* 公共样式 *//* 头部样式 */.inner_c {width: 1000px;margin: 0 auto;}#header {height: 100px;}.logo {float: left;margin-top: 42px;margin-left: 21px;}.search {float: right;margin-right: 19px;margin-top: 39px;}.search .txt {float: left;width: 180px;height: 26px;background-color: #f0f0f0;border: 1px solid #e5e5e5;border-right: none;font-size: 15px;padding-left: 15px;}.search .btn {float: left;height: 27.99px;/*按钮是包括边框在内的*/width: 30px;background: #f0f0f0 url('../img/search.jpg') no-repeat center;border: 1px none;border-left: none;}/* 导航样式 */.nav-box {background-color: #323232;}.nav-box .nav {height: 59px;}/* 样式定的越准确，风险越少 */.nav-box .nav .nav-list li {float: left;width: 119px;height: 59px;text-align: center;line-height: 59px;font-size: 12px;border-right: 1px solid #4a4a4a;}.nav-box .nav .nav-list li a {color: #f7f7f7;}.nav-box .nav .nav-list li.lastchild {border-right: none;}/* 注意计算就是不可以超过1000，要不然可能会出来问题如果不够元素可能会被挤到下面去 *//*尾部样式*/#footer {height: 58px;padding-top: 23px;}.footer-list {float: left;margin-left: 15px;}.footer-list li {float: left;font-size: 11px;line-height: 11px;padding: 0 7px;border-right: 1px solid #888;}.footer-list li.lastchild {border-right: none;}.footer-list li a {color: #858585;}.copyright {float: right;font-size: 10px;color: #8c8c8c;margin-right: 18px;}.copyright a {display: inline-block;margin-right: 4px;}.copyright a.share {margin-right: 8px;}.copyright img {display: inline-block;}

/*index.css*//* 首页的样式 */#news {height: 270px;}#news .news-zx {float: left;width: 480px;height: 240px;padding-left: 21px;}#news .news-title {margin-top: 36px;font-size: 17px;line-height: 17px;color: #1d1d1d;}#news .news-zx ul {margin-top: 22px;}#news .news-zx ul li {height: 25px;line-height: 25px;width: 436px;padding-left: 14px;/* 圆点会被文字挡掉，所以调整宽度，设置paddingleft */background: url('../img/news-list.jpg') no-repeat 0px center;}#news .news-zx ul li a {font-size: 12px;color: #535353;float: left;}#news .news-zx ul li span {float: right;color: #949494;font-size: 9px;}#news .news-js {float: left;width: 214px;height: 240px;background-color: #f1f1f1;padding-left: 24px;}#news .news-js h3 {font-size: 12px;color: #535353;line-height: 25px;margin-top: 32px;}#news .news-js p {font-size: 11px;color: #8f8f8f;line-height: 24px;margin-top: 14px;}#news .news-zp {float: left;width: 234px;height: 240px;padding-left: 26px;background: #fbfbfb url(../img/news-zp.jpg) no-repeat 143px 121px;}#news .news-zp p {font-size: 12px;color: #5e5e5e;line-height: 24px;margin-top: 21px;margin-bottom: 50px;}/* 公司市场 */#market {height: 276px;}#market .market-title {font-size: 17px;color: #1e1e1e;margin-left: 17px;margin-bottom: 17px;line-height: 17px;}#market .market-case {width: 210px;margin: 0 20px;float: left;}.market-case dd {line-height: 24px;font-size: 11px;color: #545454;margin-top: 12px;}/*友情链接*/.links-box {background: #e5e5e5;}.links-box .links {height: 250px;}.links-box .links .products {width: 452px;height: 100%;margin-left: 20px;float: left;}.links-box .links .development {width: 152px;height: 100%;float: left;margin: 0 50px;}.links-box .links .marketing {width: 256px;height: 100%;float: left;}.links-box .links-title {font-size: 15px;color: #606060;padding-left: 12px;padding-bottom: 11px;border-bottom: 1px solid #c2c2c2;margin-top: 31px;}.links-box .products-list {float: left;margin-top: 14px;}.links-box .products-list li {font-size: 11px;height: 24px;line-height: 24px;background: url(../img/linksList.jpg) no-repeat 0 center;}.links-box .products-list li a {margin-left: 13px;color: #606060;}.links-box .products .products-one {width: 150px;height: 160px;}.links-box .products .products-two {width: 194px;}.links-box .marketing img {margin: 16px 0 0 31px;}

H5新增标签

是在原有的基础上做了一点改变

新增了语义化标签

header头部标签

nav 导航标签MDN-

article内容标签

section 具有主题的区域

aside 侧边栏

footer 尾部标签

以上兼容性IE678不认识。但是可以用第三方插件去解决html5shiv.js（一个针对IE的JS补丁，目的让低版本IE认识H5）

正常情况下以上都是块级元素

具体H5可以参考MDN的h5开发者文档，是很详细的 MDN-H5

音视频标签

video&audio

HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。

video不是所有格式都支持 ,只支持 MP4 ogg webM 三种格式
但这三种格式对于浏览器的兼容性却各不同
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ NoNO：代表不支持这款浏览器。
X.0+：表示支持这款及版本更高的浏览器。 下面是将视频嵌入html文档的例子<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>你的浏览器不支持 <code>video</code> 标签.</video><!-- 如果浏览器不支持这个格式的音视频文件，那么他就不会显示，被包裹在video中的文字就会出现，告知用户浏览器不支持 -->下面是一个将音频嵌入到HTML文档的例子。
<audio src="audio.ogg" controls autoplay loop>
你的浏览器不支持audio标签
</audio>src属性可以设置为一个音频文件的URL或者本地文件的路径。
这个例子的代码中使用了HTML的“audio”元素的一些属性：controls : 为网页中的音频显示标准的HTML5控制器。autoplay : 使音频自动播放。loop : 使音频自动重复播放，loop的效果是包括了autoplay<audio src="audio.mp3" preload="auto" controls></audio>preload属性用来缓冲audio元素的大文件，有三个属性值可供设置："none" 不缓冲文件"auto" 缓冲音频文件"metadata" 仅仅缓冲文件的元数据可以用 <source> 标签来指定多个文件，以为不同浏览器提供可支持的编码格式。例如：<video controls><source src="foo.ogg" type="video/ogg"><source src="foo.mp4" type="video/mp4">Your browser does not support the <code>video</code> element.
</video>
当浏览器支持Ogg格式的时候， 该代码会播放Ogg文件。 如果浏览器不支持Ogg，浏览器会播放MPEG-4 file。参见列表 audio和video元素支持的媒体格式 来查看不同浏览器对视频音频编码格式的支持情况。你也可以指定视频文件需要的视频编解码器的值；这样允许浏览器做出更加正确的决定：
<video controls><source src="foo.ogg" type="video/ogg; codecs=dirac, speex">Your browser does not support the <code>video</code> element.
</video>
在这里，我们指定video标签使用Dirac和Speex的视频编解码器。如果浏览器支持Ogg，但是不支持指定的编解码器，则视频不会被加载。如果类型属性没有被指定，媒体类型将返回至服务器然后检查浏览器是否可以解决；如果不能被执行，就检查下一个来源。如果没有任何一个指定的来源元素可以使用，则分派一个错误事件给video标签。如果指定了类型属性，那么将会与浏览器能够播放的类型做对比，如果其没有被识别，甚至不会被向服务器发出询问；相反，下一个来源会被同时检查。点击 媒体事件 来查看完整的媒体回放事件列表。要查看不同浏览器支持的媒体格式的详细信息， 点击 Media formats supported by the audio and video elements.浏览器并不是都支持相同的视频格式，所以你可以在 <source> 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。
<video controls><source src="myVideo.mp4" type="video/mp4"><source src="myVideo.webm" type="video/webm"><p>Your browser doesn't support HTML5 video. Here isa <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
其他的使用注意事项：如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。详情请见Creating a cross-browser video player。HTMLMediaElement 会激活许多不同的事件，以便于让你可以控制视频（和音频）内容。你可以用CSS 属性 object-position 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。如果想在视频里展示字幕或者标题，你可以在 <track> 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。详情请见 Adding captions and subtitles to HTML5 video。此外这里还有一份很棒的关于“视频和音频内容”的初学者材料，收集了很多的基本知识。muted布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放 。preload该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一：none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。metadata: 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。空字符串：也就代指 auto 值。假如不设置，默认值就是浏览器定义的了 （即，不同浏览器会选择自己的默认值），即使规范建议设置为 metadata。使用备注：autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置autoplay 和 preload属性在规范里是允许的。规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。如果用了自动播放那么这个缓存就会失效poster一个海报帧的URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。

audio支持 mp3 ogg wav
兼容性
mp3一般都支持
wav（IE不认识）
ogg（苹果还有IE不认识）和video差不多<audio controls><source src="myAudio.mp3" type="audio/mpeg"><source src="myAudio.ogg" type="audio/ogg"><p>Your browser doesn't support HTML5 audio. Here isa <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

谷歌浏览器禁用带声音的视频或音频自动播放出声音只有有兴趣的时候可以人为取消禁音

表单新增

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action=""><input type="email" name="email" id="" autocomplete="on" required><input type="url" name="" id=""><input type="date" name="" id="" autofocus><input type="time" name="" id=""><input type="number" name="" id=""><input type="tel" name="" id=""><input type="search" name="" id=""><input type="submit" value="提交"><input type="file" name="" id="" multiple><!-- 如果点击提交，他会自动去校验 --></form></body></html>
/*在pc端用的（兼容问题，在不同的浏览器对于不同的表单显示的还不一样），在移动端用的很多（用户体验比较好）*/以上没有列举完，有需要用的再去查required表示必填项不能为空
autofocus表示光标默认选中
file默认只能上传一个文件，multiple表示按住ctrl可以选中多个文件上传
autocomplete是off，改成on之后浏览器会记住之前输入过的值，给快捷提示必须要起name

表单

新增表单元素如tel、number、search、color、email…

新增表单元素属性required placeholder autofocus mutiple autocomplete

canvas

C3新增

属性选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p[class]{/*表示具有class属性的p标签
权重计算是10
*/
background-color: red;
}
p[class="p0"]{/*表示具有class属性="p0"的p标签
权重计算是10
*/
background-color: blue;
}
p[class*="p1"]{/*表示具有class属性值中包含p1的p标签
权重计算是10
*/
background-color: skyblue;
}
p[class^="p1"]{/*表示具有class属性值以p2开头的p标签
权重计算是10
*/
background-color: green;
}
p[class$="p1"]{/*表示具有class属性值以p2结尾的p标签
权重计算是10
*/
background-color: gray;
}  </style>
</head>
<body><p class="p0">p1</p><p class="123p1">p11</p><p class>p2</p>
</body>
</html>E[att]
E[att="val"]：等于
E[att^="val"]：开头
E[att*="val"]：包含
E[att$="val"]：结尾

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li:first-child{background-color: green;/* 表示li作为父亲ul中的第一个儿子，如果和其他标签并列的话，只要是父亲的第N个儿子就行 */}li:last-child{/* 表示最后一个儿子 */}li:nth-child(2){/* 从1开始算，表示第几个儿子 */}li:nth-child(-n+3){/*an+ba、b是一个整数可正可负，n是一个自然数从0开始 an+b是一个整体，整体的结果是要>=1.0没有意义所以-n+b就表示 0-b的所有选项-an+b，a就是等差的差值或者也可以让b为0 那么表达式就变成了an，如果a是2那么结果就是2n，所以这个表达式就很灵活还可以不写表达式写odd 还有 even但是前提就是-an+b这个顺序不能动，不能变成b+an*/}
P:nth-of-type(1){}/* 伪元素 :可以通过css往页面里面加内容*/
.box::before{/*content是必填属性，可以没有值。权重为1*/content: "我是css添加内容";/* 默认是行内元素 */display: block;
}</style>
</head>
<body><ul><li></li><li></li><p></p><li></li><li></li></ul><div class="box">sss</div>
</body>
</html>

伪类选择器补充

伪元素补充

背景

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0px;padding: 0px;}.box{width: 200px;height: 130px;border:4px solid pink;background: url(./a.png) no-repeat;background-size: 10%  auto;padding:20px;/*这样直接改会失真 ，也可以用百分比,只改一边还是会出现等比例百分比参照的是父亲的宽、高。百分比改一边结果也是自适应的，也可以用auto去表示没写的那边自适应*/background-size: cover;/* cover表示图片填满盒子，会等比列的缩放 可能会导致背景图显示不完整 */background-size: auto 100%;background-clip: border-box;/*默认值，我们默认背景是从 border开始显示的*/background-clip: padding-box;/*把padding以外的区域裁掉*/background-clip: content-box;/*把content以外的区域裁掉*//* background-clip背景的（包括背景色还有背景图）裁剪 */background-origin: padding-box;/*改变背景图的参考原点的，默认是padding开始*/background-origin: content-box;}.box2{width: 300px;height: 300px;border: 5px soild #000;background:url(./bg-tl.png)no-repeat left top,url(./bg-tr.png )no-repeat right top,url(./bg-br.png )no-repeat right bottom,url(./bg-bl.png) no-repeat left bottom;/* 一个盒子可以放多个多个背景图逗号隔开。设置多个背景图的时候需要单独设置背景色，否则错误 */background-color: red;}</style>
</head>
<body><div class="box"></div><div class="box2"></div>
</body>
</html>

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>.box{width: 200px;height: 200px;background: blue;margin: 50px auto;box-shadow: 4px 4px 5px 1px red ,20px 4px 5px #000;/*向右平移4px，向下平移4px。模糊程度5px，值越大越模糊，值为正。阴影颜色可选。默认阴影颜色是黑色，第四个是阴影大小，默认是0和物体等大 ,inset是把外部阴影改成内阴影1.水平位置2.垂直位置3.模糊度值越大越模糊，不可以是负数4.阴影大小5.颜色6.内外阴影7。逗号隔开可以加多个阴影,如果两个阴影位置在一起重叠部分后面的会被前面的覆盖*/}
</style>
</head>
<body><div class="box"></div>
</body>
</html>

文字阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>.box{width: 200px;height: 200px;background: blue;margin: 50px auto;box-shadow: 4px 4px 5px 1px red ,20px 4px 5px #000;/*向右平移4px，向下平移4px。模糊程度5px，值越大越模糊，值为正。阴影颜色可选。默认阴影颜色是黑色，第四个是阴影大小，默认是0和物体等大 ,inset是把外部阴影改成内阴影1.水平位置2.垂直位置3.模糊度值越大越模糊，不可以是负数4.阴影大小5.颜色6.内外阴影7。逗号隔开可以加多个阴影,如果两个阴影位置在一起重叠部分后面的会被前面的覆盖*/}p{font-size:50px;color: red;text-align: center;text-shadow: 0px -5px 4px #ff3,2px -10px 6px #fd3;
}
</style>
</head>
<body><div class="box"></div><p>爱全栈，爱生活</p>
</body>
</html>

圆角边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 400px;height: 200px;border:20px solid red;/* border-radius: 200px 200px 0 0 ; *//* 当所有的角都变成边的50%，就会变成圆，实际上我们写的px表示的是每个角以半径为多少px来表示弧度 *//* border-radius: 20px/10px; 这个是用来写椭圆的，表示长半轴是20短半轴是10*//* 要做半圆很简单，就是我们要明白我们希望一个角能够直接干掉整个高，那么就很简单，让半径变成高，那么宽为长的两倍不就行了吗 *//* 边框第二个知识点：图像边框 表示颜色我们还有个表示方法叫HSL（色彩）模式H：色像S：饱和度L：亮度这个了解一下，设计会给hsl（X ，X ，X）*/border-image: url(./bordr.png);/* 原先边框的宽度还有颜色都会被取代 */border-image-slice: 13;/* 这个是设置图形大小的 */}</style>
</head>
<body><div class="box"></div>
</body>
</html>

内容换行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><tite>Document</tite><style>div{width: 200px;height: 200px;border: 2px solid #000;margin: 10px auto;word-wrap: break-word;/*会把显示不下的内容，尝试放到下一行显示，如果后面都显示不下了，就一起往下排  高版本支持overflow-wrap*/word-break: break-all;/*粗暴换行：不会挪动内容 显示不下直接换行 ，有时候会出现单词一半在上一行，一半在下一行的情况 */}</style>
</head>
<body><div>上午的体能课还是令人疲惫的66666666666666666666666，唐三中午休息时冥想，进入状态的特别快。体内的气血奔涌，与玄天功功力相合，甚至都能明显感受到自己的一些改善直到学院内的铃铛响起，他才从冥想中清醒过来。外面已经有些嘈杂的声音，</div>
</body>
</html>

2D变换

平移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>平移</title><style>.box{width: 100px;height: 100px;background-color: pink;transform:translate(100px,100px);/*上下（下）、左右（右） 可以用百分比来进行移动参照的是自己的宽高translate对行内元素无效*/transform: translateX();/* X */transform: translateY();/* Y */transform: translateZ();/* Z */}</style>
</head>
<body><div class="box"></div></body>
</html>

旋转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转</title><style>.box{width: 100px;height: 100px;border-radius: 50%;background-color: pink;margin: 20px auto;transition: all 1s;/* transition 可以给一个过度效果，让他变化有一个过程  all表示给所有的都加一个过渡*/background: url(./jiazhuang.png) no-repeat;background-size: cover;/* cover和contain的区别 contain图片完整显示，盒子不一定被填满，图片等比例缩放cover，盒子被填满，图片等比例缩放，背景图可能显示不完整*/}.box:hover{transform: rotate(720deg);    /* 正的时候顺时针旋转 */}p{width: 10px;height: 10px;border: 1px solid #000;transform: rotate(45deg); border-left: none;border-top: none;}p:hover{transform: rotate(225deg);transform-origin: center center;/* 修改旋转原点，默认是center center，可以写方位词也可以写像素 */}</style>
</head>
<body><div class="box"></div><p></p>
</body>
</html>

缩放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>放大</title><style>.box:hover{transform: scale(1.2,1.2);/*放大缩小，上下，左右。如果是一样的话，就可以只写一个，默认是center center 也可以做到 根绝  transform-origin去改变原点根据原点去放大缩小如果既然放大又要平移还要旋转，不能在地下加，不然会被层叠掉，要用逗号隔开就可以实现效果*/}</style>
</head>
<body><div class="box"></div>
</body>
</html>

倾斜

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 100px;text-align: center;line-height: 100px;transform: skew(-30deg);background-color: #e5e5e5;}.box p{width: 100px;height: 100px;transform: skew(30deg);}</style>
</head>
<body><div class="box"><p>首页</p></div>
</body>
</html>

自定义动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*定义动画*/@keyframes myanimate {0% {width: 0;}/* 0% {transform: translate(0,0);} */
/* 25% {transform: translate(500px,0);}50% {transform: translate(500px,500px);}75% {transform: translate(0,500px);} 100% {transform: translate(200px,0);}*/100% {width: 400px;}}@keyframes pulse {0% {}65% {width: 40px;height: 40px;opacity: 1;}100% {width: 70px;height: 70px;opacity: 0;}}.box {overflow: hidden;width: 150px;height: 30px;background-color: pink;margin-bottom: 20px;font-size: 20px;/*执行动画*//* animation: myanimate 2s; *//*动画名称*//* animation-name: myanimate; *//* 动画持续时间*//* animation-duration: 2s; *//* 动画延迟时间*//* animation-delay: 1s; *//* 设置动画结束时的状态 backwords默认是回到起初状态 forwords停止结束状态*//* animation-fill-mode: forwards; *//* animation-timing-function: ease; *//* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); *//* animation-iteration-count: 2; *//* animation-direction: alternate; */animation: myanimate 4s   steps(20) forwards ;}.box:hover {/* 设置动画的状态 是暂停还是进行*/animation-play-state: paused;}.circle {width: 8px;height: 8px;background-color: #09f;border-radius: 50%;}.wrap {position: absolute;left: 200px;}.wrap div[class^="pulse"] {width: 8px;height: 8px;border-radius: 50%;box-shadow: 0 0 12px #009dfd;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);animation: pulse 1.5s linear infinite;}.wrap div[class="pulse2"] {animation-delay: .5s;}.wrap div[class="pulse3"] {animation-delay: 1.0s;}</style>
</head>
<body><div class="box">第一章故事很精彩第一章故事很精彩第一章故事很精彩第一章故事很精彩</div><div class="wrap"><div class="circle"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></body>
</html>

小案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*定义动画*/@keyframes myanimate {0% {width: 0;}/* 0% {transform: translate(0,0);} */
/* 25% {transform: translate(500px,0);}50% {transform: translate(500px,500px);}75% {transform: translate(0,500px);} 100% {transform: translate(200px,0);}*/100% {width: 400px;}}@keyframes pulse {0% {}65% {width: 40px;height: 40px;opacity: 1;}100% {width: 70px;height: 70px;opacity: 0;}}.box {overflow: hidden;width: 150px;height: 30px;background-color: pink;margin-bottom: 20px;font-size: 20px;/*执行动画*//* animation: myanimate 2s; *//*动画名称*//* animation-name: myanimate; *//* 动画持续时间*//* animation-duration: 2s; *//* 动画延迟时间*//* animation-delay: 1s; *//* 设置动画结束时的状态 backwords默认是回到起初状态 forwords停止结束状态*//* animation-fill-mode: forwards; *//* animation-timing-function: ease; *//* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); *//* animation-iteration-count: 2; *//* animation-direction: alternate; */animation: myanimate 4s   steps(20) forwards ;}.box:hover {/* 设置动画的状态 是暂停还是进行*/animation-play-state: paused;}.circle {width: 8px;height: 8px;background-color: #09f;border-radius: 50%;}.wrap {position: absolute;left: 200px;}.wrap div[class^="pulse"] {width: 8px;height: 8px;border-radius: 50%;box-shadow: 0 0 12px #009dfd;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);animation: pulse 1.5s linear infinite;}.wrap div[class="pulse2"] {animation-delay: .5s;}.wrap div[class="pulse3"] {animation-delay: 1.0s;}</style>
</head>
<body><div class="box">第一章故事很精彩第一章故事很精彩第一章故事很精彩第一章故事很精彩</div><div class="wrap"><div class="circle"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></body>
</html>

怪异盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3中加入的关于盒子的计算方式</title><style>.box{width: 200px;height: 200px;padding: 10px;border: 3px solid blue;/*盒子计算width:width+左右padding+bordermargin是外边距，不需要计算到盒子的宽度中但是我们有时候会希望设置了盒子的宽度他不会因为padding之类的导致变化*/box-sizing: content-box;/* 设置怪异盒子 只认内容区域，移动端用的多 */box-sizing: border-box;/* 设置怪异盒子 包括盒子在内的都认，移动端用的多 */}</style>
</head>
<body><!--是用来定义盒子的解析方式 标准盒子：总宽度+左右padding+左右border    怪异盒子==width--><div class="box"></div>
</body>
</html>

渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渐变（颜色从一种过渡到另外一种）</title><style>div{width: 300px;height: 200px;margin: 50px auto;/* background-image: linear-gradient(-30deg,red,green); *//* 参考点以下边界为准，正值表示下边界以左下顶点顺时针转，反之以右下顶点逆时针转 *//* background-image: linear-gradient(to bottom, red, green); *//*也可以用方位词来表示 写两个方位词还可以表示斜的 不指定方向默认是从上到下，也就是角度上的180deg*//* background-image: linear-gradient(to bottom, #fff 0%, #333 100%); *//* 可以在100%中多设置几个界限，设定不同的颜色就可以达到光晕的效果 *//*background-image: repeating-linear-gradient(); 重复渐变对于没有设置到100%的，不体面，他会帮你体面*/background-image: radial-gradient(circle at 30px 30px, red,yellow,green,gray,skyblue);/*镜像中心点，渐变颜色镜像形状，镜像位置,镜像颜色(颜色可以一直往上加) circle后面还可以还可以加一些表示控制关系的词（比如最近角。最近边）标准格式不能同时写形状大小还有方位但是不同浏览器的兼容模式可以做到-webkit渐变可以写多个，用逗号隔开遇到这个属性就直接去找MDN*/}</style>
</head>
<body><div class="box"><!-- background-image: linear-gradient:();线性渐变background-image: repeating-linear-gradient();重复渐变background-image: radial-gradient();镜像渐变--></div>
</body>
</html>

多列布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多列布局</title><!-- 新闻行业常用：排版 --><style>div{width: 740px;column-count: 3;/* 把内容从左列至右列阅读分成三列 */column-rule: 4px dashed #000;/* 设置列和列之间的间隔线，书写方式同div */column-width: 240px;/* 设置每列宽度 */column-gap: 10px;/* 设置列间距 *//* 如果列宽过宽，无法完成设定的列数，那么就会减少列数 */column-fill: auto;/*设置盒子剩余高度auto表示前一列高度占满balance每一列平分高度，默认值*//* 设定每一列的占满情况的，auto就直接每一列都占满了，直到结束 */}h2{column-span: all;/* 设置标题的位置all（独占一行），1（默认第一列） */}</style>
</head>
<body><div></div>
</body>
</html>

顾川的前端学习笔记--前端开发基础相关推荐

前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
前端学习笔记之1 基础语法及标签
引言 : 博主目前是一名iOS开发者, 所会的语言有Objective-C 和 Swift, 目前正在学习前端, 增强一下技术能力, 等学会点皮毛之后打算接触一下React Native; 这篇文章只 ...
系统架构师学习笔记-系统开发基础知识（二）
目录系统规划与问题定义需求工程软件设计软件测试软件维护软件开发环境与工具系统规划与问题定义软件系统的总体规划包括以下阶段: 1. 对当前系统进行初步的调查. 2. 分析和确定系统目标. ...
系统架构师学习笔记-系统开发基础知识（一）
目录软件开发方法软件开发模型软件开发方法净室方法:净室软件工程(净室方法)是软件开发的一种形式化方法,它可以生成高质量的软件. 净室方法主要使用三种盒类型: 1. 黑盒:刻划系统或系统的某部分 ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
前端学习笔记（this）
前端学习笔记(this) 在函数中调用在函数中直接调用函数作为对象的方法进行调用不在函数中调用 es6的箭头函数在函数中调用在函数中直接调用 1 严格模式和非严格模式中this 严格模式下t ...

顾川的前端学习笔记--前端开发基础