運用 node-webkit將Web項目封裝為PC客

運用 node-webkit將Web項目封裝為PC客戶端

Web項目封裝為PC客戶端，其中一種方式就是運用 node-webkit 。

node-webkit 是一個基于node.js和 chromium的應用程序運行環(huán)境，通過它我們可以把建立在chrome瀏覽器和node.js上的web應用打包成桌面應用，也就是我們所說的客戶端，而且還支持跨平臺。

————————————————

3.新建一個index.html 文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// 以下方式直接跳轉

window.location.href='https://blog.csdn.net/qq_41464123';

</script>

</body>

</html>

package.json完整代碼

{

/**指定程序的起始頁面。*/

"main": "index.html",

/**字符串必須是小寫字母或者數(shù)字，可以包含.或者_或者-不允許帶空格。name必須全局唯一。*/

"name": "OA",

/**程序描述*/

"description": "OA辦公系統(tǒng)",

/**程序版本號*/

"version": "1.0.0",

/**關鍵字*/

"keywords": ["demo","node-webkit"],

/**bool值，如果設置為false，將禁用webkit的node支持。*/

"nodejs": true,

/**

* 指定一個node.js文件，當程序啟動時，該文件會被運行，啟動時間要早于node-webkit加載html的時間。

* 它在node上下文中運行，可以用它來實現(xiàn)類似后臺線程的功能。

* （不需要可注釋不用）

//"node-main": "js/node.js",

/**

* bool值。默認情況下，如果將node-webkit程序打包發(fā)布，那么只能啟動一個該應用的實例。

* 如果你希望允許同時啟動多個實例，將該值設置為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配置文件

————————————————

原文鏈接：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運行環(huán)境，所以會產生眾多基于node的js框架和庫，同時包括關于js模塊化的庫。另一個就是node可以創(chuàng)建本地服務器，從而可以使用js來編寫后臺程序。

（2）vue依賴node中的webpack打包工具，初始化vue項目，以及一些依賴包。

三、搭建vue項目

（1）安裝node

（2）初始化vue項目，初始化命令：vue init webpack my-project

需要注意的是：node的版本需要和npm版本相對應

（3）初始化項目后，進入到project目錄下使用命令npm run dev來啟動項目。這個命令的執(zhí)行是通過vue腳手架找到項目的根目錄下的package.json文件，scripts表示腳本部分，作用是把webpack的原生命令進行代理。其中build即是打包命令。執(zhí)行了npm run dev則會啟動端口，在開發(fā)

（4）vue目錄結構，項目目錄：webroot->vue->project

在build下的webpack.base.conf.js中可配置文件引入路徑的別名，引入的公共文件路徑可在這里配置，移動文件時只需要修改這一個地方，如：@表示src目錄.

四、關于vue的幾大知識模塊

（1）vue路由

vue使用的是單頁面路由，即所有組件都是渲染在一個容器中，頁面跳轉時不需要重新加載頁面，只是重新渲染組件。在開發(fā)應用時，前端分配頁面地址，包括實際路徑地址、name、別名、重定向、組件名稱，實際訪問路徑可以是別名也可以是真實路徑

（2）vue雙向數(shù)據(jù)綁定，使用模板語言

（3）vue的生命周期

beforeCreate：this無法使用，data數(shù)據(jù)、method方法都是無法獲取的

created：可以操作vue實例中的數(shù)據(jù)和方法，但是無法操作dom結構

mounted：掛載完畢，dom節(jié)點渲染到頁面中，能操作dom結構

computed：計算屬性，vue經(jīng)常會在模板中使用一些簡單的表達式來控制值，所以復雜的邏輯應使用計算屬性來進行控制?？煽焖儆嬎阋晥D中的屬性，并且計算會被緩存，在需要更新的時候更新。提升頁面性能。一般是當做屬性來使用

watch：偵聽屬性，用來監(jiān)聽data中的數(shù)據(jù)變化，還可以監(jiān)聽函數(shù)的中參數(shù)來獲取新值和舊值，和計算屬性有些類似，通常用這個屬性來響應數(shù)據(jù)的變化，監(jiān)聽ajax返回的結果。監(jiān)聽特定數(shù)據(jù)的變化并作出具體的業(yè)務邏輯。

（4）vue組件的開發(fā)和調用：注冊組件使用.vue文件，使用export default將組件暴露出去，在父組件中import進來，并聲明組件，在父組件中直接使用組件名稱作為標簽名即可使用子組件

（5）vue的權限控制：控制用戶登錄權限，控制用戶角色權限，在頁面加載前判斷是否已登錄，如果已登錄再判斷用戶是否有權限

eb前端第二階段

day01

web基礎知識

web與internet

inter簡介

internet是一個全球性的計算機網(wǎng)絡，也稱為因特網(wǎng)

主要的服務

WWW

telnet

bbs

ftp

基礎實現(xiàn)的技術

分組交換原理

TCP/IP協(xié)議簇

web簡介

www 萬維網(wǎng)

將各種類型的信息和服務無縫連接，并提供界面

萬維網(wǎng)就是無數(shù)的web文檔的集合

web與internet

web是internet上運行的最流行應用

internet為web提供了運行的網(wǎng)絡環(huán)境

web的工作原理

基于internet的一個多媒體信息服務系統(tǒng)

B/S模式

由web服務器，瀏覽器，通信協(xié)議組成

web服務器

功能

接收請求，并處理請求

發(fā)送響應

產品

TOMCAT

Apcha

IIS

瀏覽器

功能

提交用戶請求

作為html.css.js的解析器

用圖形界面的方式顯示代碼

產品

IE Micorsoft

chrome Google

FireFox Mozllia

Safari Apple

Opera

web的相關技術

服務器端技術

運行于服務器端

提供了數(shù)據(jù)庫訪問能力

技術

java

php

nodejs

HTML快速入門

HTML概述

什么是HTML

Hyper Text Markup Language

超文本標記語言，用來設計網(wǎng)頁

以.html或者.htm為后綴

由瀏覽器解析運行

可以嵌入js腳本

HTML語法結構

標記語法

html用于描述功能的符號 <>，稱為標記

標記分類

雙標記,封閉類型

必須成對出現(xiàn)

<標記>內容</標記>

單標記，非封閉類型

又稱為空標記

<標記>

<標記/>

元素

即標記，指尖括號所包圍的內容部分

元素可以包含文本或其他元素

元素的嵌套

元素可以互相嵌套，生成更復雜語法

注意

嵌套順序

代碼縮進

屬性和值

屬性是用來修飾元素的

語法

標準屬性,通用屬性

元素在頁面中的唯一標識符

title

鼠標懸停在元素上顯示的文本

class

css中，引用類選擇器時使用

style

css中，定義行內樣式

注釋

在源碼中編寫，不會被瀏覽器解析運行的內容

把代碼的說明放在注釋中

注意:

注釋不能嵌套注釋

注釋不能位于<>內部

文檔結構

文檔類型聲明

<!doctype html>

指定了html的版本和風格

HTML頁面

頁面頭部

存放全局信息

頁面的標題

定義內部樣式

<link>

導入外部樣式

定義或者導入js腳本

頁面主體

顯示頁面主體內容

屬性

bgcolor

背景顏色

text

文本顏色

文本標簽

標題元素

標記

......

特點

改變字號,h1最大，h6最小

字體加粗

上下有垂直距離

單獨成行

屬性

align

元素的水平對齊方式

取值

left

center

right

段落元素

標記

<p></p>

特點

單獨成行，上下有空白距離

p標記中，不允許嵌套任何塊級元素

屬性

align

換行

<br>

分割線

<hr>

屬性

size,尺寸(高度)

以px為單位的數(shù)字

width 寬度

以px為單位的數(shù)字

父元素寬度的%比

color

合法的顏色值

align

預格式化

保存了源文件中的回車和空格

特殊字符

空格

? ®

? ©

文本樣式標簽

斜體

i em

粗體

b strong

刪除線

s del

下劃線

上標

sup

下標

sub

分區(qū)元素

塊分區(qū)

頁面布局時使用

單獨成行

行分區(qū)

設置一行文本內，不用樣式時使用

與其他行內元素/行內塊元素，共用一行

行內元素和塊級元素

塊級元素

獨占一行

行內元素

與其他行內元素/行內塊元素，共用一行

day02

圖像和鏈接

URL

目錄結構

目錄就是web站點中文件夾的名稱

web站點的主目錄，稱為web站點的根目錄

三種表現(xiàn)形式

絕對路徑

從文件所在的最高級的目錄下開始查找資源文件所經(jīng)過的完整路徑

使用網(wǎng)絡資源的時候，使用絕對路徑

網(wǎng)絡資源

協(xié)議名稱

http/https

主機名稱

IP地址/域名

目錄路徑

資源名稱

相對路徑

相對于當前文件位置，開始查找資源文件所經(jīng)過的路徑

同目錄

直接寫資源名稱

src="a.jpg"

子目錄

先直接調用兄弟的文件夾，在進入文件夾調用資源文件

src="img/a.jpg"

父目錄

先返回父級，再調用資源

src="../a.jpg"

本地相對目錄

c:/xmapp/htdocs/.../a.jpg

項目中不許使用

圖像

<img>

屬性

src

要顯示的圖片路徑

width/height

圖片的寬度和高度

圖片失真，如果定義的寬高比，與原圖片寬高比不同，有可能出現(xiàn)圖片的扭曲，稱為圖片失真

只設置width或者height的一個值，讓另外一個值自適應，可以避免圖片的失真

alt

資源加載失敗時，顯示的文本

鏈接

<a></a>

屬性

href

鏈接的url

target

打開新網(wǎng)頁的形式

取值

_self 在原頁面中打開

_blank 在新的頁面打開

name

定義錨點

鏈接的表現(xiàn)形式

下載資源

創(chuàng)建新郵件

調用js

返回頁面頂部

錨點

在文檔定義的一個記號，使用鏈接跳轉到這個記號位置

定義錨點

鏈接到錨點

表格

作用

按照一定的結構來顯示數(shù)據(jù)

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

數(shù)據(jù)都保存在單元格中

表格可以顯示數(shù)據(jù)，也可以設置頁面的布局

使用表格

屬性

table

width/height

align設置表格本身水平對齊方式

border 表格邊框

bordercolor 邊框的顏色

bgcolor 背景顏色

cellpadding 內邊距，邊框與內容之間的距離

cellspacing 外邊距，邊框之間的距離

bgcolor

align 設置該行內容的水平對齊方式

valign 設置該行內容的垂直對齊方式

td/th

align

valign

width/height

colspan 跨列合并單元格

rowspan 跨行合并單元格

注意

傳統(tǒng)的表格，每一行的列數(shù)都是統(tǒng)一的

一行中所有的單元格高度都是相同的，默認情況下以最高的單元格為準

每行中，相同列的寬度都是相同的，默認以最寬的單元格為準

表格的復雜應用

行分組

<thead></thead> 表頭

<tbody></tbody>表主體

<tfoot></tfoot>表尾

不規(guī)則的表格

跨列合并

colspan="n"

從指定單元格位置處，橫向向右合并n個單元格

被合并單元格要刪除

跨行合并

rowspan="n"

從指定單元格位置處，縱向向下合并n個單元格

被合并單元格要刪除

表格的嵌套

表格允許嵌套，被嵌套的表格，必須放在td中

列表

是將一組具有相似特征的內容按照從上到下，或者從左到右的順序排列到一起

組成

列表類型

有序列表<ol></ol>

無序列表<ul></ul>

列表項

有序列表

ol的直接子元素只能是li

屬性

type 列表項類型

無序列表

屬性

type

disc

circle

square

none

定義列表

day03

結構標記

作用

h5提供的結構標記，專門用于表示布局，提升語義

效果同div

常見的結構標簽

header

nav

section

article

footer

aside

表單

表單概述

表單的作用

用于顯示，收集信息，并提交給服務器

form標簽

兩個基本部分

前臺，實現(xiàn)數(shù)據(jù)的交互，提供可視化的控件

后臺，處理表單提交的數(shù)據(jù)

表單元素form

作用

收集用戶信息提交給服務器

里面包含于用戶交互的表單控件元素

注意:form在頁面不可見，如果使用表單提交，form不能省略

語法

屬性

action

表單提交時發(fā)生的動作，就是提交的服務器的路徑接口

method

表單提交數(shù)據(jù)的方式

取值

get

明文提交，提交的數(shù)據(jù)在地址欄顯示

大小限制2kb

安全性較低

向服務器要數(shù)據(jù)的時候使用

post

隱式提交，提交的數(shù)據(jù)不會再地址欄顯示

無大小限制

安全性較高

delete

put

enctype

指定表單數(shù)據(jù)的編碼方式

取值

text/plain

普通字符，不能有特殊符號

application/x-www-form-urlencoded

允許有特殊符號的字符

multipart/form-data

可以傳輸文件

表單控件

input控件

<input>

屬性

type

創(chuàng)建不同類型的input控件

name

想提交，就必須有name

控件的名稱，作為傳遞參數(shù)中=左邊的部分

value

最終提交給服務器的值

作為傳遞參數(shù)中=右邊的部分

disabled

禁用控件，無值屬性

該控件不允許被提交

input的表現(xiàn)形式

type="text"/type="password"

maxlength

輸入的最大字符數(shù)

readonly

只能讀不能改，無值屬性

可以提交

placeholder

占位符，默認顯示在空間上做提示的文本

按鈕

type="submit"

type="reset"

type="button"

value屬性，設置按鈕上文本

<button type="button">按鈕上的文字</button>

單選框和復選框

type="radio"

type="checkbox"

name屬性

不僅是控件名稱，還是做分組的依據(jù)

如果是復選框，name的值需要是一個數(shù)組

value屬性

不寫value,提交的是on

checked

默認選中

隱藏域

想提交，不想展示給用戶的數(shù)據(jù)

type="hidden"

文件選擇框

type="file"

form的method必須是post

form的enctype必須是multipart/form-data

多文件選擇，multiple屬性

textarea

屬性

name

value

cols

文本域的列數(shù)

rows

文本域的行數(shù)

readonly

select和option

屬性

select

name

multiple

size

默認顯示選項的數(shù)量，大于1，變成滾動列表

value

如果option沒有value,select的value是option的內容

如果option有value,select的value是option的value

option

value

selected

其它元素

label

關聯(lián)文本與表單控件

屬性

for

關聯(lián)的表單控件的id

為控件分組

浮動框架

在一個頁面中引用顯示其他的頁面

屬性

src

引用的網(wǎng)頁的url

width/height

frameboder

邊框

默認值1

一般情況清0

H5新input控件

電子郵件

type="email"

搜索類型

type="search"

URL類型

type="url"

電話類型

type="tel"

數(shù)字類型

type="number"

max

min

step

day04

URL

完整的URL格式

協(xié)議scheme

方案，指定以哪種協(xié)議從服務器獲取指定資源

協(xié)議就是定義文件打包和傳輸?shù)母袷?/p>

不區(qū)分大小寫

常見的協(xié)議及端口號

FTP

文件的上傳下載

SSH

安全的遠程登錄

TELNET

遠程登錄

SMTP

郵件傳輸

DNS

域名解析

HTTP

超文本傳輸

POP3

110

郵件接收

https

443

加密的http

user/pwd

host

主機名，資源所在服務器的域名或者ip地址

port

端口號，每項服務都在服務器上對一個監(jiān)聽的端口號

path

服務器上資源的本地文件夾名稱

params

某些方案，會要求帶參數(shù)

query查詢字符串

？名稱=值&名稱=值

frag錨點

HTTP協(xié)議

請求消息request message

請求起始行

請求方法

get

想要獲取服務器資源的時候使用

無請求主體

post

把數(shù)據(jù)傳遞給服務器的時候使用

有請求主體

put

客戶端想要放置文件到服務器(一般禁用)

delete

客戶端想要刪除服務器上的文件(一般禁用)

head

只獲取響應頭信息

connect

測試連接

trace

追蹤請求的路徑

option

選項，預請求

請求url

協(xié)議版本http/1.1

請求頭

Host 告訴服務器請求哪個主機

Connection：keep-alive

告訴服務器進行持久連接

User-Agent

告訴服務器，自己(瀏覽器)的類型

Accept-encoding

告訴服務器自己能夠接收的壓縮文件的類型

Accept-language

告訴服務器自己能夠接收自然語言的類型

Referer

告訴服務器請求來自哪個網(wǎng)頁

請求主體

form data

響應消息response message

響應起始行

協(xié)議版本http/1.1

響應狀態(tài)碼

100-199 提示信息

200 成功

3XX

301 永久重定向

302 臨時重定向

304 命中緩存

4XX

404 請求資源不存在

403 權限不夠

405 請求方法不被允許

5xx

服務器運行錯誤

原因短句

對響應狀態(tài)碼的簡短的解釋

響應頭

Date

告訴瀏覽器，服務器響應的時間

Connection:keep-alive

告訴瀏覽器，開啟持久連接

Content-Type

響應主體的類型

text/plain

text/html

text/css

application/javascript

application/xml

application/json

image/png

響應主體

緩存

客戶端將服務器響應回來的數(shù)據(jù)，進行自動保存

當再次請求的時候，使用這個自動保存的數(shù)據(jù)

與緩存相關的消息頭

Cache-control:max-age=新鮮的秒數(shù)

HTTP優(yōu)化

Http連接過程

發(fā)送請求

建立連接

處理請求

訪問資源

構建響應

發(fā)送響應

記錄日志

HTTP連接性能優(yōu)化

減少連接創(chuàng)建次數(shù)(開啟持久連接)

減少請求次數(shù)

提供服務器運行速度

減少響應數(shù)據(jù)的長度

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

名詞解釋

同步

一個任務未完成時，不能開啟另一個任務

同步訪問

在訪問服務器的時候客戶端只能等待服務器的響應不能做其它事情

異步

即便一個任務沒有完成，也不耽誤另一個任務執(zhí)行

異步訪問

在向服務器發(fā)送請求時，不耽誤用戶在頁面上的其它操作

Ajax

ajax原理

什么是ajax

Asynchronous JavaScript and xml

使用js提供的異步對象XMLHttpRequest向服務器發(fā)送請求接收響應

ajax中，服務器響應回來的數(shù)據(jù)是部分數(shù)據(jù) 不是完整的頁面，可以以無刷新的方式來更改頁面的布局和內容

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()

創(chuàng)建請求

xhr.open(method,url,isAsyn);

method 請求方法

url 請求的接口

isAsyn 是否使用異步請求

send(body)

發(fā)送請求

body:請求主體

get提交，body為null

post提交，body為數(shù)據(jù)

setRequestHeader()

設置請求的http頭信息

onreadystatechange

監(jiān)聽器

發(fā)生任何狀態(tài)變化時，這個監(jiān)聽器激活

xhr.readyState的值發(fā)生改變時

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

readyState

表示xhr的請求狀態(tài)

值

請求尚未初始化

正在發(fā)送請求

接收響應頭

正在接收響應主體

接收響應成功

responseText

服務器返回的文本

responseXML

服務器返回的xml

status

服務器返回的響應狀態(tài)

使用Ajax

發(fā)送異步請求的步驟

1.獲取異步對象

2.綁定監(jiān)聽

3.創(chuàng)建請求

4.發(fā)送請求

使用Ajax發(fā)送get請求

//1.創(chuàng)建xhr對象

var xhr=new XMLHttpRequest();

//2.綁定監(jiān)聽

xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.stauts==200){

var result=xhr.responseText;

}

//3.創(chuàng)建請求

xhr.open("get","url?uname=&upwd=",true);

//4.發(fā)送請求

xhr.send(null);

day08

CSS概述

什么是css

Cascading style sheets

層疊樣式表，級聯(lián)樣式表

用于HTML文檔中元素樣式的定義

實現(xiàn)了內容和表現(xiàn)的分離

提高了代碼的可重用性和可維護性

CSS和HTML之間的關系

HTML用于構建網(wǎng)頁的結構和內容

CSS用于構建html元素的樣式

CSS與html屬性之間的使用原則

W3C建議盡量使用css樣式取代html屬性

如果為html的所特有的屬性，則使用html屬性

CSS語法

css樣式表的使用方式

內聯(lián)樣式

將樣式定義在元素的style屬性里

特點：

只針對一個元素有效

不能重用，無法提供可重用性和可維護性

默認情況內聯(lián)樣式優(yōu)先級最高

內部樣式

將樣式定義在頁面的<style></style>中

在style標簽中可以包含若干樣式規(guī)則

樣式規(guī)則

選擇器

規(guī)范頁面中哪些元素可以使用定義好的樣式

樣式聲明

樣式屬性：值

特點

在當前頁面，可提升代碼可重用性和可維護性

外部樣式

將樣式單獨定義在一個.css文件中

使用的時候，把.css這個文件使用link標簽引入到html文件中

特點

在所有頁面，都提高了，代碼的可重用性和可維護性

寫項目就要使用外部樣式

css樣式表的特征

繼承性

大多數(shù)css樣式是可以被子元素繼承的

層疊性

可以為一個元素，定義多個樣式規(guī)則

樣式屬性不沖突，多個樣式表中樣式，都可以堆疊作用到這個元素上

優(yōu)先級

為一個元素定義多個樣式，樣式定義沖突時，會按照不同使用方式的優(yōu)先級來應用樣式

優(yōu)先級的定義

最高是內聯(lián)樣式

外部樣式，內部樣式

就近原則

最低瀏覽器默認(缺省)樣式

!important

可以調整樣式規(guī)則的優(yōu)先級

語法，緊跟樣式值后面編寫。

css基礎選擇器

通用選擇器

作用

用于匹配頁面上每一個元素

定義的是公用樣式

*的效率極低，不建議使用

語法

*{margin:0;padding:0;}

元素選擇器

作用

用于匹配頁面上指定標記的元素

通常用于設置某一種元素的通用樣式

語法

元素名稱{樣式聲明}

body{margin:0;padding:0}

類選擇器

作用

可以由任意元素的class屬性進行引用的選擇器

類選擇器是應用最靈活，最廣泛的選擇器

語法

定義

.className{樣式聲明}

類名的命名規(guī)則

由數(shù)字，字母，下劃線，- 組成

不能以數(shù)字開頭

引用

多類選擇器的引用

允許一個元素引用多個類選擇器

分類選擇器

作用

將元素選擇器和類選擇器結合使用

從而實現(xiàn)對某元素中不同樣式的細分控制

還可以特高選擇器權值

語法

元素選擇器.類選擇器{樣式聲明}

div.text-danger{}

ID選擇器

作用

與頁面指定id值的元素進行匹配（專屬定制）

語法

#id{樣式聲明}

群組選擇器

可以將一部分樣式相同的選擇器放到一起定義

選擇器聲明時，以逗號隔開的選擇器列表

語法:

選擇器1，選擇2，選擇器3...{}

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

后代選擇器

作用

通過元素的后代關系匹配元素

后代關系

出現(xiàn)在某元素中的子元素(不限制層級)

語法

選擇器1 選擇器2 選擇器3 ...{}

子代選擇器

作用

通過元素的子代關系匹配元素

子代關系

只存在一層嵌套關系的子元素

語法

選擇器1>選擇器2{}

偽類選擇器

作用

用于匹配元素在不同狀態(tài)下的樣式

鏈接偽類

:link

匹配訪問之前的a標簽

:visited

匹配訪問之后的a標簽

動態(tài)偽類

:hover

匹配鼠標懸停在元素上時

:active

匹配元素被激活時

:focus

匹配元素獲取焦點時

如果:link,:visited,:hover,:active同時作用到同一個a標簽上

需要按照一定的順序去編寫

l(link)ov(visited)e h(hover)a(active)te原則

選擇器權值問題

作用

標識當前選擇器的重要程度，權值越大，優(yōu)先級越高

具體的權值

!important>1000

內聯(lián)樣式 1000

id選擇器 100

類和偽類選擇器 10

元素選擇器 1

通用選擇器 0

繼承的樣式無

特點

當一個選擇器中含有多個選擇器時需要將所有選擇器的權值進行相加，結果大的，優(yōu)先級高。權值繼續(xù)按不會超過其最大數(shù)量級

分組選擇器權值單獨計算

樣式后面添加!important，該樣式馬上獲取最高優(yōu)先級

內聯(lián)樣式不能添加!important

權值相同，使用就近原則

尺寸和邊框

尺寸屬性

作用

改變元素的寬度和高度

屬性

寬度

width

最大寬度

max-width

最小寬度

min-width

高度

height

最大高度

max-height

最小高度

min-height

取值

以px為單位數(shù)字或者%

不同元素的寬高特點

塊級元素

不寫寬，該元素寬默認為父元素的100%

不寫高，靠內容把高撐起來，根據(jù)內容自適應

行內元素

設置寬高無效

尺寸單位

1.像素px

2.厘米cm

3.英寸in

4.磅值pt

5.毫米mm

6.em相對于父元素乘以的倍數(shù)

7.rem相對于html乘以的倍數(shù)

8.%

day09

尺寸和邊框

顏色的單位

顏色的單詞

#rrggbb

#rgb

rgb(r,g,b)

0~255

rgb(r%,g%,b%)

rgba(r,g,b,a)

a:0~1

尺寸

允許設置設置尺寸的元素

塊級元素可以設置尺寸

塊級元素不設置高，根據(jù)內容自適應

塊級元素不設置寬，寬度為父元素100%

行內塊可以設置尺寸

radio，checkbox除外

行內元素和其它元素

本身具備width和height屬性的元素可以設置寬高

img 行內

table

溢出

當內容過大，元素尺寸過小的時候，會發(fā)生溢出效果

屬性

overflow

overflow-x

overflow-y

取值

visible 默認值

hidden

scroll

一旦設置，水平和垂直都有滾動條

真正溢出的方向滾動條才可用

auto

溢出方向出現(xiàn)滾動條

邊框

簡寫方式

border:width style color;

width:邊框的寬度

以px為單位的數(shù)字

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為單位的數(shù)字

單角設置

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，是在定義內容區(qū)域的尺寸

元素實際占地寬度

左外邊距+左邊框+左內邊距+內容區(qū)域寬度+右內邊距+右邊框+右外邊距

元素實際占地高度

上外邊距+上邊框+上內邊距+內容區(qū)域高度+下內邊距+下邊框+下外邊距

外邊距

圍繞在元素邊框周圍的空白區(qū)域默認不能被其它元素占據(jù)，外邊距是透明的更改元素外邊距，元素會發(fā)生位移的效果

屬性

margin

取值

px為單位的數(shù)字

auto

設置非行內元素的水平對齊方式

auto對上下外邊距不起作用

該元素要設置寬度

外邊距的簡寫方式

margin:v1;

設置4個外邊距

margin:v1 v2

v1:上下

v2：左右

margin:v1 v2 v3

v1:上

v2:左右

v3:下

margin:v1 v2 v3 v4

上右下左

day10

內邊距

內容區(qū)域與邊框之間的距離改變內邊距，會改變元素所占的空間

屬性

padding

px為單位的數(shù)字

簡寫方式

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為單位的數(shù)字

x% y%

cover 把元素覆蓋，圖片可能顯示不全

containt 元素包含完成圖片，元素可能有空白區(qū)域

背景圖片的固定

background-attachment

scroll,默認值

fixed,固定

背景圖片的定位

background-position

x y 以px為單位的數(shù)字

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-

-ms-

opera

-o-

線性漸變的兼容要注意

Subtopic

在線咨詢

上一篇：ue編輯器64位破解版 v25.10.0.62
下一篇：如何使用 JavaScript 實現(xiàn)前端導入和導出

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

運用 node-webkit將Web項目封裝為PC客

您的項目需求