整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
據類型，又名數據元，是一組屬性描述其定義、標識、表示和允許值的數據單元，今天小編將為大家帶來大數據編程入門：JavaScript數據類型。
在JavaScript中，有兩大種數據類型，一種是值類型，另一種是引用數據類型。
值類型（基本類型）：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol。
引用數據類型：對象(Object)、數組(Array)、函數(Function)。
注意：Symbol是ES6引入了一種新的原始數據類型，表示獨一無二的值。
JavaScript擁有動態類型
JavaScript具有動態類型。這意味著相同的變量可以用作不同的類型：
var x; // x 為 undefined
var x = 5; // 現在 x 為數字
var x = "Miuku"; // 現在 x 為字符串
JavaScript字符串
字符串是存儲字符的變量（如“Bill Gates”）。
字符串可以是引號中的任何文本，可以使用單引號或雙引號：
var name="Miuku";
var name='Miuku';
可以在字符串中使用引號，只要它們與字符串周圍的引號不匹配：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<script>
var fruit1="Apple";
var fruit2='Lemon';
var answer1='It\'s alright';
var answer2="He is called \"Mary\"";
var answer3='He is called "Jony"';
document.write(fruit1 + "<br>")
document.write(fruit2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>
</body>
</html>
運行結果：
JavaScript數字
JavaScript只有一種數字類型，數字可以帶有小數點，也可以沒有小數點：
var x1=34.00; //使用小數點來寫
var x2=34; //不使用小數點來寫
通過科學（指數）計數法可以書寫出極大或極小的數字：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<script>
var x1=34.00;
var x2=34;
var y=123e5;
var z=123e-5;
document.write(x1 + "<br>")
document.write(x2 + "<br>")
document.write(y + "<br>")
document.write(z + "<br>")
</script>
</body>
</html>
運行結果：
JavaScript布爾
布爾一般又稱布爾邏輯，只有兩個值：false或者true。
var x=true;
var y=false;
布爾常用于條件測試中。
JavaScript數組
下面將創建名為fruit的數組：
var fruit=new Array();
fruit[0]="Apple";
fruit[1]="Lemon";
fruit[2]="Orange";
或者 (condensed array):
var fruit=new Array("Apple","Lemon","Orange");
或者 (literal array):
<!DOCTYPE html>
<html>
<body>
<script>
var i;
var fruit = new Array();
fruit[0] = "Apple";
fruit[1] = "Orange";
fruit[2] = "Lemon";
for (i=0;i<fruit.length;i++)
{
document.write(fruit[i] + "<br>");
}
</script>
</body>
</html>
運行結果：
數組下標是從零開始的，因此第一個條目是[0]，第二個條目是[1]，依此類推。
JavaScript對象
對象由花括號分隔，在括號內，對象的屬性以名稱和值對（name:value）的形式定義。屬性由逗號分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
在上面的示例中顯示對象（person）有三個屬性：firstname、lastname以及id。
空格和換行符并不重要，聲明可以跨越多行：
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
對象屬性有兩種尋址方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<script>
var person=
{
firstname : "John",
lastname : "Doe",
id : 5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>
</body>
</html>
運行結果：
Undefined和Null
Undefined（未定義）此值表示變量不包含值。
可以通過將變量的值設置為null來清空變量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<script>
var person;
var fruit="Apple";
document.write(person + "<br>");
document.write(fruit + "<br>");
var fruit=null
document.write(fruit + "<br>");
</script>
</body>
</html>
運行結果：
聲明變量類型
聲明新變量時，可以使用關鍵字“new”來聲明其類型：
var fruit=new String;
var x=new Number;
var y=new Boolean;
var animal=new Array;
var person= new Object;
在JavaScript中的變量均為對象，當聲明一個變量時，就是創建了一個新的對象。
以上就是關于大數據編程入門：JavaScript數據類型的全部內容了，希望這篇文章可以幫助到大家~
內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。
多窗口和窗體：
可以打開多個瀏覽器窗口，每個窗口都是獨立的；
一個瀏覽器窗口可能包含多個標簽頁；每個標簽頁都是獨立的上下文，都是獨立的window對象，而且相互之間互不干擾；
但是窗口也并不總是和其他窗口完全沒有關系；一個窗口或標簽頁中的腳本可以打開新的窗口或標簽頁，如此，這些多窗口或標簽頁就可以互相操作；
打開窗口：
window.open()方法，打開一個新的瀏覽器窗口、標簽頁，導航到一個指定的URL；
語法：window.open(url,name,features,replace)；url為打開新窗口的url，name為窗口目標,features設置窗口特性參數列表，replace為Boolean值，指定是否用新窗口替換當前頁面；
一般使用第一個參數，如果也省略該參數或使用空字符串，則會打開一個空頁面的URL about:blank；
如果使用第二個參數，而且該參數是已有窗口或框架的名稱，就會在該窗口或框架中加載指定的URL；否則彈出新窗口，并將新窗口的name命名為該參數，如果省略此參數，則會使用指定的“_blank”打開一個新的、未命名的窗口；
第二個參數也可以是：_self、_parent、_top、_blank；
窗口的名字也可作為<a>和<form>元素上target屬性的值，用來表示引用的文檔或提交處理的頁面；
<script>
window.open("https://www.zeronetwork.cn/","myWindow");
</script>
<a href="https://www.google.cn/" target="myWindow">baidu.com</a>窗口特性屬性：
第三個參數是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性；如果省略，則以默認的形式呈現；
字符串格式為：設置使用鍵值對，且全部使用逗號分隔，而且不能有空格；
window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");顯式指定這些特性，打開的應該是新窗口，而不是新標簽頁；這個參數是非標準的，而且HTML5也主張瀏覽器應該忽略它；
另外，出于安全考慮，瀏覽器包含對可能指定的功能的限制，如，通常不允許指定一個太小的或者位于屏幕之外的窗口，并且一些瀏覽器不允許創建一個沒有狀態欄的窗口；
第四個參數只有在設置了第二個參數命名的是一個已存在的窗口時才有用；它是一個布爾值，聲明了由第一個參數指定的URL是替換掉窗口瀏覽歷史的當前記錄(true)還是應該在窗口瀏覽歷史中創建一個新的記錄(false)，默認為false；
window.open()會返回一個window對象，用于操作新創建的窗口；該引用可以操作新窗口的內容，從而就可以在一個窗口中控制另一個窗口的內容，例如向一個新開的瀏覽器窗口中輸出內容；
var w = window.open(); // 打開一個新的空白窗口
w.document.write("<h2>零點網絡</h2>");
w.alert("詳情請進入https://www.zeronetwork.cn/");
w.location = "https://www.zeronetwork.cn/";某些瀏覽器在默認情況下可能不允許針對主瀏覽器窗口調整大小或移動，但不允許針對通過open()創建的窗口調整大小或移動，如：
var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");
newWindow.resizeTo(600,600);
newWindow.moveTo(200,200);注：有些瀏覽器默認不允許這樣操作；
窗口opener屬性：
opener屬性是新窗口對打開它的原始窗口的引用；即指向調用window.open()的窗口或框架；但只在彈出窗口的最外層window對象(top)中有定義；
var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");
console.log(newWindow.opener === window); // true
<!-- 主窗口 -->
<input type="text" id="selectCity" placeholder="選擇" />
<script>
var selectCity = document.getElementById("selectCity");
selectCity.onclick = function(){
var newWin = window.open("select.html","newWin","width=400,height=400");
}
</script>
<!-- 新窗口 -->
<select id="city">
<option value="beijing">北京</option>
<option value="nanjing">南京</option>
<option value="anhui">安徽</option>
</select>
<script>
var city = document.getElementById("city");
city.onchange = function(){
window.opener.document.getElementById("selectCity").value = city.options[city.selectedIndex].value;
window.close();
}
</script>有些瀏覽器(如IE8和Chrome)會在獨立的進程中運行每個標簽頁，當一個標簽頁打開另一個標簽頁時，如果兩個window對象之間需要彼此通信，那么新標簽頁就不能運行在獨立的進程中。在Chrome中，將新創建的標簽頁的opener屬性設置為null，即表示在單獨的進程中運行新標簽頁。
newWindow.opener = null;
標簽頁之間的聯系一旦切斷，將沒有辦法恢復。
window.close()關閉窗口：
對于主窗口，如果沒有得到用戶的允許是不能關閉它的；但彈出窗口可以不經用戶允許可以關閉自己；
窗口關閉后，窗口的引用仍然存在，可以使用window.closed屬性檢測，但在實際場景中沒有多大用處；
function openWin(){
var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");
newWindow.document.write("<h2>零點網絡</h2>");
function closeWin(){
newWindow.close();
//alert(newWindow.closed);
if(newWindow.close)
alert("已關閉");
}
setTimeout(closeWin,3000);
}
openWin();注：document對象也有close()方法，為了避免混淆，所以調用close()方法時，要顯式調用，即使用window.close()；
安全限制：
大多數瀏覽器針對彈出窗口實施了多方面的安全限制，如：不允許在屏幕之外創建彈出窗口，不允許將彈出窗口移動到屏幕之外，不允許關閉狀態欄等；不允許關閉地址欄，默認情況下不允許移動彈出窗口或調整其大小；或者部分瀏覽器不支持修改狀態欄，始終顯示地址欄等；
通常，對于open()方法只有當用戶手動單擊按鈕或超鏈接時才會調用；如果嘗試在瀏覽器初始載入時開啟一個彈出窗口時，通常會被屏蔽;
彈出窗口屏蔽程序：
大多數瀏覽器都內置有彈出窗口屏蔽程序，如果沒有內置，可以安裝第三方實用工具；內置屏蔽會使window.open可能返回null，第三方會返回錯誤；通過需要檢測其返回值；
// 內置的屏蔽程序
var newWin = window.open("https://www.zeronetwork.cn/","_blank");
if(newWin == null){
alert("彈窗被阻止！");
}
// 第三方
var blocked = false;
try{
var newWin = window.open("https://www.zeronetwork.cn/","_blank");
if(newWin == null)
blocked = true;
}catch(e){
blocked = true;
}
if(blocked){
alert("彈窗被屏蔽");
}彈出窗口通信：
主窗口向新窗口傳值，直接為新窗口window對象添加成員，如：
// 主窗口
var newWin = window.open("select.html","_blank");
var person = {
name:"wangwei",
sex: true,
age: 18
}
newWin.person = person;
// 新窗口
document.write("姓名：",person.name);
document.write("性別：",person.sex);
document.write("年齡：",person.age);新窗口向主窗口傳值，通過window.opener獲取原始窗口的屬性或者html元素；
<!-- 主窗口 -->
<div id="mydiv"></div>
<script>
var newWin = window.open("select.html","_blank");
function showDiv(str){
var mydiv = document.getElementById("mydiv");
mydiv.innerHTML = str;
}
</script>
<script>
// 新窗口
var str = "零點網絡";
window.opener.showDiv(str);
window.close();
</script>通過普通的get傳值；
// 主窗口
function putId(id){
window.open("select.html?id=" + encodeURIComponent(id),"putWin");
}
putId("1002");
// 新窗口
var id = location.search;
id = id.split("=");
console.log(id[1]);
document.write(decodeURIComponent(id[1]));框架窗口：
如果頁面使用了框架集合(包含frameset和iframe)，則每個框架都由它自己的window對象表示，并存放在frames集合中;
與相互獨立的標簽頁或窗口不同，框架窗口之間并不是相互獨立的；
每個window對象都有一個name屬性，其中包含框架的名稱；
<frameset rows="100,*">
<frame src="top.html" name="topFrame" />
<frameset cols="50%,50%">
<frame src="left.html" name="leftFrame" />
<frame src="right.html" name="rightFrame" />
</frameset>
</frameset>在frames集合中,可用數字(下標從0開始,從左到右,從上到下)訪問;即可以使用frames[0]表示第1個子窗口、frames[1]表示第2個子窗口；
可使用名稱對框架進行訪問，該名稱就是該框架的name屬性，如 window.frames[“topFrame”]引用;
也可以window.topFrame 使用架框的名字訪問；
window.onload = function(){
console.log(frames);
var topFrame = frames[0];
console.log(topFrame);
console.log(topFrame.name);
var leftFrame = window.frames["leftFrame"];
console.log(leftFrame.name);
console.log(window.rightFrame.name);
}可使用frames.length 取得框架集合長度;
如果是內聯框架，那就更簡單了，如：
<iframe src="right.html" name="myFrame" width="200" height="200"></iframe>
<script>
console.log(frames);
console.log(frames[0].name);
</script>對于頂級窗口的window對象來說，可以看作為由若干個子窗口組成的窗口數組，也就是說可以把window對象當作為窗口的集合，如：
console.log(window.length);
console.log(window[0]);但在實際場景中，最好還是使用frames來代替window，因為frames顯得更清晰些；
對于<iframe>元素，如果設置了id，也可以通過document.getElementById()方法獲取，如：
var myframe = document.getElementById("myframe");
console.log(myframe);
myframe.src = "one.html";<iframe>元素有contentWindow屬性，引用該窗體的window對象，所以此窗體的window對象就是：
var mywin = document.getElementById("myframe").contentWindow;
console.log(mywin);
mywin.document.write("是內聯框架window對象");可以進行反向操作，通過window對象的frameElement屬性，來獲取該窗體的<iframe>元素；表示頂級窗口的window對象的frameElement屬性為null，窗體中的window對象的frameElement屬性不是null；
var myframe = document.getElementById("myframe");
var mywin = myframe.contentWindow;
console.log(mywin.frameElement);
console.log(mywin.frameElement === myframe);
console.log(window.frameElement);
// 在one.html會返回<iframe id="myframe" src="one.html"></iframe>
console.log(window.frameElement);盡管可以通過document.getElementById()和contentWindow屬性來獲取窗口中的子窗體的引用，但在實際場景中，用的還是比較少，主要還是使用frames屬性來訪問；
top對象：
可以使用top引用最頂層（外層）框架，就是瀏覽器窗口；使用它可以確保在一個框架中正確的訪問另一個框架；
// 框架集頁面
window.onload = function(){
console.log(frames);
console.log(top);
console.log(top === frames); // true
console.log(top === window); // true
console.log(frames === window); // true
}
// 框架頁面
console.log("topFrame:",frames);
console.log("topFrame:",top);
console.log("topFrame:",top === frames); // false因此，使用top訪問框架時，也可以如下：
console.log(top[0].name);
console.log(top["topFrame"].name);
console.log(top.topFrame.name);
console.log(top.frames[0].name);
console.log(top.frames["topFrame"].name);
console.log(top.frames === frames); // trueparent對象：
與top相對的另一個window對象是parent，其指的當前框架的直接上層框架，即父框架；
parent在不同的位置指不同的對象；在某些情況下，parent有可能等于top，但在沒有框架的情況下，parent一定等于top（此時，它們都等于window），如：
<!-- frameset.html -->
<frameset rows="100,*">
<frame src="top.html" name="topFrame" />
<frameset cols="50%,50%">
<frame src="left.html" name="leftFrame" />
<frame src="right.html" name="rightFrame" />
</frameset>
</frameset>
<!-- right.html -->
<frameset cols="50%,50%">
<frame src="one.html" name="oneFrame" />
<frame src="two.html" name="twoFrame" />
</frameset>
// one.html中的代碼
var parentFrame = window.parent;
console.log("從one.html中訪問：",parentFrame.name); // rightFrame
parentFrame.frames[1].document.write("<h2>框架訪問</h2>");
// top.html中的代碼
var parentFrame = window.parent;
console.log("top:", parentFrame.name);
console.log("top:", parentFrame.length);
console.log("top:", parentFrame.frames.length);
console.log("top:", parentFrame === top); // true
console.log("top:", parentFrame.frames[1].name);
parentFrame.frames[1].document.write("<h2>是left頁面嗎？</h2>");注：除非最頂層的窗口是通過window.open()打開的，否則其window對象的name屬性不會包含任何值；
self對象：
指向當前window自身，即self和window可以互換使用；
引入self的目的只是為了與top和parent對象對應起來；
對于頂級窗口，parent == self; // true
注：所有的這些對象都是window對象的屬性，可以通過window.parent、window.top等形式訪問；同時，這也意味著可以將不同層次的window對象連接起來，如：window.parent.parent.frames[0]；
窗口交互：
對于一個復雜的框架，窗口之間可以相互訪問，它主要包括對框架自身的引用、父窗口對子窗口的引用、子窗口對父窗口及其他窗口的引用、對頂級窗口的引用；
在使用框架的情況下，瀏覽器中會存在多個Global對象，即每個窗口都會有自己的執行上下文，在每個框架中定義的全局變量會自動成為框架中window對象的屬性；
<!-- right.html -->
<div id="myDiv"></div>
<div id="imgDiv"></div>
<script>
function showImg(){
var imgDiv = document.getElementById("imgDiv");
var img = document.createElement("img");
img.src = "images/1.jpg";
imgDiv.appendChild(img);
}
</script>
// 框架集頁面
window.onload = showDiv;
function showDiv(){
var rightFrame = parent[2];
var myDiv = rightFrame.document.getElementById("myDiv");
myDiv.innerHTML = "<h2>零點網絡</h2>";
}
<!-- top.html -->
<h2>Top頁面</h2>
<div><button id="showBtn">顯示圖片</button>
<button id="closeBtn">關閉圖片</button></div>
<script>
window.onload = function(){
var showBtn = document.getElementById("showBtn");
var closeBtn = document.getElementById("closeBtn");
var rightFrame = top[2];
showBtn.onclick = rightFrame.showImg;
closeBtn.onclick = closeImg;
}
function closeImg(){
var rightFrame = top.rightFrame;
var imgDiv = rightFrame.document.getElementById("imgDiv");
imgDiv.innerHTML = "";
}
</script>對于構造函數，它也是函數，所以當用構造函數和相關的原型對象定義一個自定義類時，這個類只在一個單獨的窗口中定義；子窗口也可以引用這個類；
對于內置類來說，和自定義類就有所不同了；內置的類都會在所有的窗口中自動預定義，即每個窗口的window對象都包含原生類型的構造函數，因此每個框架一套自己的構造函數，這些構造函數一一對應，但并不相等；如：top.Object并不等于top.frames[0].Object，這個問題會影響到對跨框架傳遞的對象使用instanceof操作符；
WindowProxy對象：
window對象是客戶端Javascript的全局變量；但是從技術上來看，并不是這樣的；Web瀏覽器每次向窗口或窗體中載入新的內容，它都會開始一個新的JavaScript執行上下文，包含一個新創建的全局對象；但是當多個窗口或窗體在使用時，有一個重要的概念，盡管窗體或窗口載入了新的文檔，但是引用窗體或窗口的window對象還仍然是一個有效的引用；
所以客戶端Javascript有兩個重要的對象；客戶端全局對象處于作用域鏈的頂級，并且是全局變量和函數所定義的地方；事實上，全局對象會在窗口或窗體載入新內容時被替換；
而我們稱之為“window對象”的對象實際上不是全局對象，而是全局對象的一個代理；每次查詢或設置window對象的屬性時，就會在窗口或窗體的當前全局對象上查詢或設置相同的屬性；
HTML5規范稱這個代理對象為WindowProxy；由于它的代理行為，除了有更長的生命周期之外，代理對象表現得像真正的全局對象；如果可以比較兩個對象，那么區分它們會很困難；但是事實上，沒有辦法可以引用到真正的客戶端全局對象；全局對象處于作用域鏈的頂端，但是window、self、top、parent以及窗體的屬性全部返回代理對象；window.open()也返回代理對象；甚至頂級函數里this的值也是代理對象，而不是真正的全局對象；
Web前端開發之Javascript-零點程序員-王唯
CSS 是什么？
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表。
屬性和屬性值用冒號隔開，以分號結尾。
CSS 四種引入方式：
1.行內式
行內式是在標簽的style屬性中設定CSS樣式。
<div style="..."></div>2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head>標簽的<style></style>標簽對中。
<head>
...
<style type="text/css">
...此處寫CSS樣式
</style>
</head>3.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用@import 引入外部CSS文件，<style>標記也是寫在<head>標記中。
導入式會在整個網頁裝載完后再裝載CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此處注意.css文件的路徑
</style>
</head>4.鏈接式
將一個獨立的.css文件引入到HTML文件中，使用<link>標記寫在<head>標記中。
鏈接式會以網頁文件主體裝載前裝載CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
樣式應用順序：
.nick {
color: yellow !important;
}基本選擇器：
1.通用元素選擇器
* 表示應用到所有的標簽。
* {color: yellow}2.標簽選擇器
匹配所有使用 div 標簽的元素（可以匹配所有標簽）
div {color: yellow}3.類選擇器
匹配所有class屬性中包含info的元素。
語法：.類名{樣式}（類名不能以數字開頭，類名要區分大小寫。）
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>4.ID選擇器
使用id屬性來調用樣式，在一個網頁中id的值都是唯一的（是W3C規范而不是規則，所以不會報錯）。
語法：#ID名{樣式}（ID名不能以數字開頭）
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>組合選擇器：
1.多元素選擇器
同時匹配h3,h4標簽，之間用逗號分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.后代元素選擇器
匹配所有div標簽里嵌套的P標簽，之間用空格分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>3.子元素選擇器
匹配所有div標簽里嵌套的子P標簽，之間用>分隔。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>4.毗鄰元素選擇器
匹配所有緊隨div標簽之后的同級標簽P，之間用+分隔（只能匹配一個）。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>屬性選擇器：
1.[title] & P[title]
設置所有具有title屬性的標簽元素；
設置所有具有title屬性的P標簽元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>2.[title=Nick]
設置所有title屬性等于“Nick”的標簽元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>3.[title~=Nick]
設置所有title屬性具有多個空格分隔的值、其中一個值等于“Nick”的標簽元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>4.[title|=Nick]
設置所有title屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"Nick"開頭的標簽元素。
例：lang屬性："en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
設置屬性值以指定值開頭的每個標簽元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>6.[title$=Nick]
設置屬性值以指定值結尾的每個標簽元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>7.[title*=Nick]
設置屬性值中包含指定值的每個元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>偽類選擇器：
1. link、hover、active、visited
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
<a href="#">Nick</a>2. before、after
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </p> 1. 顏色屬性：
color
transparent
opacity
2. 字體屬性:
font-style: 用于規定斜體文本
font-weight: 設置文本的粗細
font-size: 設置字體的大小
font-family：字體名稱
font：簡寫屬性
3. 文本屬性:
white-space: 設置元素中空白的處理方式
direction: 規定文本的方向
text-align: 文本的水平對齊方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直對齊方式
text-indent: 文本縮進
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個單詞之間的空白
text-transform: 屬性控制文本的大小寫
text-overflow: 文本溢出樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
div {
width: 100px;
height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</div>
</body>
</html>text-decoration: 文本的裝飾
text-shadow：文本陰影
word-wrap：自動換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 150px;
height: 160px;
background-color: #FFA500;
/*邊框陰影*/
box-shadow: 10px 10px 5px #888;
/*自動換行*/
word-wrap: break-word;
}
h1 {
text-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<p>
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
</p>
<h1>索寧</h1>
</body>
</html> a {
text-decoration: none;
/*去除a標簽下劃線*/
}4. 背景屬性
background-color: 背景顏色
background-image 設置圖像為背景
background-position 設置背景圖像的位置坐標
background-repeat 設置背景圖像不重復平鋪
background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動
background 簡寫
5. 列表屬性
list-style-type: 列表項標志的類型
list-style-image：將圖象設置為列表項標志
list-style-position：列表項標志的位置
list-style：縮寫
1. 邊框
border-style：邊框樣式
border-color：邊框顏色
border-width：邊框寬度
border-radius：圓角
border: 簡寫
box-shadow：邊框陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border:2px solid;
border-radius:25px;
width: 140px;
}
</style>
</head>
<body>
<div>
點贊哦！dear.
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.radius1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 20px;
}
.radius2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px 35px;
}
.radius3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 20px 35px 50px;
}
.radius4 {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
border-radius: 20px 35px 50px 60px;
}
</style>
</head>
<body>
<div>
<span class="radius1"></span>
<span class="radius2"></span>
<span class="radius3"></span>
<span class="radius4"></span>
</div>
</body>
</html>邊框實現各種三角符號：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-two {
display: inline-block;
border-top: 0 red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-stree {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-four {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 0 yellow solid;
border-left: 50px blue solid;
}
.triangle-five {
display: inline-block;
border: 50px transparent solid;
border-top: 50px red solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-seven {
display: inline-block;
border: 50px transparent solid;
border-top: 60px red solid;
border-right: 0;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="triangle-one"></div>
<div class="triangle-two"></div>
<div class="triangle-stree"></div>
<div class="triangle-four"></div>
<div class="triangle-five"></div>
<div class="triangle-six"></div>
<div class="triangle-seven"></div>
<div class="triangle-eight"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: #ddd;
position: relative;
}
.back-in {
position: absolute;
width: 1020px;
height: 45px;
left: -20px;
top: 50px;
background-color: #2F4F4F;
}
.back-img {
border: 20px solid transparent;
border-top: 10px solid dimgrey;
border-right: 0;
display: inline-block;
position: absolute;
top: 95px;
left: -20px;
}
.back-font {
line-height: 9px;
margin-left: 30px;
color: white;
}
</style>
</head>
<body>
<div class="back">
<div class="back-in"><h3 class="back-font">妹子求關注 ^.^</h3></div>
<div class="back-img"></div>
</div>
</body>
</html>2.★ 盒子模型
一個標準的盒子模型：
padding:用于控制內容與邊框之間的距離;
margin: 用于控制元素與元素之間的距離;
一個參數，應用于四邊。
兩個參數，第一個用于上、下，第二個用于左、右。
三個參數，第一個用于上，第二個用于左、右，第三個用于下。
邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子，外層還有html，
在默認情況下，body距離html會有若干像素的margin，所以body中的盒子不會緊貼瀏覽器窗口的邊框了。
解決方法：
body {
margin: 0;
}3.★ display
4. visibility
5.★ float 浮動
讓一行顯示兩個塊級標簽，會脫離文檔流
clear 清除浮動：
6. clip 剪裁圖像
rect 剪裁定位元素：
7. overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容
8.★ position 規定元素的定位類型
9. z-index 元素層疊順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
</body>
</html>10. outline 邊框輪廓
11. zoom 縮放比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
</style>
</head>
<body>
<div class="zoom1">Nick 100%</div>
<div class="zoom2">Nick 200%</div>
<div class="zoom3">Nick 300%</div>
</body>
</html>12. cursor 鼠標的類型形狀
鼠標放在以下單詞上，There will be a miracle：
url: 自定義光標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
body {
cursor: url("mouse.png"), auto;
/*圖片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
}
</style>
</head>
<body>
<div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html> Auto: 默認
Default: 默認
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help
not-allowed
13. transform、transition 動畫效果
transform 轉換，變形
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border: 1px solid black;
height: 30px;
width: 30px;
background-color: yellow;
/*transform-origin: 50px 50px;*/
transform-origin: left;
transform: rotate(50deg);
/*transform: skew(50deg,50deg);*/
/*transform: translate(50px,50px);*/
/*transform: scale(2);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Transition 平滑過渡
#property 指定屬性對應類型
1、color： 通過紅、綠、藍和透明度組件變換（每個數值單獨處理），如：background-color，border-color，color，outline-color等CSS屬性；
2、length：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；
3、percentage：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；
4、integer 離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換為整數時發生，如：outline-offset，z-index等屬性；
5、number真實的（浮點型）數值，如：zoom，opacity，font-weight等屬性；
6、transform list。
7、rectangle：通過x、 y、 width和height（轉為數值）變換，如：crop；
8、visibility：離散步驟，在0到1數字范圍之內，0表示“隱藏”，1表示完全“顯示”,如：visibility；
9、shadow：作用于color、x、y、和blur（模糊）屬性，如：text-shadow；
10、gradient：通過每次停止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數值以便執行動畫，如：background-image；
11、paint server (SVG)：只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似；
12、space-separated list of above：如果列表有相同的項目數值，則列表每一項按照上面的規則進行變化，否則無變化；
13、a shorthand property：如果縮寫的所有部分都可以實現動畫，則會像所有單個屬性變化一樣變化。#支持執行transition效果的屬性
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer鼠標放在以下圖片上，There will be a miracle：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
.img-see-2016-7-2 {
background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
background-size: 660px;
background-repeat: no-repeat;
height: 300px;
width: 600px;
transition-duration: 30s;
transition-timing-function: ease;
transition-property: background-size;
}
.img-see-2016-7-2:hover {
background-size: 2000px;
}
</style>
</head>
<body>
<div class="img-see-2016-7-2"></div>
</body>
</html>作者：suoning
原文鏈接：https://www.cnblogs.com/suoning/p/5625582.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
