整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Web项目封装为PC客户端，其中一种方式就是运用 node-webkit 。
node-webkit 是一个基于node.js和 chromium的应用程序运行环境，通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用，也就是我们所说的客户端，而且还支持跨平台。
————————————————
3.新建一个index.html 文件
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
// 以下方式直接跳转
window.location.href='https://blog.csdn.net/qq_41464123';
</script>
</body>
</html>
package.json完整代码
{
/**指定程序的起始页面。*/
"main": "index.html",
/**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
"name": "OA",
/**程序描述*/
"description": "OA办公系统",
/**程序版本号*/
"version": "1.0.0",
/**关键字*/
"keywords": ["demo","node-webkit"],
/**bool值，如果设置为false，将禁用webkit的node支持。*/
"nodejs": true,
/**
* 指定一个node.js文件，当程序启动时，该文件会被运行，启动时间要早于node-webkit加载html的时间。
* 它在node上下文中运行，可以用它来实现类似后台线程的功能。
* （不需要可注释不用）
*/
//"node-main": "js/node.js",
/**
* bool值。默认情况下，如果将node-webkit程序打包发布，那么只能启动一个该应用的实例。
* 如果你希望允许同时启动多个实例，将该值设置为false。
*/
"single-instance": true,
/**窗口属性设置 */
"window": {
/**字符串，设置默认title。*/
"title": "OA",
/**窗口的icon。*/
"icon": "img/tubiao.ico.png",
/**bool值。是否显示导航栏。*/
"toolbar": false,
/**bool值。是否允许调整窗口大小。*/
"resizable": true,
/**是否全屏*/
"fullscreen": false,
/**是否在win任务栏显示图标*/
"show_in_taskbar": false,
/**bool值。如果设置为false，程序将无边框显示。*/
"frame": true,
/**字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。*/
"position": "center",
/**主窗口的的宽度。*/
"width": 1920,
/**主窗口的的高度。*/
"height": 1080,
/**窗口的最小宽度。*/
"min_width": 400,
/**窗口的最小高度。*/
"min_height": 335,
/**窗口显示的最大宽度，可不设。
"max_width": 800,*/
/**窗口显示的最大高度，可不设。
"max_height": 670,*/
/**bool值，如果设置为false，启动时窗口不可见。*/
"show": true,
/**是否在任务栏显示图标。*/
"show_in_taskbar":true,
/**
* bool值。是否使用kiosk模式。如果使用kiosk模式，
* 应用程序将全屏显示，并且阻止用户离开应用。
* */
"kiosk": false
},
/**webkit设置*/
"webkit": {
/**bool值，是否加载插件，如flash，默认值为false。*/
"plugin": true,
/**bool值，是否加载Java applets，默认为false。*/
"java": false,
/**bool值，是否启用页面缓存，默认为false。*/
"page-cache": false
}
}
Nginx conf配置文件
————————————————
版权声明：本文为CSDN博主「郑为中」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41464123/article/details/118110654
、vue的两种安装方式
（1）直接在html中引入vue.js
（2）通过vue+nodeJS搭建
我们采用的是第二种方式
二、vue和nodeJS的关系
（1）nodeJS不是一个js框架，是一个基于Chrome V8引擎的javascript运行环境，所以会产生众多基于node的js框架和库，同时包括关于js模块化的库。另一个就是node可以创建本地服务器，从而可以使用js来编写后台程序。
（2）vue依赖node中的webpack打包工具，初始化vue项目，以及一些依赖包。
三、搭建vue项目
（1）安装node
（2）初始化vue项目，初始化命令：vue init webpack my-project
需要注意的是：node的版本需要和npm版本相对应
（3）初始化项目后，进入到project目录下使用命令npm run dev来启动项目。这个命令的执行是通过vue脚手架找到项目的根目录下的package.json文件，scripts表示脚本部分，作用是把webpack的原生命令进行 代理。其中build即是打包命令。执行了npm run dev则会启动端口，在开发
（4）vue目录结构，项目目录：webroot->vue->project
在build下的webpack.base.conf.js中可配置文件引入路径的别名，引入的公共文件路径可在这里配置，移动文件时只需要修改这一个地方，如：@表示src目录.
四、关于vue的几大知识模块
（1）vue路由
vue使用的是单页面路由，即所有组件都是渲染在一个容器中，页面跳转时不需要重新加载页面，只是重新渲染组件。在开发应用时，前端分配页面地址，包括实际路径地址、name、别名、重定向、组件名称，实际访问路径可以是别名也可以是真实路径
（2）vue双向数据绑定，使用模板语言
（3）vue的生命周期
beforeCreate：this无法使用，data数据、method方法都是无法获取的
created：可以操作vue实例中的数据和方法，但是无法操作dom结构
mounted：挂载完毕，dom节点渲染到页面中，能操作dom结构
computed：计算属性，vue经常会在模板中使用一些简单的表达式来控制值，所以复杂的逻辑应使用计算属性来进行控制。可快速计算视图中的属性，并且计算会被缓存，在需要更新的时候更新。提升页面性能。一般是当做属性来使用
watch：侦听属性，用来监听data中的数据变化，还可以监听函数的中参数来获取新值和旧值，和计算属性有些类似，通常用这个属性来响应数据的变化，监听ajax返回的结果。监听特定数据的变化并作出具体的业务逻辑。
（4）vue组件的开发和调用：注册组件使用.vue文件，使用export default将组件暴露出去，在父组件中import进来，并声明组件，在父组件中直接使用组件名称作为标签名即可使用子组件
（5）vue的权限控制：控制用户登录权限，控制用户角色权限，在页面加载前判断是否已登录，如果已登录再判断用户是否有权限
eb前端第二阶段
day01
web基础知识
web与internet
inter简介
internet是一个全球性的计算机网络，也称为因特网
主要的服务
WWW
telnet
bbs
ftp
基础实现的技术
分组交换原理
TCP/IP协议簇
web简介
www 万维网
将各种类型的信息和服务无缝连接，并提供界面
万维网就是无数的web文档的集合
web与internet
web是internet上运行的最流行应用
internet为web提供了运行的网络环境
web的工作原理
基于internet的一个多媒体信息服务系统
B/S模式
由web服务器，浏览器，通信协议组成
web服务器
功能
接收请求，并处理请求
发送响应
产品
TOMCAT
Apcha
IIS
浏览器
功能
提交用户请求
作为html.css.js的解析器
用图形界面的方式显示代码
产品
IE Micorsoft
chrome Google
FireFox Mozllia
Safari Apple
Opera
web的相关技术
服务器端技术
运行于服务器端
提供了数据库访问能力
技术
java
php
nodejs
HTML快速入门
HTML概述
什么是HTML
Hyper Text Markup Language
超文本标记语言，用来设计网页
以.html或者.htm为后缀
由浏览器解析运行
可以嵌入js脚本
HTML语法结构
标记语法
html用于描述功能的符号 <>，称为标记
标记分类
双标记,封闭类型
必须成对出现
<标记>内容</标记>
单标记，非封闭类型
又称为空标记
<标记>
<标记/>
元素
即标记，指尖括号所包围的内容部分
元素可以包含文本或其他元素
元素的嵌套
元素可以互相嵌套，生成更复杂语法
<div> <span></span> <b></b> </div>
注意
嵌套顺序
代码缩进
属性和值
属性是用来修饰元素的
语法
<any 属性1="值1" 属性2="值2"></any>
标准属性,通用属性
id
元素在页面中的唯一标识符
title
鼠标悬停在元素上显示的文本
class
css中，引用类选择器时使用
style
css中，定义行内样式
注释
在源码中编写，不会被浏览器解析运行的内容
把代码的说明放在注释中
<!--注释内容-->
注意:
注释不能嵌套注释
注释不能位于<>内部
文档结构
文档结构
文档类型声明
<!doctype html>
指定了html的版本和风格
HTML页面
页面头部
<head></head>
存放全局信息
<meta charset="uft-8">
<meta ....>
<title></title>
页面的标题
<style></style>
定义内部样式
<link>
导入外部样式
<script></script>
定义或者导入js脚本
页面主体
<body></body>
显示页面主体内容
属性
bgcolor
背景颜色
text
文本颜色
文本标签
标题元素
标记
<h1></h1>
......
<h6></h6>
特点
改变字号,h1最大，h6最小
字体加粗
上下有垂直距离
单独成行
属性
align
元素的水平对齐方式
取值
left
center
right
段落元素
标记
<p></p>
特点
单独成行，上下有空白距离
p标记中，不允许嵌套任何块级元素
属性
align
换行
<br>
分割线
<hr>
属性
size,尺寸(高度)
以px为单位的数字
width 宽度
以px为单位的数字
父元素宽度的%比
color
合法的颜色值
align
预格式化
<pre></pre>
保存了源文件中的回车和空格
特殊字符
空格
<
<
>
>
? ®
? ©
文本样式标签
斜体
i em
粗体
b strong
删除线
s del
下划线
u
上标
sup
下标
sub
分区元素
块分区
<div></div>
页面布局时使用
单独成行
行分区
<span></span>
设置一行文本内，不用样式时使用
与其他行内元素/行内块元素，共用一行
行内元素和块级元素
块级元素
独占一行
行内元素
与其他行内元素/行内块元素，共用一行
day02
图像和链接
URL
目录结构
目录就是web站点中文件夹的名称
web站点的主目录，称为web站点的根目录
三种表现形式
绝对路径
从文件所在的最高级的目录下开始查找资源文件所经过的完整路径
使用网络资源的时候，使用绝对路径
网络资源
协议名称
http/https
主机名称
IP地址/域名
目录路径
资源名称
相对路径
相对于当前文件位置，开始查找资源文件所经过的路径
同目录
直接写资源名称
src="a.jpg"
子目录
先直接调用兄弟的文件夹，在进入文件夹调用资源文件
src="img/a.jpg"
父目录
先返回父级，再调用资源
src="../a.jpg"
本地相对目录
c:/xmapp/htdocs/.../a.jpg
项目中不许使用
图像
<img>
属性
src
要显示的图片路径
width/height
图片的宽度和高度
图片失真，如果定义的宽高比，与原图片宽高比不同， 有可能出现图片的扭曲，称为图片失真
只设置width或者height的一个值，让另外一个值自适应，可以避免图片的失真
alt
资源加载失败时，显示的文本
链接
<a></a>
属性
href
链接的url
target
打开新网页的形式
取值
_self 在原页面中打开
_blank 在新的页面打开
name
定义锚点
链接的表现形式
下载资源
<a href="XXX.zip"></a>
创建新邮件
<a href="mailto:XX@XX.XX"></a>
调用js
<a href="javascript：js代码"></a>
返回页面顶部
<a href="#"></a>
锚点
在文档定义的一个记号，使用链接跳转到这个记号位置
定义锚点
<a name="锚点名称"></a>
<any id="id">
链接到锚点
<a href="#锚点名称/id"></a>
表格
作用
按照一定的结构来显示数据
由单元格按照从左到右，从上到下的方式排列到一起
数据都保存在单元格中
表格可以显示数据，也可以设置页面的布局
使用表格
<table> <tr> <td></td> </tr> </table>
属性
table
width/height
align设置表格本身水平对齐方式
border 表格边框
bordercolor 边框的颜色
bgcolor 背景颜色
cellpadding 内边距，边框与内容之间的距离
cellspacing 外边距，边框之间的距离
tr
bgcolor
align 设置该行内容的水平对齐方式
valign 设置该行内容的垂直对齐方式
td/th
align
valign
width/height
colspan 跨列合并单元格
rowspan 跨行合并单元格
注意
传统的表格，每一行的列数都是统一的
一行中所有的单元格高度都是相同的，默认情况下以最高的单元格为准
每行中，相同列的宽度都是相同的，默认以最宽的单元格为准
表格的复杂应用
行分组
<thead></thead> 表头
<tbody></tbody>表主体
<tfoot></tfoot>表尾
不规则的表格
跨列合并
colspan="n"
从指定单元格位置处，横向向右合并n个单元格
被合并单元格要删除
跨行合并
rowspan="n"
从指定单元格位置处，纵向向下合并n个单元格
被合并单元格要删除
表格的嵌套
表格允许嵌套，被嵌套的表格，必须放在td中
列表
是将一组具有相似特征的内容按照从上到下，或者从左到右的顺序排列到一起
组成
列表类型
有序列表<ol></ol>
无序列表<ul></ul>
列表项
<li></li>
有序列表
<ol> <li></li> </ol>
ol的直接子元素只能是li
属性
type 列表项类型
1
a
A
I
i
无序列表
<ul> <li></li> </ul>
属性
type
disc
circle
square
none
定义列表
<dl> <dt><dt> <dd></dd> </dl>
day03
结构标记
作用
h5提供的结构标记，专门用于表示布局，提升语义
效果同div
常见的结构标签
header
nav
section
article
footer
aside
表单
表单概述
表单的作用
用于显示，收集信息，并提交给服务器
form标签
两个基本部分
前台，实现数据的交互，提供可视化的控件
后台，处理表单提交的数据
表单元素form
作用
收集用户信息提交给服务器
里面包含于用户交互的表单控件元素
注意:form在页面不可见，如果使用表单提交，form不能省略
语法
<form></form>
属性
action
表单提交时发生的动作，就是提交的服务器的路径 接口
method
表单提交数据的方式
取值
get
明文提交，提交的数据在地址栏显示
大小限制2kb
安全性较低
向服务器要数据的时候使用
post
隐式提交，提交的数据不会再地址栏显示
无大小限制
安全性较高
delete
put
enctype
指定表单数据的编码方式
取值
text/plain
普通字符，不能有特殊符号
application/x-www-form-urlencoded
允许有特殊符号的字符
multipart/form-data
可以传输文件
表单控件
input控件
<input>
属性
type
创建不同类型的input控件
name
想提交，就必须有name
控件的名称，作为传递参数中=左边的部分
value
最终提交给服务器的值
作为传递参数中=右边的部分
disabled
禁用控件，无值属性
该控件不允许被提交
input的表现形式
type="text"/type="password"
maxlength
输入的最大字符数
readonly
只能读不能改，无值属性
可以提交
placeholder
占位符，默认显示在空间上做提示的文本
按钮
type="submit"
type="reset"
type="button"
value属性，设置按钮上文本
<button type="button">按钮上的文字</button>
单选框和复选框
type="radio"
type="checkbox"
name属性
不仅是控件名称，还是做分组的依据
如果是复选框，name的值需要是一个数组
value属性
不写value,提交的是on
checked
默认选中
隐藏域
想提交，不想展示给用户的数据
type="hidden"
文件选择框
type="file"
form的method必须是post
form的enctype必须是multipart/form-data
多文件选择，multiple属性
textarea
<textarea></textarea>
属性
name
value
cols
文本域的列数
rows
文本域的行数
readonly
select和option
<select> <option></option> .... </select>
属性
select
name
multiple
size
默认显示选项的数量，大于1，变成滚动列表
value
如果option没有value,select的value是option的内容
如果option有value,select的value是option的value
option
value
selected
其它元素
label
关联文本与表单控件
<label></label>
属性
for
关联的表单控件的id
为控件分组
<fieldset> <legend></legend> </fieldset>
浮动框架
在一个页面中引用显示其他的页面
<iframe></iframe>
属性
src
引用的网页的url
width/height
frameboder
边框
默认值1
一般情况清0
H5新input控件
电子邮件
type="email"
搜索类型
type="search"
URL类型
type="url"
电话类型
type="tel"
数字类型
type="number"
max
min
step
day04
URL
完整的URL格式
<scheme>://<user>:<pwd>@<host>:<port>/<path>; <params>?<query>#<frag>
协议scheme
方案，指定以哪种协议从服务器获取指定资源
协议就是定义文件打包和传输的格式
不区分大小写
常见的协议及端口号
FTP
21
文件的上传下载
SSH
22
安全的远程登录
TELNET
23
远程登录
SMTP
25
邮件传输
DNS
53
域名解析
HTTP
80
超文本传输
POP3
110
邮件接收
https
443
加密的http
user/pwd
host
主机名，资源所在服务器的域名或者ip地址
port
端口号，每项服务都在服务器上对一个监听的端口号
path
服务器上资源的本地文件夹名称
params
某些方案，会要求带参数
query查询字符串
？名称=值&名称=值
frag锚点
HTTP协议
请求消息request message
请求起始行
请求方法
get
想要获取服务器资源的时候使用
无请求主体
post
把数据传递给服务器的时候使用
有请求 主体
put
客户端想要放置文件到服务器(一般禁用)
delete
客户端想要删除服务器上的文件(一般禁用)
head
只获取响应头信息
connect
测试连接
trace
追踪请求的路径
option
选项，预请求
请求url
协议版本http/1.1
请求头
Host 告诉服务器请求哪个主机
Connection：keep-alive
告诉服务器进行持久连接
User-Agent
告诉服务器，自己(浏览器)的类型
Accept-encoding
告诉服务器自己能够接收的压缩文件的类型
Accept-language
告诉服务器自己能够接收自然语言的类型
Referer
告诉服务器请求来自哪个网页
请求主体
form data
响应消息response message
响应起始行
协议版本http/1.1
响应 状态码
100-199 提示信息
200 成功
3XX
301 永久重定向
302 临时重定向
304 命中缓存
4XX
404 请求资源不存在
403 权限不够
405 请求方法不被允许
5xx
服务器运行错误
原因短句
对响应状态码的简短的解释
响应头
Date
告诉浏览器，服务器响应的时间
Connection:keep-alive
告诉浏览器，开启持久连接
Content-Type
响应主体的类型
text/plain
text/html
text/css
application/javascript
application/xml
application/json
image/png
响应主体
缓存
客户端将服务器响应回来的数据，进行自动保存
当再次请求的时候，使用这个自动保存的数据
与缓存相关的消息头
Cache-control:max-age=新鲜的秒数
<meta http-equiv="Cache-control" content="3600">
HTTP优化
Http连接过程
发送请求
建立连接
处理请求
访问资源
构建响应
发送响应
记录日志
HTTP连接性能优化
减少连接创建次数(开启持久连接)
减少请求次数
提供服务器运行速度
减少响应数据的长度
HTTPS
加密的http
SSL
DOM操作
1.获取元素对象
var elem=document.getElementById("id")
如果元素有id，可以直接用id代表元素对象
2.获取/设置双标签的内容
console.log(id.innerHTML)
id.innerHTML=""
注意：可以在内容中直接编写新标签
3.获取/设置单标签的值
console.log(id.value)
id.value=""
day05
名词解释
同步
一个任务未完成时，不能开启另一个任务
同步访问
在访问服务器的时候 客户端只能等待服务器的响应 不能做其它事情
异步
即便一个任务没有完成，也不耽误另一个任务执行
异步访问
在向服务器发送请求时， 不耽误用户在页面上的其它操作
Ajax
ajax原理
什么是ajax
Asynchronous JavaScript and xml
使用js提供的异步对象XMLHttpRequest向服务器发送请求 接收响应
ajax中，服务器响应回来的数据是部分数据 不是完整的页面，可以以无刷新的方式来更改页面的布局和内容
ajax的工作原理
相当于在用户和服务器之间添加了一个中间层 使用户操作与服务器响应异步化
把以前的一些服务器负担的工作转嫁到客户端 利用客户端闲置的处理能力来处理问题
获取ajax对象
标准获取
var xhr=new XMLHttpRequest();
ie8以下版本获取
var xhr=new ActiveXObject("Microsoft.XMLHttp");
兼容写法
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLKHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
ajax对象的属性和方法
异步对象的属性和方法
abort()
取消请求
getAllResonseHeaders()
获取响应的所有头信息
getResponseHeader(响应头名称)
获取指定的响应头
open()
创建请求
xhr.open(method,url,isAsyn);
method 请求方法
url 请求的接口
isAsyn 是否使用异步请求
send(body)
发送请求
body:请求主体
get提交，body为null
post提交，body为数据
setRequestHeader()
设置请求的http头信息
onreadystatechange
监听器
发生任何状态变化时，这个监听器激活
xhr.readyState的值发生改变时
xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var result=xhr.responseText; } }
readyState
表示xhr的请求状态
值
0
请求尚未初始化
1
正在发送请求
2
接收响应头
3
正在接收响应主体
4
接收响应成功
responseText
服务器返回的文本
responseXML
服务器返回的xml
status
服务器返回的响应状态
使用Ajax
发送异步请求的步骤
1.获取异步对象
2.绑定监听
3.创建请求
4.发送请求
使用Ajax发送get请求
//1.创建xhr对象
var xhr=new XMLHttpRequest();
//2.绑定监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.stauts==200){
var result=xhr.responseText;
}
}
//3.创建请求
xhr.open("get","url?uname=&upwd=",true);
//4.发送请求
xhr.send(null);
day08
CSS概述
什么是css
Cascading style sheets
层叠样式表，级联样式表
用于HTML文档中元素样式的定义
实现了内容和表现的分离
提高了代码的可重用性和可维护性
CSS和HTML之间的关系
HTML用于构建网页的结构和内容
CSS用于构建html元素的样式
CSS与html属性之间的使用原则
W3C建议尽量使用css样式取代html属性
如果为html的所特有的属性，则使用html属性
CSS语法
css样式表的使用方式
内联样式
将样式定义在元素的style属性里
<any style="样式声明">
特点：
只针对一个元素有效
不能重用，无法提供可重用性和可维护性
默认情况内联样式优先级最高
<p style="color:red;font-size:30px;">...</p>
内部样式
将样式定义在页面的<style></style>中
在style标签中可以包含若干样式规则
样式规则
选择器
规范页面中哪些元素可以使用定义好的样式
样式声明
样式属性：值
特点
在当前页面，可提升代码可重用性和可维护性
外部样式
将样式单独定义在一个.css文件中
使用的时候，把.css这个文件使用link标签引入到html文件中
<link rel="stylesheet" href="css的url">
特点
在所有页面，都提高了，代码的可重用性和可维护性
写项目就要使用外部样式
css样式表的特征
继承性
大多数css样式是可以被子元素继承的
层叠性
可以为一个元素，定义多个样式规则
样式属性不冲突，多个样式表中样式，都可以堆叠作用到这个元素上
优先级
为一个元素定义多个样式，样式定义冲突时，会按照不同使用方式的优先级来应用样式
优先级的定义
最高是内联样式
外部样式，内部样式
就近原则
最低浏览器默认(缺省)样式
!important
可以调整样式规则的优先级
语法，紧跟样式值后面编写。
css基础选择器
通用选择器
作用
用于匹配页面上每一个元素
定义的是公用样式
*的效率极低，不建议使用
语法
*{margin:0;padding:0;}
元素选择器
作用
用于匹配页面上指定标记的元素
通常用于设置某一种元素的通用样式
语法
元素名称{样式声明}
body{margin:0;padding:0}
类选择器
作用
可以由任意元素的class属性进行引用的选择器
类选择器是应用最灵活，最广泛的选择器
语法
定义
.className{样式声明}
类名的命名规则
由数字，字母，下划线，- 组成
不能以数字开头
引用
<any class="className">
多类选择器的引用
允许一个元素引用多个类选择器
<any class="class1 class2 class3 ....">
分类选择器
作用
将元素选择器和类选择器结合使用
从而实现对某元素中不同样式的细分控制
还可以特高选择器权值
语法
元素选择器.类选择器{样式声明}
div.text-danger{}
ID选择器
作用
与页面指定id值的元素进行匹配（专属定制）
语法
#id{样式声明}
群组选择器
可以将一部分样式相同的选择器放到一起定义
选择器声明时，以逗号隔开的选择器列表
语法:
选择器1，选择2，选择器3...{}
div,#main,.top{color:red}
后代选择器
作用
通过元素的后代关系匹配元素
后代关系
出现在某元素中的子元素(不限制层级)
语法
选择器1 选择器2 选择器3 ...{}
子代选择器
作用
通过元素的子代关系匹配元素
子代关系
只存在一层嵌套关系的子元素
语法
选择器1>选择器2{}
伪类选择器
作用
用于匹配元素在不同状态下的样式
链接伪类
:link
匹配访问之前的a标签
:visited
匹配访问之后的a标签
动态伪类
:hover
匹配鼠标悬停在元素上时
:active
匹配元素被激活时
:focus
匹配元素获取焦点时
PS
如果:link,:visited,:hover,:active同时作用到同一个a标签上
需要按照一定的顺序去编写
l(link)ov(visited)e h(hover)a(active)te原则
选择器权值问题
作用
标识当前选择器的重要程度，权值越大，优先级越高
具体的权值
!important>1000
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通用选择器 0
继承的样式 无
特点
当一个选择器中含有多个选择器时 需要将所有选择器的权值进行相加， 结果大的，优先级高。 权值继续按不会超过其最大数量级
分组选择器权值单独计算
样式后面添加!important，该样式马上获取最高优先级
内联样式不能添加!important
权值相同，使用就近原则
尺寸和边框
尺寸属性
作用
改变元素的宽度和高度
属性
宽度
width
最大宽度
max-width
最小宽度
min-width
高度
height
最大高度
max-height
最小高度
min-height
取值
以px为单位数字或者%
不同元素的宽高特点
块级元素
不写宽，该元素宽默认为父元素的100%
不写高，靠内容把高撑起来，根据内容自适应
行内元素
设置宽高无效
尺寸单位
1.像素px
2.厘米cm
3.英寸in
4.磅值pt
5.毫米mm
6.em相对于父元素乘以的倍数
7.rem相对于html乘以的倍数
8.%
day09
尺寸和边框
颜色的单位
颜色的单词
#rrggbb
#rgb
rgb(r,g,b)
0~255
rgb(r%,g%,b%)
rgba(r,g,b,a)
a:0~1
尺寸
允许设置设置尺寸的元素
块级元素可以设置尺寸
块级元素不设置高，根据内容自适应
块级元素不设置宽，宽度为父元素100%
行内块可以设置尺寸
radio，checkbox除外
行内元素和其它元素
本身具备width和height属性的元素可以设置宽高
img 行内
table
溢出
当内容过大，元素尺寸过小的时候，会发生溢出效果
属性
overflow
overflow-x
overflow-y
取值
visible 默认值
hidden
scroll
一旦设置，水平和垂直都有滚动条
真正溢出的方向滚动条才可用
auto
溢出方向出现滚动条
边框
边框
简写方式
border:width style color;
width:边框的宽度
以px为单位的数字
style：边框的样式
solid
dotted
dashed
double
color:边框的颜色
合法的颜色值
transparent
border:0/none 去除边框
单边定义
border-方向：width style color;
方向
top
right
bottom
left
单属性定义
border-width
border-style
必须设置
border-color
单边单属性设置
border-top-width
....一个12个
边框的倒角
border-radius
取值
以px为单位的数字
%
单角设置
border-top-left
border-top-rigth
border-bottom-left
border-bottom-rigth
单角设置的简写方式
border-radius:v1 v2 v3 v4
左上 右上 右下 左下
边框阴影
box-shadow
取值
h-shadow
水平偏移量，必须值
v-shadow
垂直偏移量，必须值
blur
阴影的模糊距离，可选值
spread
阴影的尺寸，可选值
color
阴影的颜色，可选值
inset
把默认的外部阴影变成内部阴影,可选值
边框轮廓
是绘制于元素边框外部一条线
outline:width style color;
outline-width
outline-style
outline-color
取消轮廓outline:0/none;
框模型，盒子模型
box model
定义了元素框处理元素内容、内边距、边框、外边距的计算方式
在css中设置width和height，是在定义内容区域的尺寸
元素实际占地宽度
左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素实际占地高度
上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距
外边距
围绕在元素边框周围的空白区域 默认不能被其它元素占据，外边距是透明的 更改元素外边距，元素会发生位移的效果
属性
margin
取值
px为单位的数字
%
auto
设置非行内元素的水平对齐方式
auto对上下外边距不起作用
该元素要设置宽度
外边距的简写方式
margin:v1;
设置4个外边距
margin:v1 v2
v1:上下
v2：左右
margin:v1 v2 v3
v1:上
v2:左右
v3:下
margin:v1 v2 v3 v4
上右下左
day10
内边距
内容区域与边框之间的距离 改变内边距，会改变元素所占的空间
属性
padding
px为单位的数字
%
简写方式
padding:v1
设置4个方向内边距
padding:v1 v2
上下 左右
padding：v1 v2 v3;
上 左右 下
padding:v1 v2 v3 v4;
上右下左
单方向设置
padding-方向
top
right
bottom
left
box-sizing
重新指定框模型的计算方式
取值
content-box
border-box
背景
背景是从边框位置开始绘制的
背景颜色
background-color
合法颜色值
transparent
背景图片
background-image
url(图片路径)
背景平铺
background-repeat
repeat 默认值，重复
no-repeat 不重复
repeat-x 横向重复
repeat-y 纵向重复
背景图片的尺寸
background-size
x y 以px为单位的数字
x% y%
cover 把元素覆盖，图片可能显示不全
containt 元素包含完成图片，元素可能有空白区域
背景图片的固定
background-attachment
scroll,默认值
fixed,固定
背景图片的定位
background-position
x y 以px为单位的数字
x% y%
关键字
x:left/center/right
y:top/center/bottom
简写方式
background:color url() repeat attachment position;
渐变
多种颜色平缓变化的一个效果
分类
线性
background-image:linear-gradient(angle,color-point1,color-point2......);
径向
background-image:radial-gradient(size at position,color-point1,color-point2......);
重复
重复线性渐变
background-image：repeating-linear-gradient(angle,color-point1,color-point2.....);
重复的径向渐变
background-image:repeating-radial-gradient(size at position,color-point1,color-point2......);
低版本浏览器对渐变的兼容写法
在代码前加浏览器内核的前缀
chrome/safari
-webkit-
FireFox
-moz-
IE
-ms-
opera
-o-
线性渐变的兼容要注意
Subtopic
*请认真填写需求信息，我们会在24小时内与您取得联系。
