导图社区 CSS和bootstrap第二阶段

CSS和bootstrap第二阶段

包括了CSS和bootstrap的学习。。花费了好长时间总结出来的。所有东西一目了然，希望对前端朋友有所帮助

提示: 本内容由社区用户上传并分享。平台不对内容的真实性、合法性、知识产权归属及是否侵害第三方权利进行事前审核或保证。本内容可能包含受版权保护的图片、字体或其他第三方素材，使用前请自行确认授权范围。

编辑于2019-06-29 05:24:45

單薄的年紀

他的近期作品查看更多>>

CSS和bootstrap第二阶段

社区模板帮助中心，点此进入>>

單薄的年紀

他的近期作品查看更多>>

相似推荐
大纲

英语词性
- 65.1k
- 6.6k
- 2.4k
- 578
- 0
Ethan
互联网9大思维
- 41.4k
- 981
- 2.5k
- 402
- 0
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 19.7k
- 3
- 186
- 9
- 1
Kacyun
法理
- 30.2k
- 67
- 376
- 49
- 1
Dasein
刑法总则
- 40.7k
- 148
- 969
- 155
- 0
Dasein
【华政插班生】文学常识-先秦
- 6.8k
- 4
- 70
- 2
- 0
Dasein
【华政插班生】文学常识-秦汉
- 4.0k
- 0
- 54
- 10
- 0
Dasein
文学常识：魏晋南北朝
- 4.8k
- 3
- 90
- 20
- 0
Dasein
【华政插班生】文学常识-隋唐五代
- 5.6k
- 8
- 98
- 6
- 0
Dasein
【华政插班生】文学常识-两宋
- 3.8k
- 5
- 70
- 8
- 0
Dasein

前端第二阶段

HTMLday1

WEB基础知识

Web与Internet

Internet简介

Internet 是一个全球性的计算机网络，也成为"因特网"等

主要服务

Telnet

WWW

BBS

FTP

基本实现技术

分组交换原理

TCP/IP协议簇

Web简介

又称为万维网，即WWW

将各种类型的信息和服务无缝连接，并提供界面

万维网其实就是无数WEB文档的集合

Web与Internet

Web是Internet上的最流行的应用

Internet为Web运行提供了网络环境

Web的工作原理

基于Internet的一个多媒体信息服务系统

B/S模式

由Web服务器，浏览器，通信协议组成

Web服务器

功能

存储WEB上的内容信息（图像，音视频等）

响应浏览器的请求，执行服务器端程序

具备一定安全性功能

产品

TOMCAT

IIS

APACHE

……

Web浏览器

功能

提交用户请求

作为HTML和JS的解释器

用图形化的方式显示HTML文档

产品

Microsoft IE

Mozilla Firefox

Google Chrome

Apple Safari

Opera

Web的相关技术

服务器端技术

运行于服务器端

提供了数据库访问能力

技术

PHP（Hypertext Preprocessor）

JSP（Java Server Page）

ASP（Active Server Page）

客户端技术

运行与客户端，由浏览器解释运行

技术

HTML（Hyper Text Markup Language）

CSS（Cascading Style Sheets）

JS（Javascript）

HTML快速入门

HTML概述

什么是HTML

Hyper Text Markup Language

超文本标记语言,用来设计网页

用该语言编写的文件，以.html 或 .htm为后缀

由浏览器解释运行

可以嵌入脚本语言编写的程序片段，如JS

HTML基础语法

标记语法

HTML用于描述功能的符号成为“标记”

标记使用时必须使用尖括号(<>)括起来

有封闭类型标记，也有非封闭类型的标记

双标记

必须成对出现

<标记>内容</标记>

注意：封闭类型标记必须成对出现

单标记

非封闭类型，也叫做空标记

<标记> 或 <标记/>

<br>

<hr>

<img>

<input>

<meta>

元素

即标记，指尖括号及尖括号所包围的内容部分

元素可以包含文本内容和其他元素，也可以是空的

元素嵌套

元素可以相互嵌套形成更为复杂的语法

注意：

嵌套顺序（完整嵌套）

代码缩进（保证代码可读性）

属性和值

属性是用来修饰元素的

语法

<标记属性="值" 属性="值">

ex:<p align="center" id="p1">

标准属性

定义元素在页面中的唯一标识

title

鼠标移入到元素上时提示的文本

class

样式中，定义元素引用的类选择器

style

样式中，定义元素的行内样式

注释

在源码中编写，但不会被浏览器所解释的内容，成为注释

可以将对代码的解释说明放在注释中

语法

注意

注释不可以嵌套注释

注释不可以位于<>中

文档结构

文档类型声明

指定HTML的版本和风格

<!DOCTYPE html>

HTML页面

表示HTML页面的开始与结束

HTML页面

页面头部

定义页面全局信息

子元素

网页标题

页面内容编码格式

页面主体

网页显示主体内容

属性

文本颜色

text

背景颜色

bgcolor

文本

特殊字符

空格

文本标记

文本样式

斜体：<i></i>

粗体：<b></b>

删除线：<s></s>

下划线：<u></u>

上标：<sup></sup>

下标：<sub></sub>

标题元素

标记

表现形式

改变字号（一级最大，六级最小）

加粗显示

上下有垂直的空白距离

独立成行

属性

align

标题文本水平排列方式

取值

left

center

right

段落元素

标记

<p></p>

表现形式

默认文字大小

独立成行

上下垂直空白

align：left / center / right;

注意

p标记中不允许嵌套块级元素

换行元素

标记

<br>

分隔线元素

标记

<hr>

属性

尺寸：size

取值单位为 px（像素），可以省略

宽度：width

取值单位为px（像素）可以省略或百分比

颜色：color

水平对齐方式：align

left

center

right

预格式化

标记

特点

保留源文档中的回车和空格

分区元素

块分区元素

标记

表现形式

独立成行

作用

页面布局

行内分区元素

标记

表现形式

多个元素在一行内显示

作用

设置同一行文字内的不同格式

行内元素与块级元素

块级元素

元素会独占一行，即元素前后都会自动换行

主要用于网页布局

display:block

行内元素

不会换行，多个元素会在一行内显示

包裹文本并处理样式

display:inline;

图像和链接

URL

目录结构

目录就是Web站点中文件夹的名称

Web站点的主目录，称为Web站点的根目录

URL

Uniform Resource Locator（统一资源定位器），用来标识网络中的任何资源

三种表现形式

绝对路径

定义：从文件所在的最高级目录下开始查找资源文件所经过的路径

网络资源

协议名

http / https

主机名（IP地址/域名）

www.baidu.com

目录路径

img

资源名称

bg_logo1.png

相对路径

定义：从当前文件位置处开始查找资源文件所经过的路径

同目录，直接用

a.jpg

子目录，先进入

img/a.jpg

img/index/a.jpg

父目录，先返回

../a.jpg

../../a.jpg

../img/a.jpg

根相对路径

定义：从Web站点所在的根目录处开始查找

通过 / 表示根目录

图像

图像格式

JPEG

jpg

jpeg

GIF

PNG

图像元素

标记：<img>

属性

src

要显示的图像的路径（绝对/相对/根相对）

width

图像宽度，如果width 和 height 只设置一个属性时，另外一个将等比缩放

height

图像高度

链接

标记：<a>内容</a>

属性

href

链接URL

to 百度

target

to 百度

含义：目标，打开新网页的形式

取值

_blank

在新标签页中打开

_self

在自身页面中打开

...

name

定义页面锚点

链接的表现形式

目标文档为下载资源

电子邮件链接

返回页面顶部的空链接

链接到JavaScript

锚点

定义：锚点就是文档中某行的一个记号，通常用于链接到这个记号位置处

使用方式

定义锚点

通过 a 标记的 name 属性

其他元素使用 id 属性

链接到锚点

1、定义锚点锚点1 2、链接到锚点：在锚点名前加上# ...

表格

表格的作用

按照一定的结构来显示数据

由单元格按照从左到右，从上到下的方式排列到一起

数据都保存在单元格中

表格可以显示数据，也可以设置页面的布局

使用表格

第1行，第1列第1行，第2列第2行，第1列第2行，第2列

创建表格

创建表行

创建单元格

属性

table

width :设置表格的宽度

height:设置表格的高度

align:设置表格的对齐方式

left

center

right

border:设置表格边框宽度

cellpadding:内边距（单元格边框与内容之间的距离）

cellspacing:外边距（单元格之间的距离）

bgcolor:设置表格的背景颜色

align:该行内容水平对齐方式

valign:该行内容的垂直对齐方式

top

middle

bottom

td/th

align：内容水平对齐方式

valign：内容垂直对齐方式

width ：宽度

height ：高度

colspan:设置单元格跨列

rowspan:设置单元格跨行

注意

传统的表格，每行的列数都是统一化的（每行的列数都相同）

一行中所有的单元格的高度都是相同的，默认下以最高的单元格为主

每行中相同列的宽度都是相同的，默认以最宽的单元格为主

表格标题

注意：标签必须紧随在<table>之后，并只能有一个

表格的复杂应用

行分组

表头行分组：<thead></thead>

表主体行分组：<tbody></tbody>

注意：如果不显示指定行分组的话，那么默认都在tbody中

表尾行分组：<tfoot></tfoot>

不规则表格

跨列

从指定单元格位置处，横向向右合并几个单元格

被合并掉的单元格要删除

colspan=值;

跨行

从指定单元格位置处，纵向向下合并截个单元格

被合并调的单元格要删除

rowspan=值;

表格的嵌套

表格是允许被嵌套的，但嵌套的表格必须要放在td中

boot项目3天

学子商城响应式布局

AJAXday1

URL

URL的语法

URL的完整格式： ://:@:/;?#

协议

SCHEME：方案，指定以哪种协议从服务器获取指定资源；方案名不区分大小写。常见方案：HTTP、HTTPS、FTP、MAILTO、RTSP、FILE、NEWS、TELNET等

主机／端口号

://:@:/;?# http://www.tedu.cn:80/news/n1001.html

HOST:主机名，资源所在服务器的IP地址或者域名（需要DNS转换为IP地址）

PORT：端口号，每项服务在服务器上都对应一个监听端口号

常见协议指定了一些默认端口号

FTP

文件上传、下载

SSH

安全的远程登录

TELNET

远程登录

SMTP

邮件传输

DNS

域名解析

HTTP

超文本传输

POP3

110

邮件接收

HTTPS

443

加密传输的HTTPS

用户名／密码

://:@:/;?# ftp://admin:123@172.163.99.171/adm/secret.xls

USER：用户名，某些方案访问资源时需要指定用户名

PWD：密码，默认值为e-mail地址

路径

://:@:/;?# ftp:// admin:123@ 172.163.99.171/adm/secret.xls

PATH：路径，服务器上资源的本地名称，由一个斜杠（／）将其与前面的URL组件分隔开来。

参数

://:@:/;?# https://www.ccb.com/login.jsp;jsessionid=DF8103FA

PARAMS：参数，某些方案会使用参数来指定输入参数，每个参数都采用“名／值对”形式，一个URL中可以有多个这样的“名／值对”，使用分号（;）分隔

查询字符串

://:@:/;?# https://www.baidu.com/s?wd=js&issp=1&f=8

QUERY：查询字符串，某些方案会使用查询字符串传递参数以激活应用程序。查询字符串内容没有通用格式，使用?与其它组件分隔

锚点（书签）

://:@:/;?# http://www.xiaoshuo.com/XiYouJi.html#chapter8

FRAG：片段，也称为ANCHOR（锚点）、TAG（书签），指一个资源中某一部分的名字。引用对象时，不会讲frag字段传送给服务器，该字段是在客户端内部使用的，通过#与其它部分分隔。

相对URL

绝对URL

包含访问资源所需全部信息

相对URL

URL本身包含的信息并不完整，必须参靠另外一个URL才能确定其完整内容信息。

HTTP协议

请求(Request)消息

请求起始行

请求方法

GET

表示客户端想获取服务器上的资源(img/js/html/css/video)

无请求主体

靠地址栏传递数据给服务器

POST

表示客户端想传递数据给服务器

请求主体

PUT

表示客户端想(放置文件)到服务器(禁用)

请求主体

DELETE

表示客户端想删除服务器上的指定文件(禁用)

HEAD

表示客户端只想获取指定的响应头

CONNECT

测试连接

TRACE

追踪请示路径

OPTIONS

选项，保留以后使用

请求URL

协议版本

HTTP/1.1

请求头

Host ：127.0.0.1

告诉服务器请求哪一个虚拟主机

Connection:keep-alive

告诉服务器要持久连接

User-Agent ：

告诉服务器自己的类型

Accept-Language ：zh-CN

告诉服务器自己能接收的自然语言

zh-CN : 简体中文

Accept-Encoding ：gzip

告诉服务器自己可以接收的压缩类型

Referer:http://127.0.0.1/05-PROJECT01/01-post.html

告诉服务器请求来自于哪个页面

请求主体

Form Data

响应(Response)消息

响应起始行

协议版本号

响应状态码

1xx ：100-199

提示信息

2xx

成功响应

200 ：OK

3xx

需要客户端进行重定向

301 ：永久性重定向

302 ：临时重定向

304 ： Not Modified

4xx

客户端请求错误

404 ：Not Found

403 ： Forbidden

405 ： Method Not Allowed 请求方法不被允许

5xx

服务器运行错误

500 ：服务器内部错误

501 ：没有实现

原因短句

对响应状态码的简单解释

响应头

Server

告诉客户端服务器的信息

Last-Modified

告诉客户端网页最后一次修改的时间

Content-Encoding

告诉客户端内容压缩方式

Connect

告诉浏览器启动持久连接

Content-Type

响应主体类型，告诉浏览器，响应数据的类型是什么

text/plain

纯文本

text/html

文本与网页

text/css

样式

application/javascript

js 代码片段

application/xml

application/json

images/jpeg

响应主体

Response

HTTP优化

HTTP性能优化

HTTP连接过程

（1）建立连接

（2）处理请求

（3）访问资源

（4）构建响应

（5）发送响应

（6）记录日志

HTTP连接性能优化

（1）创建连接：努力减少连接创建次数---使用Keep-Alive避免重复连接

（2）发送请求：尽力减少请求次数---合理设置缓存

（3）等待响应：提高服务器端运行速度---提高数据运算及查询进度

（4）接收响应：尽可能减少响应数据长度---启用压缩

安全的HTTP协议

HTTPS协议

安全版本的HTTP

安全连接建立过程

（1）客户端建立到服务器上的443端口上的连接

（2）双方初始化SSL层，沟通加密参数，交换密钥

（3）客户端发送请求消息，在SSL层加密；服务器接收到密文，在服SSL层解密，得到请求明文，对请求进行处理

（4）服务器发送响应消息，在SSL层加密；客户端接收到密文，在SSL层进行解密，得到响应明文，解析响应内容

（5）SSL关闭通知

（6）TCP连接关闭

AJAXday2

名词解释

同步

当一个任务未完成时，不能开启另一个任务

同步访问

在访问服务器时，客户端只能等待服务器的响应，不能做其他事情

异步

即便一个任务未完成，也不耽误另一个任务的执行

异步访问

在向服务器发送请求时，不耽误用户在网页上做其他的操作

AJAX

AJAX原理

什么是AJAX

Asynchronous Javascript And Xml（异步的Javascript 和 XML）

本质：使用JS提供的 XMLHttpRequest对象异步的向服务器发送请求并接收响应数据。AJAX中，服务器响应回来的是部分的数据而不是完整的页面，并且可以以无刷新的效果来更改页面中的局部内容

AJAX工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

获取AJAX对象

function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttprequest(); }else{ xhr=new ActiveXObject('Microsoft.XMLHttp'); } return xhr; }

new XMLHttpRequest()

new ActiveXObject("Microsoft.XMLHttp");

AJAX对象属性和方法

异步对象的属性和方法

abort()

取消请求

status

服务器返回的http请求响应值常用的有：

200：表示请求成功

202：请求被接受但处理未完成

400：错误的请求

404：资源未找到

500：内部服务器错误

getResponseHeader()

获取指定的Http头

open()

创建请求

xhr.open(method,url,isAsyn);

method

get

post

...

url

isAsyn

true : 异步

false: 同步

send(body)

发送请求

body ：请求主体

get提交方式此处为 null

post提交方式则为请求的数据

getAllResponseHeaders()

获取响应的所有Http头

onreadystatechange

发生任何状态变化时的事件控制对象

当 xhr 的readyState 发生改变时要自动激发的操作

xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ var resText = xhr.responseText; } }

readyState

表示 xhr 的请求状态

值

0 ：请求尚未初始化

1 ：已打开连接，正发送请求

2 ：请求完成

3 ：正在接收服务器的响应

4 ：接收响应成功

responseText

服务器返回的文本

responseXML

服务器返回的xml，可以当做DOM处理

setRequestHeader()

指定请求的Http头

onreadystatechange

绑定一个事件处理函数，该函数用来处理readystatechange事件

当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件

readyState

一共有五个值，分别是0，1，2，3，4，分别表示Ajax对象与服务器通信的状态，比如，当值为4时，表示Ajax对象已经获得了服务器返回的所有的数据

AJAX的使用

发送异步请求的步骤

（1）获取Ajax对象：获取XMLHttpRequest对象实例

（2）创建请求：调用XMLHttpRequest对象的open方法

（3）设置回调函数：为Ajax对象的onreadystatechange事件设定响应函数

（4）发送请求：调用Ajax对象的send方法

使用AJAX发送get请求

（1）获取Ajax对象

var xhr=getXhr(); function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttprequest(); }else{ xhr=new ActiveXObject('Microsoft.XMLHTTP'); } return xhr; }

（2）创建请求-GET请求

xhr.open('get','xx.php',true); 注意： true：表示发送异步请求（当Ajax对象发请求时，用户仍然可以对当前页面做其它的操作）。 False：表示发送同步请求（当Ajax对象发请求时，浏览器会锁定当前页面，用户不能对当前页面做其它操作）。

（3）回调事件处理函数

xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var txt=xhr.responseText; //DOM操作 } }

（4）发送请求：调用Ajax对象的send方法

xhr.send(null); GET请求： send方法内传递null 若要提交数据，则在open方法的“URL”后面追加如： xhr.open("get","xx.php?name=value&name=value",true)

使用AJAX发送post请求

post请求：需手动设置请求消息头为application／x-www-form-urlencoded send方法内传递的是提交参数，没有可为null

xhr=getXhr();

xhr.open('post','xx.php',true);

xhr.onreadystatechange=handle_ajax;

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send('name=value&name=value...');

AJAXday3

XML语法

XML概述

什么是XML

XML是可扩展标记语言(eXtensible Markup Language)

XML是一种标记语言，类似于HTML

XML的设计宗旨是传输数据，而非现实数据

XML的标签没有被预定义，需要自行定义

XML是W3C的推荐标准

基本语法

XML声明

XML声明必须为<?xml开头，以?>结束

声明必须从文档的0行0列位置开始

声明只有三个属性

version

指定XML文档版本。必须属性，因为我们不会选择1.1，只会选择1.0

encoding

指定当前文档的编码。可选属性，默认值是utf-8

XML语法

XML都是由标签组成，但是所有的XML元素必须都有关闭标签。

This is a xml target This is a xml target错误

XML标签对大小写敏感，必须使用相同大小写来编写和关闭标签

错误错误

XML必须正确嵌套

This a xml target This a xml target 错误

XML必须要有根元素

XML文档必须有一个元素是其他元素的父元素

XML的属性值必须加引号

元素

J K.Rowling J K.Rowling J K.Rowling

XML元素指的是从（且包括）开始标签直到（且包括）结束标签的部分。

元素可以包含其他元素、文本等。元素可以拥有属性

属性

J K.Rowling J K.Rowling J K.Rowling

XML元素可以在开始标签中包含属性，类似HTML

属性提供关于元素的额外（附加）信息，或用于修饰元素

属性值必须用引号引起来，单双引号均可使用

XML解析

JavaScript中的XML

XML DOM对象

IE浏览器通过ActiveXObject对象得到XML DOM对象 var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 其他浏览器通过DOMParser对象得到XML DOM对象 var parser=new DOMParser(); Var xmlDoc=parser.parseFromString(xmlFile,"application/xml");

XML DOM对象的支持

XML DOM定义了访问和操作XML文档的标准方法

DOM把XML文档作为树结构来查看。能够通过DOM树来访问所有元素。

加载并解析XML字符串

if(window.DOMParser){ parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"application/xml"); }else{ //Internet Explorer xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(txt); }

AJAX返回并解析XML

使用XHR发送XML字符串

var xmlString=""; xmlString+=""; xmlString+="John"; xmlString+="Denver"; xmlString+=""; xhr.send("xmlString="+xmlString);

使用XHR接收XML字符串

服务器端 header("content-type:text/xml"); $info="John"; echo $info; 客户端： var xmlElem=xhr.responseXML; 注意：xmlElem为XML Dom对象

JSON

JSON概述

JSON：JavaScript Object Notation，javascript对象表示法

轻量级的文本数据交换格式

广泛使用于存储和交换文本数据领域，作用与XML类似，但比XML更简洁、更快、更容易解析

JSON语法规则

JSON数据的基本格式是“名称／值”对 "salary":3500

数据在（属性：值）中

数据由逗号分隔

花括号保存对象

方括号保存数组

使用JSON

JSON对象

var jsonTxt='{ "ename":"Tom", "salary":3500, "isMarried":true }';

JSON字符串可以描述一个对象，具体语法为

书写在花括号中

可以包含任意多个使用逗号分隔的“名称／值”对；

“名称“必须使用双引号括起来；值若是字符串也必须使用双引号括起来。

JSON数组

JSON字符串还可以描述一个数组，具体语法为：

书写在方括号中；

其中可以包含多个值或对象；

JSON文档与对象的转换

JSON.parse(string)

var jsonTxt='{"x":60,"y":30}'; var jsObj=JSON.parse(jsonTxt);

解析JSON字符串得到JavaScript对象

Project1

学子商城用户模块实战-1

Project2

学子商城用户模块实战-2

CSS3Basic1

CSS概述

什么是CSS

Cascading Style Sheets

层叠样式表，级联样式表，样式表

用于HTML文档中元素的样式定义

实现了内容与表现分离

提高代码的可重用性和可维护性

CSS与HTML之间的关系

HTML用于构建网页的结构

CSS用于构建HTML元素的样式

CSS与HTML之间的使用原则

W3C建议尽量使用CSS样式取代HTML属性

如果为HTML所特有属性，则使用HTML属性

CSS语法

CSS样式表的使用方式

内联方式

将样式定义在元素的style属性里

语法

样式声明

属性名:属性值

特点

只针对一个元素有效

不通用，无法提高可重用性和可维护性

内部样式表

将样式定义在页面<style></style>中

样式规则

选择器

规范页面中哪些元素能够使用定义好的样式

样式声明

属性:值

特点

在一个页面中能够提升可重用性和可维护性

外部样式表

允许将样式定义在外部的的样式表文件中

步骤

创建一个单独的样式表文件用来保存样式规则

纯文本文件，文件后缀为.css

该文件中只能包含样式规则

新式规则由选择器和样式声明组成

在需要使用该样式表文件的页面上，使用<link>元素链接外部样式表文件

CSS样式表特征

继承性

大多数CSS的样式属性是可以被继承的

层叠性

可以为一个元素定义多个样式规则

样式属性不冲突时，多个样式表中的样式可以层叠为一个

优先级

样式定义冲突时，会按照不同使用方式的优先级来应用样式

浏览器缺省设置

外部样式表和内部样式表

就近原则

内联样式

!important

可以显示的调整样式规则的优先级

语法

属性：值 !important;

CSS基础选择器

通用选择器

作用

用于匹配页面上的每一个元素

可用于页面上所有元素的元素样式定义

语法

*{ }

*{ color:#666; font-size:12px; }

body{ color:#666; font-size:12px; }

元素选择器

作用

用于匹配页面上指定标记的元素

通常用于设定某一种元素的默认样式

语法

元素名称{ }

类选择器

作用

可以由任意元素的class属性进行引用的选择器

在CSS中，类选择器是最灵活的选择器，应用也非常广

语法

定义

.className{}

.是定义类选择器的语法规范，并不是类选择器的名称

命名规范

由字母，数字，下划线，-

不能以数字开始

引用

多类选择器的引用

允许一个元素引用多个类选择器

分类选择器的定义

作用

将类选择器和元素选择器结合起来使用

从而实现对某种元素中不同样式的细分控制

语法

元素选择器.类选择器{}

div.redColor{ }

p.important{ }

ID选择器

作用

与页面指定ID值的元素进行匹配（私人定制）

语法

#idValue{}

#仅仅表示该选择器是ID选择器而已

群组选择器

作用

选择器声明有是以逗号隔开的选择器列表

可以将一部分样式相同的选择器放在一起定义

语法

选择器1，选择器2，选择器3{ }

div,#main,.top{ color:red;}

后代选择器

作用

通过元素间的后代关系匹配元素

后代关系：出现在某元素的子元素（不限制层级）

语法

选择器1 选择器2{ }

子代选择器

作用

通过元素的子代关系匹配元素

子代关系：只存在一层子级关系的子元素昀ꗗߐĀ衪

语法

选择器1>选择器2{ }

伪类选择器

作用

用于匹配元素不同状态的选择器

链接伪类

:link

适用于尚未访问的链接

:visited

适用于访问过的链接

动态伪类

:hover

适用于鼠标悬停在HTML元素时

:active

适用于HTML元素被激活时

:focus

适用于HTML元素获取焦点时

……

选择器优先级

权值

元素选择器

类选择器

伪类选择器

ID选择器

100

内联样式

1000

选择器的权值加到一起，大的优先;如果权值相同，后定义的优先

#main div.top a:hover{ /*权值：*/ }

尺寸与边框

单位

尺寸

颜色（取值）

rgb(r,g,b)

rgba(r,g,b,a)

a : alpha , 透明度 0-1 之间的小数

#rrggbb

#rgb

颜色的英文表示法

尺寸

作用

用于设置元素的宽度和高度

单位一般为像素或百分比

宽度

width

min-width

max-width

高度

height

min-height

max-height

允许设置尺寸的元素

块级元素

行内块元素（radio,checkbox除外）

具备width和height属性的HTML元素

img

table

溢出

当使用尺寸属性限制元素的大小时，如果内容所需的空间大于元素本身的话，就会导致内容溢出

属性

overflow

visible

hidden

scroll

auto

overflow-x

overflow-y

边框

简写方式

border:width style color;

width:边框宽度

style:边框样式

solid

dotted

dashed

color:颜色

可取值为 transparent

border:none; 或 border:0;

单边定义

border-方向:width style color

方向

top

right

bottom

left

单属性定义

border-属性:值;

属性

width

style

color

单边单属性定义

border-方向-属性:值；

方向

top

right

bottom

left

属性

width

style

color

border-top-color : 上边框颜色

border-bottom-style : 下边框样式

border-left-color:左边框颜色

边框的组成

div{ width:0px; height:0px; border:5px solid transparent; border-top-color:red; }

边框倒角

语法

属性

border-radius

取值

绝对值

百分比

单独定义

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

边框阴影

属性

box-shadow

h-shadow

必需，为水平阴影的位置

v-shadow

必需，为垂直阴影的位置

blur

可选，模糊距离

spread

可选，阴影的尺寸

color

可选，阴影的颜色

inset

将外部阴影(outset)改为内部阴影

边框轮廓

轮廓是绘制于元素周围的一条线，位于边框的外围

属性

outline:width style color

outline-width

轮廓的宽度

outline-style

轮廓的样式

outline-color

轮廓的颜色

取消轮廓

outline:none; / outline:0;

CSS3Basic2

框模型

什么是框模型

页面元素皆为框

Box Model，定义了元素框处理元素内容、内边距、外边距、边框的方式

width 和 height 只负责定义内容区域的尺寸

增加了外边距、内边距、边框，内容区域的尺寸不会发生改变，但会影响元素框的总尺寸

元素总宽度=左右外边距+左右边框+左右内边距+width

元素总高度=上下外边距+上下边框+上下内边距+height

外边距

什么是外边距

围绕在元素边框周围的空白区域

默认不能被其他元素所占据

外边距是透明的

属性

margin

单位

auto

设置非行内元素的水平对齐方式

auto对上下外边距不起作用

元素要设置宽度

负值

将元素向着反方向移动

数量

value

四个方向外边距

v1 v2

上下左右

v1 v2 v3

上左右下

v1 v2 v3 v4

上右下左

单边设置

margin-left

margin-right

margin-top

margin-bottom

具备默认外边距的元素

body

h1~h6

ul,ol

dl,dd

pre

可以通过 CSS 重写的方式重写外边距

p,h1,h2,h3,h4,h5,h6,body,ul,ol,dl,dd,pre{ margin:0; }

外边距的特殊情况

外边距合并

两个垂直外边距相遇时，他们将合并为一个，值以大者为主

外边距溢出

特殊情况下，给子元素设置外边距的时候，效果会作用在父元素上

父元素无边框

设置给第一个(最后一个)子元素时

解决方案

父元素增加边框

使用父元素的上内边距来取代子元素的上外边距

在第一个子元素位置处增加空 table

行内元素以及行内块元素

行内

只左右有效，上下无效

行内块

左右正常，上下连同该行元素都会跟着改变

内边距

什么是内边距

内容与边框之间的距离

会扩大元素边框所占用的区域

属性

padding

单位

数量

同上

padding-方向:值

特殊效果

只影响到元素本身，并不会影响到其他元素

box-sizing

作用

重新指定框模型的计算模式

取值

content-box

默认值

border以及padding是在width和height基础之上额外计算的

border-box

元素的padding和border会计算在width 和 height之内

背景

背景是从边框位置开始绘制

背景颜色

background-color

背景图像

background-image

url()

背景重复

background-repeat

repeat 默认值

no-repeat 不重复

repeat-x 横向重复

repeat-y 纵向重复

背景图片尺寸

background-size

value1 value2

value1% value2%

cover

覆盖，背景图显示不完整

containt

包含，背景图显示完整，覆盖不一定全面

背景图像固定

background-attachment

scroll

fixed : 固定

背景图像定位

background-position

x y

x : 水平偏移距离

+ ：右偏移

- ：左偏移

y:垂直偏移距离

+ ：下偏移

- ：上偏移

x% y%

left、center、right、top、bottom

综合属性

background：color url() repeat attachment position;

渐变

什么是渐变

多种颜色平缓变化的一个效果

渐变的分类

线性渐变

径向渐变

重复渐变

语法

线性渐变

background-image:linea-gradient(angle,color-point,....);

angle

关键字

to top

to right

to bottom

to left

角度

0deg ~ 360deg

color-point

red 0px

green 0%

blue 50%

background:linear-gradient(to top,#0aa1ed,#e4393c);

HTMLday2

列表

列表的作用

列表是将一组具有相似特征或者具有先后顺序的内容按照从上到下的顺序排列在一起

组成

列表类型

有序列表<ol></ol>

无序列表<ul></ul>

列表项

使用列表

有序列表

特点：按照一定的顺序将列表项标识出来

语法：<ol></ol>

只能包含列表项<li></li>

属性

type

作用：有序列表的类型

取值

start

作用：起始编号

取值：数字

无序列表

特点：用于列出页面上没有特定次序的一些内容

语法：<ul></ul>

只能包含列表项<li></li>

属性

type

作用：指定无序列表的列表项标识

取值：

disc，默认，实心圆

circle，空心圆

square，实心矩形

none，不显示标识

列表的嵌套

列表中允许嵌套列表以形成更为复杂的结构

但被嵌套的列表必须要放在 <li></li>中

定义列表

定义：定义列表往往用于要给出一类事物的定义的情形

标记

定义定义列表

定义定义列表中的术语

定义对属于的解释

使用场合：图文混排时使用

结构标记

作用

HTML5所提供的结构标记，专门用于表示常见的网页结构（即布局）

常见结构标记

header元素

作用

用于定义文档的页眉即页面顶部信息

在页面上允许出现多次，可以作为任何部分的头部定义

标记

nav元素

作用

用来定义页面的导航链接部分

标记

section元素

作用

用于定义文档中的节，也可以表示文档中的一个具体的部分即主体内容

标记

article元素

作用

用于定义独立于文档的其他部分内容

如：论坛中的帖子，报纸的文章，博客条目或微博信息等

标记

footer元素

作用

用于定义某区域的脚注信息

一般靠近于某区域底部或页面底部内容

标记

aside

作用

定义页面的额外组成部分

一般多用于侧边栏和相关引用信息等

标记

表单

表单概述

表单的作用

用于显示、收集信息，并提交信息到服务器

两个基本部分

实现数据交互的可视化界面元素（前端）昀ꗗߐĀ퇐荁

表单控件元素

提交后的表单处理（服务器端）

表单元素(form)

作用

收集用户信息并提交给服务器

里面包含与用户交互的表单控件元素

注意：表单元素在页面是不可见的，但不能省略

语法

标记

属性

action

作用

定义表单被提交时发生的动作，即要提交的服务器地址

取值

服务器端的处理程序地址，如*.jsp,*.php,*.do等

需要与服务器端开发人员沟通

method

作用

表单数据提交的方式

取值

get

明文提交，提交的数据是可以显示在地址栏上的

安全性较低

大小限制为2KB

post

隐式提交，所提交的数据是不显示在网页上的

安全性较高

无大小限制

……

enctype

作用：指定表单数据的编码方式

取值

application/x-www-form-urlencoded

multipart/form-data

text/plain

<input>元素

用户收集用户信息并提供不同的输入字段昀ꗗߐĀ灐菏

语法

标记

<input>

主要属性

type

根据不同的type属性值可以创建各种类型的输入字段

text

password

submit

reset

button

file

hidden

radio

checkbox

value

最终提交给服务器的值

name

控件的名称，提供给服务器使用

disabled

禁用控件，该属性没有值

表现形式

文本框与密码框

标记

文本框

密码框

属性

name

名称

value

提交给服务器的值，可以是用户输入的数据

maxlength

限制输入的字符数

readonly

设置文本控件只读

placeholder

占位符，默认显示在控件上的文本

单选按钮和复选框

标记

单选按钮

复选框

属性

name

设置名称，并用于分组，一组单选按钮或复选框我名称必须相同

value

控件的值

checked

设置默认被选中

按钮

标记

提交按钮

重置按钮

普通按钮

属性

name

value

按钮上的文本

隐藏域和文件选择框

标记

隐藏域

文件选择框

属性

隐藏域

name

value

文件选择框

name

注意

文件选择框

form的method必须为post

form的enctype必须为multipart/form-data昀ꗗߐĀⅰ胈

textarea 元素

标记

属性

name

名称

cols

指定文本区域的列数

rows

指定文本区域的行数

readonly

只读

select 和 option 元素昀ꗗߐĀ菈

选项框

标记

属性

name

名称

size

默认显示的选项数量，大于1，则为滚动列表

multiple

设置多选，该属性没有值

选项

标记

属性

value

选项的值

selected

预选中

其他元素

label元素

作用

关联文本与表单控件

关联后，点击文本如同点击表单控件

语法

标记

属性

for

与该元素相联系的控件ID值

fieldset

作用

为控件分组

标记

浮动框架

作用

可以在一个浏览器窗口中同时显示多个页面文档

语法

标记

注意

内容，可以为普通的文本描述，当浏览器不支持<iframe>元素时，将显示该文本描述信息

属性

src

浮动框架中的网页URL

width

宽度

height

高度

frameborder

浮动框架边框

新表单元素

新的input类型

电子邮件：type="email"

搜索类型：type="search"

URL类型：type="url"

电话号码类型：type="tel"

数字类型：type="number"昀ꗗߐĀ㿐蠓

min

max

step

范围类型：type="range"

min

max

value

step

颜色类型：type="color"

日期类型：type="date"

周类型：type="week"

月份类型：type="month"

CSS3Basic4

显示

显示方式

属性：display

none

让生成的元素没有框

脱离文档流

block

块级元素

独占一行

允许修改尺寸

正常处理垂直外边距

inline

行内

inline-block

行内块

位置与行内元素一样

允许修改宽和高

table

独占一行

尺寸以内容为准

... ...

显示效果

显示/隐藏

属性：visibility

visible ：可见的

hidden ：隐藏的

面试：display:none 和 visiblity:hidden的区别

display：none ；脱离文档流，所以不占页面空间

visibility：hidden；还在文档流中，所以只是隐藏了，空间还占据

透明度

属性：opacity

0~1之间的数字(小数)

数字越小透明度越高

opacity：0.1；若隐若现

垂直居中对齐

属性：vertical-align

行内块元素

单元格

img

取值

top

middle

bottom

baseline

光标

cursor

default

pointer

crosshair

text

wait

help

列表

列表项标志

list-style-type

none

disc

... ...

列表项图像

list-style-image

url(图像路径)

列表项位置

list-style-position

outside

inside

列表属性

list-style

type url() position;

常用：list-style:none;

定位

定位属性

position

static ：静态，默认

relative ：相对定位

absolute ：绝对定位

fixed ：固定定位

作用：实现元素的特殊定位方式，relative，absolute，fixed 称之为 “已定位元素”

偏移属性

top属性

上下移动元素

+ ：下移动

- ：上移动

bottom属性

上下移动

+ ：上移动

- ：下移动

left 属性

左右移动

+ ：右移动

- ：左移动

right 属性

左右移动

+ ：左移动

- ：右移动

z-index

堆叠顺序

相对定位

what？

元素框会相对于它原来的位置偏移某个距离

属性 & 值

position:relative;

配合偏移属性实现位置移动

测试：对一个已定位元素实现四个偏移属性值

使用场合

自身元素的位置微调

配合着绝对定位来使用

绝对定位

what ？

脱离文档流-不占据页面空间

会相对于最近的已定位祖先元素去实现定位

如果没有已定位的祖先元素，那么就相对于最初的包含块-body

属性 & 值

position:absolute;

注意

绝对定位的元素都将变成块级元素

margin的处理，除了 auto外，其他数值均正常显示

#d1{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }

可以调整堆叠顺序

堆叠顺序

属性：z-index

取值：数字

注意：只有在已定位元素中才能使用

固定定位

what

将元素固定在页面的某个位置处

不会随着滚动条的滚动而发生位置的变化

脱离文档流，不占据页面空间

属性 & 值

position:fixed

注意

脱离文档流

会变为块级元素

永远都是相对于body实现位置初始化

CSS3Core1

复杂选择器

兄弟选择器

相邻兄弟选择器

选择器1+选择器2

通用兄弟选择器

选择器1~选择器2

属性选择器

[attr]

匹配页面中具备attr属性的所有元素昀ꗗߐĀ剰潵

[attr1][attr2]

匹配页面中既有attr1属性同时也具备attr2属性的元素

elem[attr]

匹配页面中具备attr属性的elem元素

[attr=value]

匹配页面中attr属性值为value的元素

伪类选择器

目标伪类

:target

匹配活动的html 锚元素

结构伪类

:first-child

匹配属于其父元素中的首个子元素

:last-child

匹配属于其父元素中的最后一个子元素

:nth-child(n)

匹配属于其父元素中的第n个子元素

:empty

匹配每个为空的元素

:only-child

匹配属于其父元素中的唯一子元素

否定伪类

:not(selector)

将满足selelctor选择器的元素排除出去

伪元素选择器

:first-letter或 ::first-letter

首字符

:first-line 或 ::first-line

首行

::selection

被用户选取的部分

内容生成

伪元素择器

:before 或 ::before

匹配元素的内容区域之前

:after 或 ::after

匹配元素的内容区域之后

属性：content

生成内容

字符串

图像:url()

解决问题

浮动元素

.clear:after{ content:""; display:block; clear:both; }

外边距的溢出

选择器:before{ content:""; display:table; }

弹性布局

指定某元素内子元素的布局方式，为布局提供最大的灵活性

概念

弹性布局的容器

弹性布局的项目

主轴(Main Axsis)

决定项目们排列方向的一根轴

交叉轴（Cross Axsis）

与主轴相交叉轴的一根轴

语法

display

flex

inline-flex

注意

元素设置为flex容器后，子元素的float,clear,vertical-align属性会失效

元素设置为flex容器后，子元素的尺寸允许被修改

容器text-align也会失效

容器属性

flex-direction

作用

决定在主轴的排列方向

取值

row

主轴为水平方向，起点在左端，默认值

row-reverse

主轴为水平方向，起点在右端

column

主轴为y轴，起点在上端

column-reverse

主轴为y轴，起点在底端

flex-wrap

作用

如果一条轴线排不下，如何换行

取值

nowrap

默认值，不换行

wrap

换行，第一行在上方

wrap-reverse

换行，第一行在下方

flex-flow

作用

flex-direction 和 flex-wrap的缩写

取值

direction wrap

justify-content

作用

定义了项目在主轴上的对齐方式

取值

flex-start

主轴的起点对齐

flex-end

主轴的终点对齐

center

居中对齐

space-between

两端对齐，项目之间的间隔都相等

space-around

每个项目两侧的间隔相等

align-items

作用

定义项目在交叉轴上如何对齐（一行项目）

取值

flex-start

在交叉轴的起点对齐

flex-end

在交叉轴的终点对齐

center

在交叉轴的中间对齐

baseline

在项目的第一行文字的基线对齐

stretch

默认值，如果项目未设置高度或auto，将站门整个容器的高度

项目属性

order

项目排序

取值：数字，数字越大越靠后

flex-grow

定义项目的放大比例，默认为0，即如果有剩余空间，也不放大

取值：整数数字

flex-shrink

定义项目的缩小比例，默认为1

align-self

定义项目在交叉轴上的对齐方式

取值

flex-start

flex-end

center

stretch

baseline

auto

CSS Hack

CSS类内部Hack

+ ：IE7，6

- : IE 6

\0 : IE 8，9，10

\9\0：IE9 ,10

选择器Hack

*p{ } //IE6

头部引用Hack

条件

省略

判断是否为指定版本或是否为 IE浏览器

判断是否大于条件版本浏览器(不包含)

gte

lte

CSS3Core2

转换

介绍

改变元素在页面中的位置，尺寸，角度，形状

2D转换和 3D转换

属性

转换属性

transform

none

transform-functions

多个转换函数之间用空格隔开

转换原点

transform-origin

v1 v2

x轴 y轴

v1 v2 v3

x y z

单位

关键字

2D转换

位移

函数：

translate(x)

+ : 向右

- ：向左

translate(x,y)

translateX(x)

translateY(y)

+ ：向下

- ：向上

缩放

函数

scale(value)

只给一个值，相当于 x轴和y轴的缩放是相等的

scale(x,y)

scaleX(x);

scaleY(y)

取值

小于1 大于 0

缩小

大于1

放大

小于0

水平和垂直反转

放大

旋转

函数

rotate(ndeg)

n 为正顺时针转

n为负逆时针转

注意

1、转换原点可能影响转换效果

2、元素转换后，坐标轴一同旋转的。旋转后做位移可能会有不同的效果

倾斜

函数

skew(x)

让元素向着x轴的方向(横向)倾斜，实际改变的是y轴的倾斜角度,取值为正逆时针

skew(x,y)

skewX(x)

skewY(y)

让元素向着y轴的方向倾斜(纵向)，实际改变的是x轴的倾斜角度，取值为正，顺时针

3D转换

属性

perspective：value；

注意

该属性要加在3D转换元素的父元素上

3D旋转

rotatex(xdeg)

rotatey(ydeg)

rotatez(zdeg)

rotate3d(x,y,z,ndeg)

过渡

什么是过渡

使CSS属性值在一段时间内平滑过渡

主要观察的是过程和结果

属性(要素)

过渡属性

transition-property

颜色属性

取值为数值

转换 - transform

渐变属性

visibility

阴影

过渡时长

transition-duration

s | ms

1000ms = 1s

300ms / 0.3s / .3s

过渡速度时间曲线函数

transition-timing-function

ease

linear

ease-in

ease-out

ease-in-out

过渡延迟

transition-delay

过渡属性(综合)

transition：property duration timing-function delay;

动画

使得元素从一种样式逐渐变化为另一种样式(复杂的过渡)

动画使用步骤

声明动画

为动画起名，并且设置关键帧

关键帧：某个时间点上，元素的特殊样式

为元素调用动画

声明动画

@keyframes 名称{ 0% | from{ 样式； } ....... 100% | to{ 样式; } }

@-webkit-keyframes 名称{}

使用动画

animation-name

绑定的动画名称

animation-duration

动画一个周期的时长

animation-timing-function

速度时间曲线函数

animation-delay

延迟

animation-iteration-count

播放次数

具体数值

infinite : 无限次

animation-direction

播放方向

normal

正常

reverse

逆向

alternate

轮流播放

animation：name duration timing-function delay iteration-count direction

animation-fill-mode

动画播放前后的填充状态

none ：默认

forwards ：动画完成后，保持在最后一个帧的状态上

backwards：动画播放前（延迟时间内），保持在第一个帧的状态上

both

animation-play-state

paused ：暂停

running ：播放

CSS优化

CSS优化概述

减轻服务器压力

缩短服务器响应时间

提高用户的体验度

CSS优化原则

尽量减少HTTP请求个数

CSS sprites:合并多个背景图像到一个单独图像，然后通过background-image和background-position进行调整 Image maps：结合多个图像到一个单独图像。

页面顶部引入CSS

可以提高页面加载速度样式表放在头部，允许页面逐步呈现

将CSS和JS放到外部文件中

页面引入外部文件，将由浏览器缓存后续页会使用缓存

CSS代码优化

合并样式

缩小样式文件

选择更优的样式属性值

减少样式重写

代码压缩

不要在HTML中缩放图像

避免空的src和href

Bootstrap1

响应式网页

概述

什么是响应式

智能地根据用户行为或使用设备环境进行相应的布局

响应式网页的构成

流式网格布局

可伸缩的图片和文字

css3 Media Query技术

测试

使用真实物理设备测试

使用第三方模拟器软件测试

使用浏览器提供的设备模拟器测试

编写

head中：<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

不适用绝对宽度，相对大小的字体

流式布局

图片自适应

选择加载css

css的@media规则

Bootstrap起步

概述

移动设备优先，兼容pc端的响应式网页

构成

起步

全局css样式

组件

jQuery插件

定制

环境搭建

基本模板

声明

元数据

样式

脚本

兼容性

bootstrap.css

css Reset

使用css代码改写浏览器的默认设置，保证兼容性

box-sizing

用于赊着元素的框模型的方式

取值

content-box

border-box

全局css样式

html5文件类型

<!DOCTYPE html> <html lang="zh-cn">...</html>

移动端设备优先

css全局样式

background-color：#fff； @font-family-base、@font-size-base和@line-hieght-base

布局容器

.container

.container-fluid

按钮

五种颜色

（首选项）Primary

（成功） Success

（一般信息）lnfo

（警告）Warning

（危险）Danger

三种尺寸

（大按钮）Large button

（默认尺寸）Default button

（小按钮）Small button

图片

响应式图片

class=“img-fluid”

图片形状

rounded

rounded-circle

img-thumbnail

文本

对齐

text-left、text-center、text-right、text-justify、text-nowrap

大小写

text-lowercase、text-uppercase、text-capitallize

颜色

text-success、text-warning、text-error、text-info、text-primary

Bootstrap2

全局css样式

列表

无序列表和有序列表

列表样式

.list-unstyled

.list-inline

.list-group

.list-group-item

.active

.disabled

表格

基本表格

.table

条纹状表格

.table-striped

带边框表格

.table-bordered

鼠标悬停

.table-hover

响应式表格

.table-reponsive

辅助样式

浮动

.float-left

.float-right

.clearfix

显示

.visible

.invisible

背景

bg-success/warning/error/info/primary

边框

.border/border-0/border-top/border-left/……

居中

.mx-auto

尺寸

.w-*/h-*/m-*/p-*

栅格布局

概述

随屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列，通过一系列的行（row）与列（column）的组合来创建页面布局

工作原理

.container/.container-fluid----》row----》column

内容放置在column中，只有列可以做row的直接子元素

布局

每行12列，通过不同的列来划分元素的占地宽度

弹性布局

d-flex/d-inline-flex 类创建弹性容器

响应式布局

.d-sm/md/lg/xl-flex

水平方向

.flex-row

.flex-row-reverse

垂直方向

.flex-column

.flex-column-reverse

内容排列

justify-content-*

表单

垂直表单

水平表单

单行输入框

.form-control

多行文本域

form-control

多选和单选框

内联多选和单选框

下拉列表

form-control

组件

常用组件

下拉菜单

基本格式

标题

分割线

禁用

按钮组

基本按钮组

按钮工具栏

尺寸

.btn-group-lg|sm|xs

垂直排列

警告框

......

Bootstrap3

组件

常用组件

导航

选项卡

胶囊式标签页

垂直标签

对齐方式

导航条

导航条按钮

导航条项目

非导航链接

折叠

.collapse 用于指定一个折叠元素，点击按钮后会在隐藏与显示之间切换

固定

.fixed-top|bottom

卡片

创建卡片

卡片头部

卡片内容

卡片底部

媒体对象

结构

构成

.media-body、align-self-*

列表组

用于显示多个条目

定制内容

轮播

创建轮播 .carousel

为轮播添加指示符 .carousel-indicators

添加要切换的图片 .carousel-inner

指定每个图片的内容 .carousel-item

模态框

<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <div class="modal-body"> <div class="modal-footer"

其他组件

徽章

<button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> <button>

巨幕

<div class="jumbotron"><h1> Hello,world</h1></div>

分页

分页条

尺寸

.pagination-lg

.pagination-sm

面包屑导航

缩略图

进度条

Bootstrap4

Bootstrap定制

SCSS概述

动态样式语言

动态语言为css赋予了动态语言的特性，极大提高了样式语言的可维护性

什么是scss

Scss 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量、嵌套、混合、导入、函数等高级功能，这些拓展令 CSS 更加强大与优雅

使用scss

服务器

1.安装nodejs解释器

2.安装scss编译程序:npm install -g node-sass

3.在命令行运行scss转换程序(node-sass d:/input.scss d:/output.css)；或者把scss转换程序配置为Webstorm中的“文件监视器”(node-sass -w d:/input.scss d:/output.css )

LESS语法

注释

多行注释

/*多行注释，会被转换到生成的.css文件中*/

单行注释

// 单行注释，不会被转换到生成的.css文件中

变量

可以将需要多次使用的数据声明为一个变量，反复使用。

ex：$jd_red:#e4393c; $thin_border:2px;

嵌套规则

scss可以让我们以嵌套的方式简化样式的编写且可读性更高

ex： #content { div{ h1 { color: #333 } p { margin-bottom: 1.4em } } a{ background-color: #EEE } }

父选择器的标识符&

div a { color: blue; &:hover { color: red } }

属性嵌套

nav { border: { style: solid; width: 1px; color: #ccc; } }

导入scss文件

使用scss的@import规则导入文件，可以省略.scss文件后缀

混合器

可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义

定义混合器 @mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

使用混合器 .notice{ background-color: green; border: 2px solid #00aa00; @include rounded-corners; }

带参混合

通过参数，可以使用混合器把样式中的通用样式抽离出来，然后在其他地方重用。

@mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }

使用带参混合器

a { @include link-colors(blue, red, green); }

继承

继承是说一个选择器可以继承另一个选择器定义的所有样式

. error{ border: 1px solid red; background-color: yellow; }

.seriousError { @extend .error; border-width: 3px; }

运算

任何数字、颜色、字符串等变量都可以进行运算

$base：5%; @filler:$base*2;

p { color: #010203 + #040506; }

font-family: sans- + "serif";

函数

颜色自定义函数

rgba(red,green,blue,alpha)

hsl(hue,saturation,lightness);

数字函数

round($value)：将数值四舍五入，转换成一个最接近的整数；

ceil($value)：向上取整；

floor($value)：向下取整；

min($numbers…)：找出几个数值之间的最小值；

max($numbers…)：找出几个数值之间的最大值；

字符串功能

unquote（$string）:删除字符串中的引号；

quote（$string）：给字符串添加引号；

To-upper-case（$string）：将字符串小写字母转换为大写字母

To-lower-case（$string）：将字符串大写字母转换为小写字母

自定义函数

Scss支持自定义函数使用关键词@function定义，需要调用 @return 输出结果。

@function 函数名($n) { @return 运算表达式; }

控制指令

选择器 { @if 条件{ …… } }

选择器 { @if $变量== 值{ …… } @else if $变量== 值{ …… } @else { …… } }

CSS3Basic3

文本格式化

字体属性

字体系列 font-family

字体1,字体2

字体大小 font-size

px 或 pt 或 em

字体加粗 font-weight

normal

bold

value

字体样式 font-style

normal

italic

小型大写字母 font-variant

normal

small-caps

字体属性 font

style variant weight size family;

文本属性

文本颜色 color

文本排列 text-align

left

center

right

justify

两端对齐

文字修饰 text-decoration

none

underline

line-through

overline

行高 line-height

一行数据所占的高度，如果行高大于文字本身高度，那么该行文本将在行高的范围内垂直居中

使用场合

一行文本垂直居中

将行高与元素的高度设置为一致

多行文本的行间距

取值

指定数值

无单位的数字表示当前字体大小的倍数

font:12px/24px "微软雅黑";

文字大小为12px，行高为24px，字体是微软雅黑

首行文本缩进 text-indent

文本阴影 text-shadow

h-shadow v-shadow blur color

表格

常用属性

padding

width，height

文本格式化

字体

文本

background

border

vertical-align

top

middle

bottom

特有属性

边框合并 border-collapse

默认值：separate

collapse

边框边距 border-spacing

前提：必须为分离边框模式即 border-collapse：separate

1个值

水平和垂直间距相同

2个值

第一个值：水平间距

第二个值：垂直间距

标题位置 caption-side

top

bottom

显示规则 table-layout

auto

自动表格布局

单元格大小会适应内容大小

复杂表格时加载速度较慢

适用于不确定每列大小时使用

传统表格体现方式

fixed

固定表格布局

列宽度取决于table和td中设置的宽度，与内容无关

加速显示表格

算法较快，但是不灵活

浮动

定位概述

所谓定位指的就是元素出现在网页的位置昀ꗗߐĀ㟰薮

定位的分类

普通流定位

浮动定位

相对定位

绝对定位

固定定位

普通流定位

普通流定位，又称为文档流定位，是页面元素的默认定位方式

页面中的块级元素：从上到下的方式一个接一个的排列

页面中的行内元素：从左到右的方式一个接一个的排列

浮动定位

概述（特征）

将元素排除在文档流之外即脱离文档流，元素不再占据页面空间（但依然会显示），但其他未浮动元素要目前补位

元素只会在当前行浮动

浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上

浮动元素依然会在包含框内

浮动元素能够让多个块级元素在一行内显示

属性

float

none

默认值，没有任何的浮动效果

left

左浮动，让该元素停靠在父元素的左边，或停靠在左侧已有的浮动元素边缘上

right

右浮动，让该元素停靠在父元素的右边，或停靠在右侧已有的浮动元素边缘上

浮动带来的特殊效果

一行内，显示不下所有的已浮动元素时，最后一个将换行（有可能被卡住）

元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定)

元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大

文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素

清除浮动

作用

清除当前元素前面元素浮动所带来的影响

语法

属性

clear

取值

none

默认值，不做任何清除浮动的操作

left

清除前面元素左浮动带来的影响

right

清除前面元素右浮动带来的影响

both

清除前面元素所有浮动带来的影响

浮动元素对父元素的影响

影响

由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0

解决方案

直接设置父元素的高度

设置父元素浮动

为父元素设置overflow属性

hidden

auto

父元素中，追加空子元素，并设置其clear属性为both