網頁三劍客之CSS
1.CSS概述
CSS中文簡稱層疊樣式表(英文全稱：Cascading Style Sheets)，用來控制頁面的表現，即便頁面更好看的語言。javascript
2.CSS基本語法和頁面引用
2.1 css的定義方法
每一個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束。css
選擇器 { 屬性:值; 屬性:值; 屬性:值;}
選擇器是將樣式和頁面元素關聯起來的名稱，屬性是但願設置的樣式屬性每一個屬性有一個或多個值。代碼示例：
div{ width:100px; height:100px; color:red }
css通用書寫結構
/*
解釋性的信息
*/
/*全局通用的樣式*/
/*導航條的樣式*/
/*商品列表樣式*/
p {
color: red;
font-size: 18px
}
/*標籤選擇器*/
h1 {
color: green;
}
/*ID選擇器*/
#p2 {
color: black;
}
/*類選擇器*/
.c1 {
color: yellow;
}
2.2 CSS頁面引入方法
（1）、外聯式：經過link標籤，連接到外部樣式表到頁面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
（2）、嵌入式：經過style標籤，在網頁上建立嵌入的樣式表。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
（3）、內聯式：經過標籤的style屬性，在標籤上直接寫樣式。
<div style="width:100px; height:100px; color:red ">......</div>
（4）、導入式：引用數量有限制
<style>@import"css/main.css";</style>
實際工做中，咱們經常使用外聯式和嵌入式。
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>內聯式</title> </head> <body> <div> <h2 style="text-align: center;">什麼是CSS</h2> <p style="color: red;text-indent: 20px; font-size: 16px;"> 爲了讓網頁元素的樣式更加豐富，也爲了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標籤就廢棄不用了，html只負責文檔的結構和內容，表現形式徹底交給CSS，html文檔變得更加簡潔。 </p> <hr> <p style="color: blue;text-indent: 20px;font-size: 16px;"> 第一行是文檔聲明，第二行"html"標籤和最後一行「html」定義html文檔的總體，「html」標籤中的‘lang=「en」’定義網頁的語言爲英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它通常做爲分析統計用。 「head」標籤和「body」標籤是它的第一層子元素，「head」標籤裏面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，「body」內編寫網頁上顯示的內容。 </p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嵌入式</title> <style> /*標籤選擇器*/ h2{ text-align: center; } /*id選擇器*/ #p1{ color: red; text-indent: 20px; font-size: 16px; } #p2{ color: blue; text-indent: 20px; font-size: 16px; } </style> </head> <body> <div> <h2>什麼是CSS</h2> <p id="p1"> 爲了讓網頁元素的樣式更加豐富，也爲了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標籤就廢棄不用了，html只負責文檔的結構和內容，表現形式徹底交給CSS，html文檔變得更加簡潔。 </p> <hr> <p id="p2"> 第一行是文檔聲明，第二行"html"標籤和最後一行「html」定義html文檔的總體，「html」標籤中的‘lang=「en」’定義網頁的語言爲英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它通常做爲分析統計用。 「head」標籤和「body」標籤是它的第一層子元素，「head」標籤裏面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，「body」內編寫網頁上顯示的內容。 </p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嵌入式</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div> <h2>什麼是CSS</h2> <p id="p1"> 爲了讓網頁元素的樣式更加豐富，也爲了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標籤就廢棄不用了，html只負責文檔的結構和內容，表現形式徹底交給CSS，html文檔變得更加簡潔。 </p> <hr> <p class="cb"> 第一行是文檔聲明，第二行"html"標籤和最後一行「html」定義html文檔的總體，「html」標籤中的‘lang=「en」’定義網頁的語言爲英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它通常做爲分析統計用。 「head」標籤和「body」標籤是它的第一層子元素，「head」標籤裏面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，「body」內編寫網頁上顯示的內容。 </p> </div> </body> </html>
/* 解釋性的信息 */ /*全局通用的樣式*/ /*標籤選擇器*/ h2{ text-align: center; } /*id選擇器*/ #p1{ color: red; text-indent: 20px; font-size: 16px; } p{ text-indent: 20px; font-size: 16px; } /*類選擇器*/ .cb{ color: blue; }
3.CSS選擇器
3.1 基礎選擇器
（1）*：通用選擇器，匹配任何元素。* { margin:0; padding:0; }
標籤選擇器
（2）標籤選擇器，此種選擇器影響範圍大，建議儘可能應用在層級選擇器中。
舉例：
• *{margin:0;padding:0}
• div{color:red}
•
•
• <div>....</div> <!-- 對應以上兩條樣式 -->
• <div class="box">....</div> <!-- 對應以上兩條樣式 -->
（3）id選擇器
• 經過id名來選擇元素，元素的id名稱不能重複，因此一個樣式設置項只能對應於頁面上一個元素，不能複用，id名通常給程序使用，因此不推薦使用id做爲選擇器。
舉例：
• #box{color:red}
•
• <div id="box">....</div> <!-- 對應以上一條樣式，其它元素不容許應用此樣式 -->
（4）類選擇器
• 經過類名來選擇元素，一個類可應用於多個元素，一個元素上也可使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。
舉例：
• .red{color:red}
• .big{font-size:20px}
• .mt10{margin-top:10px}
•
• <div class="red">....</div>
• <h1 class="red big mt10">....</h1>
• <p class="red mt10">....</p>
3.2 組合選擇器
（1）層級選擇器（後代選擇器）
• 主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減小命名，同時也能夠經過層級，防止命名衝突。
舉例：
• .box span{color:red}
• .box .red{color:pink}
• .red{color:red}
•
• <div class="box">
• <span>....</span>
• <a href="#" class="red">....</a>
• </div>
•
• <h3 class="red">....</h3>
（2）組選擇器
• 多個選擇器，若是有一樣的樣式設置，可使用組選擇器。
舉例：
• .box1,.box2,.box3{width:100px;height:100px}
• .box1{background:red}
• .box2{background:pink}
• .box2{background:gold}
•
• <div class="box1">....</div>
• <div class="box2">....</div>
• <div class="box3">....</div>
（3）子元素選擇器（兒子選擇器）
E>F 子元素選擇器，匹配全部E元素的子元素F
div > p { color:#f00; }
（4）毗鄰選擇器
/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
margin: 5px;
}
（5）弟弟選擇器
/*i1後面全部的兄弟p標籤*/
#i1~p {
border: 2px solid royalblue;
}
注意嵌套規則：html
塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。 有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt li內能夠包含div 塊級元素與塊級元素並列、內聯元素與內聯元素並列。
3.3 屬性選擇器
E[att] 匹配全部具備att屬性的E元素，不考慮它的值。（注意：E在此處能夠省略，好比「[cheacked]」。如下同。） p[title] { color:#f00; }
E[att=val] 匹配全部att屬性等於「val」的E元素 div[class=」error」] { color:#f00; }
E[att~=val] 匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」的E元素 td[class~=」name」] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每一個元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結尾的每一個元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每一個元素 div[class*="test"]{background:#ffff00;}
3.4 僞類選擇器：僞類選擇器是爲了給選擇器添加一些特殊效果
anchor僞類：專用於控制連接的顯示效果vue
a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。
a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。
a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。
僞類選擇器 : 僞類指的是標籤的不一樣狀態:
a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
a:link {color: #FF0000} /* 未訪問的連接 */
a:visited {color: #00FF00} /* 已訪問的連接 */
a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }
before,after僞類java
• 經常使用的僞類選擇器有hover，表示鼠標懸浮在元素上時的狀態，僞元素選擇器有before和after,它們能夠經過樣式在元素中插入內容。
• .box1:hover{color:red}
• .box2:before{content:'行首文字';}
• .box3:after{content:'行尾文字';}
•
•
• <div class="box1">....</div>
• <div class="box2">....</div>
• <div class="box3">....</div>
示例；python
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS引入示例</title> <!--<style>--> <!--p {--> <!--color: green;--> <!--}--> <!--</style>--> <link rel="stylesheet" href="css/index.css"> </head> <body> <!--<p style="color: blue">海燕</p>--> <p id="p1">海燕</p> <p id="p2">這個是個黑色的海燕</p> <p class="c1">這個是個黑色的海燕</p> <p class="c1">這個是個黑色的海燕</p> <p class="c1">這個是個黑色的海燕</p> <p class="c1">這個是個黑色的海燕</p> <h1>海燕</h1> </body> </html>
解釋性的信息 */ /*全局通用的樣式*/ /*導航條的樣式*/ /*商品列表樣式*/ p { color: red; font-size: 18px } /*標籤選擇器*/ h1 { color: green; } /*ID選擇器*/ #p2 { color: black; } /*類選擇器*/ .c1 { color: yellow; }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>組合選擇器示例</title> <link rel="stylesheet" href="css/index2.css"> </head> <body> <!--<div id="d1">--> <!--<p>我是嵌套在div中的P標籤</p>--> <!--<span>我是嵌套在div中的span標籤</span>--> <!--<div>--> <!--<p>我是嵌套在div中的div中的P標籤</p>--> <!--<span>我是嵌套在div中的span標籤</span>--> <!--</div>--> <!--</div>--> <hr> <!--毗鄰--> <p>000</p> <div>111</div> <p>222</p> <p>333</p> </body> </html>
/*組合選擇器示例的CSS文件*/ /*後代選擇器*/ /*#d1 p {*/ /*color: red;*/ /*}*/ /*兒子選擇器*/ /*#d1>p {*/ /*color: green;*/ /*}*/ /*毗鄰選擇器*/ /*div+p {*/ /*color: yellow;*/ /*}*/ /*弟弟選擇器*/ div~p{ color: blue; }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>屬性選擇器示例</title> <link rel="stylesheet" href="css/index3.css"> </head> <body> <p nb="hao" >我是一個p標籤</p> <p nb="good">我也是一個p標籤</p> <p>我是仍是一個p標籤</p> </body> </html>
/*屬性選擇器相關樣式*/ /*[s9] {*/ /*color: red;*/ /*}*/ [nb="hao"] { color: blue; }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>分組和嵌套示例</title> <link rel="stylesheet" href="css/index4.css"> <link rel="stylesheet" href=css/index44.css"> </head> <body> <div id="d1">我是一個div標籤</div> <p id="p1" style="color: yellow">我是一個p標籤</p> <div id="d2" class="">10個類選擇器</div> </body> </html>
/*分組和嵌套示例*/ /*當樣式有重複的時候*/ /*推薦分行寫選擇器,可是要注意必定要加逗號*/ #d1, p { color: red; } /*嵌套使用選擇器*/ /*#d1+p {*/ /*color: blue;*/ /*}*/ /*權重就是2*/ div+p { } /*權重101*/ #d1+p { } #p1 { color: deeppink; }
/*分組和嵌套示例*/ /*當樣式有重複的時候*/ /*推薦分行寫選擇器,可是要注意必定要加逗號*/ #d1, p { color: green; } /*嵌套使用選擇器*/ /*#d1+p {*/ /*color: blue;*/ /*}*/
4.CSS優先級
樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""-------------------1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-1
按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。mysql
注：一票否決權： font-size: 14px !importantweb
5.CSS的繼承性
CSS的繼承性:
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
body{color:red;} <p>helloyuan</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。
p{color:green}
發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。
此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
附加說明：redis
一、文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。這裏文內樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷標定義的規則。 二、有!important聲明的規則高於一切。 三、若是!important聲明衝突，則比較優先權。 四、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。 五、由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。
6.CSS文本設置
經常使用的應用文本的css樣式： • color 設置文字的顏色，如： color:red; • font-size 設置文字的大小，如：font-size:12px; • font-family 設置文字的字體，如：font-family:'微軟雅黑'; • font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜 • font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗 • font 同時設置文字的幾個屬性，寫的順序有兼容問題，建議按照以下順序寫： font：是否加粗 字號/行高 字體；如： font:normal 12px/36px '微軟雅黑'; • line-height 設置文字的行高，如：line-height:24px; • text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉 • text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px • text-align 設置文字水平對齊方式，如text-align:center 設置文字水平 快捷方式： (div.box>a)*4
華文細黑：STHeiti Light [STXihei] 華文黑體：STHeiti 華文楷體：STKaiti 華文宋體：STSong 華文仿宋：STFangsong 儷黑 Pro：LiHei Pro Medium 儷宋 Pro：LiSong Pro Light 標楷體：BiauKai 蘋果儷中黑：Apple LiGothic Medium 蘋果儷細宋：Apple LiSung Light Windows的一些： 新細明體：PMingLiU 細明體：MingLiU 標楷體：DFKai-SB 黑體：SimHei 宋體：SimSun 新宋體：NSimSun 仿宋：FangSong 楷體：KaiTi 仿宋_GB2312：FangSong_GB2312 楷體_GB2312：KaiTi_GB2312 微軟正黑體：Microsoft JhengHei 微軟雅黑體：Microsoft YaHei 裝Office會生出來的一些： 隸書：LiSu 幼圓：YouYuan 華文細黑：STXihei 華文楷體：STKaiti 華文宋體：STSong 華文中宋：STZhongsong 華文仿宋：STFangsong 方正舒體：FZShuTi 方正姚體：FZYaoti 華文彩雲：STCaiyun 華文琥珀：STHupo 華文隸書：STLiti 華文行楷：STXingkai 華文新魏：STXinwei
注：css顏色表示法算法
• css顏色值主要有三種表示方法： • 一、顏色名錶示，好比：red 紅色，gold 金色 • 二、rgb表示，好比：rgb(255,0,0)表示紅色 • 三、16進制數值表示，好比：#ff0000 表示紅色，這種能夠簡寫成 #f00
參考： http://www.w3school.com.cn/cssref/css_colornames.asp
列表屬性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; <br> list-style: circle;
list-style: upper-alpha;
list-style: disc; }
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本樣式</title> <style> .box{ width: 600px; height: 800px; margin: 0 auto; } h2{ font-family: '楷體'; font-size: 30px; color: blue; font-weight: bold; font-style: normal; line-height: 50px; text-decoration: underline; } .author{ color: red; } div{ /*text-indent: 32px;*/ text-align: left; word-spacing: 10px; text-transform: capitalize; } </style> </head> <body> <div class="box"> <h2>面朝大海，春暖花開</h2> <span class="author">【做者】海子 【朝代】現代</span> <div> <p> 從明天起，作一個幸福的人</br> 餵馬，劈柴，周遊世界</br> 從明天起，關心糧食和蔬菜</br> 我有一所房子，面朝大海，春暖花開</br> </p> <p> 從明天起，和每個親人通訊</br> 告訴他們個人幸福</br> 那幸福的閃電告訴個人</br> 我將告訴每個人</br> </p> <p> 給每一條河每一座山取一個溫暖的名字</br> 陌生人，我也爲你祝福</br> 願你有一個燦爛的前程</br> 願你有情人終成眷屬</br> 願你在塵世得到幸福</br> 我只願面朝大海，春暖花開</br> </p> </div> </div> </body> </html>
7.CSS盒子模型
7.1 盒子模型解釋
元素在頁面中顯示成一個方塊，相似一個盒子，CSS盒子模型就是使用現實中盒子來作比喻，幫助咱們設置元素對應的樣式。盒子模型示意圖以下：
把元素叫作盒子，設置對應的樣式分別爲：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
7.2 設置邊框
設置一邊的邊框，好比頂部邊框，能夠按以下設置：
border-top-color:red; /* 設置頂部邊框顏色爲紅色 */ border-top-width:10px; /* 設置頂部邊框粗細爲10px */ border-top-style:solid; /* 設置頂部邊框的線性爲實線，經常使用的有：solid(實線) dashed(虛線) dotted(點線); */ 上面三句能夠簡寫成一句： border-top:10px solid red; 設置其它三個邊的方法和上面同樣，把上面的'top'換成'left'就是設置左邊，換成'right'就是設置右邊，換成'bottom'就是設置底邊。 四個邊若是設置同樣，能夠將四個邊的設置合併成一句： border:10px solid red;
7.3 設置內間距padding
設置盒子四邊的內間距，可設置以下：
padding-top：20px; /* 設置頂部內間距20px */
padding-left:30px; /* 設置左邊內間距30px */
padding-right:40px; /* 設置右邊內間距40px */
padding-bottom:50px; /* 設置底部內間距50px */
上面的設置能夠簡寫以下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設置的是 上 右 下 左
四個方向的內邊距值。 */
padding後面還能夠跟3個值，2個值和1個值，它們分別設置的項目以下：
padding：20px 40px 50px; /* 設置頂部內邊距爲20px，左右內邊距爲40px，底部內邊距爲50px */
padding：20px 40px; /* 設置上下內邊距爲20px，左右內邊距爲40px*/
padding：20px; /* 設置四邊內邊距爲20px */
7.4 設置外間距margin
外邊距的設置方法和padding的設置方法相同，將上面設置項中的'padding'換成'margin'就是外邊距設置方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子的真實尺寸</title> <style type="text/css"> .box01{width:50px;height:50px;background-color:gold;} .box02{width:50px;height:50px;background-color:gold;border:50px solid #000} .box03{width:50px;height:50px;background-color:gold;border:50px solid #000;padding: 50px;} </style> </head> <body> <div class="box01">1</div> <br /> <div class="box02">2</div> <br /> <div class="box03">3</div> </body> </html>
7.5 外邊距合併
外邊距合併 外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。解決方法以下： 一、使用這種特性 二、設置一邊的外邊距，通常設置margin-top 三、將元素浮動或者定位
7.6 margin塌陷
在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，致使內部的盒子margin-top設置失敗.
父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，
而後按此div 進行margin；
解決方法以下：
一、外部盒子設置一個邊框或padding或文本內容
二、外部盒子設置 overflow:hidden
三、使用僞元素類：
.clearfix:before{
content: '';
display:table;
}
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box{ width: 200px; height: 100px; background-color: yellow; /*border-top-width: 10px; border-top-color: #000; 實線：solid 虛線: dashed 點縣：dotted border-top-style:solid; */ /*border-top: 10px solid #000; border-left: 10px dashed #000; border-right: 10px dotted #000; border-bottom: 10px solid #000;*/ border: 50px solid #000; /*padding-top: 20px; padding-left: 40px; padding-right: 100px; padding-bottom: 200px; */ /*分別設置 上 右 下 左*/ /*padding: 20px 100px 200px 40px;*/ /* 分別設置上 左右 下*/ /*padding: 20px 100px 200px;*/ /* 分別設置 上下 左右*/ /*padding: 20px 100px;*/ /*分別設置上下左右*/ padding: 100px; /*margin-top: 50px; margin-left: 100px; margin-right: 200px; margin-bottom: 300px;*/ /*margin: 50px 200px 300px 400px;*/ margin: 50px auto; /*分別設置 上 右 下 左*/ /*margin: 20px 100px 200px 40px;*/ /* 分別設置上 左右 下*/ /*margin: 20px 100px 200px;*/ /* 分別設置 上下 左右*/ /*margin: 20px 100px;*/ /*分別設置上下左右*/ /*margin: 20px 100px;*/ /*分別設置上下左右 margin: 100px;*/ } </style> </head> <body> <div class="box"> 元素在頁面中顯示成一個方塊，相似一個盒子，CSS盒子模型就是使用現實中盒子來作比喻，幫助咱們設置元素對應的樣式。盒子模型示意圖以下： </div> <div class="box"> 元素在頁面中顯示成一個方塊，相似一個盒子，CSS盒子模型就是使用現實中盒子來作比喻，幫助咱們設置元素對應的樣式。盒子模型示意圖以下： </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本樣式</title> <style> .box{ width: 600px; height: 800px; margin: 0 auto; } h2{ font-family: '楷體'; font-size: 30px; color: blue; font-weight: bold; font-style: normal; line-height: 50px; text-decoration: underline; } .author{ color: red; } div{ /*text-indent: 32px;*/ text-align: left; word-spacing: 10px; text-transform: capitalize; } </style> </head> <body> <div class="box"> <h2>面朝大海，春暖花開</h2> <span class="author">【做者】海子 【朝代】現代</span> <div> <p> 從明天起，作一個幸福的人</br> 餵馬，劈柴，周遊世界</br> 從明天起，關心糧食和蔬菜</br> 我有一所房子，面朝大海，春暖花開</br> </p> <p> 從明天起，和每個親人通訊</br> 告訴他們個人幸福</br> 那幸福的閃電告訴個人</br> 我將告訴每個人</br> </p> <p> 給每一條河每一座山取一個溫暖的名字</br> 陌生人，我也爲你祝福</br> 願你有一個燦爛的前程</br> 願你有情人終成眷屬</br> 願你在塵世得到幸福</br> 我只願面朝大海，春暖花開</br> </p> </div> </div> </body> </html>
8.CSS元素溢出
當子元素的尺寸超過父元素的尺寸時，須要設置父元素顯示溢出的子元素的方式，設置的方法是經過overflow屬性來設置。 overflow的設置項： 一、visible 默認值。內容不會被修剪，會呈如今元素框以外。 二、hidden 內容會被修剪，而且其他內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。 三、scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。 四、auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。 五、inherit 規定應該從父元素繼承 overflow 屬性的值。
9. background屬性
屬性解釋 background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設置背景圖片和背景顏色的，background是一個複合屬性，它能夠分解成以下幾個設置項： • background-color 設置背景顏色 • background-image 設置背景圖片地址 • background-repeat 設置背景圖片如何重複平鋪 • background-position 設置背景圖片的位置 • background-attachment 設置背景圖片是固定仍是隨着頁面滾動條滾動 實際應用中，咱們能夠用background屬性將上面全部的設置項放在一塊兒，並且也建議這麼作，這樣作性能更高，並且兼容性更好，好比：「background: #00FF00 url(bgimage.gif) no-repeat left center fixed」，這裏面的「#00ff00」是設置background-color；「url(bgimage.gif)」是設置background-image；「no-repeat」是設置background-repeat；「left center」是設置background-position；「fixed」是設置background-attachment，各個設置項用空格隔開，有的設置項不寫也是能夠的，它會使用默認值。
一、「background:url(bg.jpg)」，默認設置一個圖片地址，圖片會從盒子的左上角開始將盒子鋪滿。
二、「background:cyan url(bg.jpg) repeat-x」，橫向平鋪盒子，盒子其餘部分顯示背景顏色「cyan」。
三、「background:cyan url(bg.jpg) repeat-y」，縱向平鋪盒子，盒子其餘部分顯示背景顏色「cyan」。
四、「background:cyan url(bg.jpg) no-repeat」，背景不重複，背景和盒子左上角對齊，盒子其餘部分顯示背景顏色「cyan」。
五、「background:cyan url(bg.jpg) no-repeat left center」，背景不重複，背景和盒子左中對齊，盒子其餘部分顯示背景顏色「cyan」。
六、「background:cyan url(bg.jpg) no-repeat right center」，背景不重複，背景和盒子右中對齊，也就是背景圖片的右邊對齊盒子的右邊，盒子其餘部分顯示背景顏色「cyan」。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test background</title> <style type="text/css"> .backshow{ width:320px; height:160px; border:3px solid #333; float:left; margin:10px; } .bg1{background:cyan url(bg.jpg);} .bg2{background:cyan url(bg.jpg) repeat-x;} .bg3{background:cyan url(bg.jpg) repeat-y;} .bg4{background:cyan url(bg.jpg) no-repeat;} .bg5{background:cyan url(bg.jpg) no-repeat left center;} .bg6{background:cyan url(bg.jpg) no-repeat right center;} </style> </head> <body> <div class="backshow bg1"></div> <div class="backshow bg2"></div> <div class="backshow bg3"></div> <div class="backshow bg4"></div> <div class="backshow bg5"></div> <div class="backshow bg6"></div> </body> </html>
10.浮動
文檔流
文檔流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行以內從左到右排列，先寫的先排列，後寫的排在後面，每一個盒子都佔據本身的位置。
浮動特性
一、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
二、浮動的元素會向左或向右浮動，碰到父元素邊界、浮動元素、未浮動的元素才停下來
三、相鄰浮動的塊元素能夠並在一行，超出父級寬度就換行
四、浮動讓行內元素或塊元素自動轉化爲行內塊元素
五、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，造成文字饒圖的效果
六、父元素內總體浮動的元素沒法撐開父元素，須要清除浮動
七、浮動元素之間沒有垂直margin的合併
清除浮動
• 父級上增長屬性overflow：hidden
• 在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）
• 使用成熟的清浮動樣式類，clearfix
• .clearfix:after,.clearfix:before{ content: "";display: table;}
• .clearfix:after{ clear:both;}
• .clearfix{zoom:1;}
清除浮動的使用方法：
.con2{... overflow:hidden}
或者
<div class="con2 clearfix">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動</title> <style> .box{ width: 200px; height: 200px; background-color: gold; border: 1px solid #000; text-align: center; line-height: 200px; margin: 20px; } .box-left{ float: left; } .box-right{ float: right; } </style> </head> <body> <div class="box box-left">內容一</div> <div class="box box-left">內容二</div> <div class="box box-left">內容三</div> <div class="box box-right">內容四</div> <div class="box box-left">內容五</div> <div class="box box-right">內容六</div> <div class="box box-left">內容七</div> <div class="box box-right">內容八</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字環繞</title> <style> .box{ width: 400px; height: 400px; border: 1px solid #000; margin: 100px auto 0; overflow: scroll; } .pic{ width: 150px; height: 150px; float: left; margin: 0 10px 5px 0; } .person{ width: 400px; height: 400px; background-color: gold; } </style> </head> <body> <div class="box"> <div class="pic"><img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=27a6723e4c2309f7e76faa144a356bce/9e3df8dcd100baa1a5fd20114d10b912c9fc2e42.jpg" alt="" width="150px" height="150px"></div> <div class="person"> 科比·布萊恩特（Kobe Bryant），1978年8月23日出生於美國賓夕法尼亞州費城，前美國職業籃球運動員，司職得分後衛/小前鋒（鋒衛搖擺人），綽號「黑曼巴」/「小飛俠」。 [1] 1996年第1輪第13位被夏洛特黃蜂隊選中，後來被交易到湖人隊。整個NBA生涯（1996年-2016年）所有效力於NBA洛杉磯湖人隊，是前NBA球員喬·布萊恩特的兒子 [1] 。 科比是NBA最好的得分手之一，生涯贏得無數獎項 [1] ，突破、投籃、罰球、三分球他都得心應手，幾乎沒有進攻盲區，單場比賽81分的我的紀錄就有力地證實了這一點。除了瘋狂的得分外，科比的組織能力也很出衆，常常擔任球隊進攻的第一發起人。另外科比仍是聯盟中最好的防守人之一，貼身防守很是具備壓迫性。 2016年4月14日，科比·布萊恩特在生涯最後一場主場對陣爵士的常規賽後宣佈退役。 [1] 2017年12月19日，湖人主場對陣勇士，中場時刻爲科比的8號和24號2件球衣舉行了退役儀式。 [2] 2018年3月13日，科比憑藉和動畫師格蘭·基恩合做的短片《親愛的籃球》得到第90屆奧斯卡最佳短片獎。 [3] </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮動</title> <style> .con, .con2, .con3{ width: 300px; border: 1px solid #000; margin: 100px auto 0; } /* .con2{ overflow: hidden; }*/ .con a{ width: 50px; height: 50px; display: inline-block; line-height: 50px; margin: 10px; text-align: center; background-color: gold; text-decoration: none; } .con2 a{ width: 50px; height: 50px; background-color: gold; margin: 10px; text-align: center; line-height: 50px; text-decoration: none; float: left; } .clearfix:after,.clearfix:before{ content: ""; display: table; } .clearfix:after{ clear:both; } .clearfix{ zoom:1; } </style> </head> <body style="height: 2000px;"> <div class="con"> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> <a href="">6</a> <a href="">7</a> <a href="">8</a> </div> <div class="con2 clearfix"> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> <a href="">6</a> <a href="">7</a> <a href="">8</a> </div> </body> </html>
11.定位
關於定位 咱們可使用css的position屬性來設置元素的定位類型，postion的設置項以下： • relative 生成相對定位元素，元素所佔據的文檔流的位置不變，元素自己相對文檔流的位置進行偏移 • absolute 生成絕對定位元素，元素脫離文檔流，不佔據文檔流的位置，能夠理解爲漂浮在文檔流的上方，相對於上一個設置了相對或者絕對或者固定定位的父級元素來進行定位，若是找不到，則相對於body元素進行定位。 • fixed 生成固定定位元素，元素脫離文檔流，不佔據文檔流的位置，能夠理解爲漂浮在文檔流的上方，相對於瀏覽器窗口進行定位。 • static 默認值，沒有定位，元素出如今正常的文檔流中，至關於取消定位屬性或者不設置定位屬性 • inherit 從父元素繼承 position 屬性的值 定位元素特性 絕對定位和固定定位的塊元素和行內元素會自動轉化爲行內塊元素 使用margin屬性佈局絕對定位元素 當元素絕對定位之後，它在父元素的位置是根據top/left/right/bottom來定位的，而margin是根據自身當前位置來定位的 此狀況，margin-bottom 和margin-right的值再也不對文檔流中的元素產生影響，由於該元素已經脫離了文檔流。另外，無論它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。 圖9中，使用margin屬性佈局相對定位元素。 層級關係爲： <div ——————————— position:relative; <div—————————-沒有設置爲定位元素，不是參照物 <div———————-沒有設置爲定位元素，不是參照物 <div box1 <div box2 ——–position:absolute; margin-top:50px; margin-left:120px; <div box3
定位元素層級 定位元素是浮動的正常的文檔流之上的，能夠用z-index屬性來設置元素的層級 注：經常使用父元素設置爲position:relative,兒子設置成position：absolute相對於父元素進行絕對定位。 典型定位佈局 一、固定在頂部的菜單 二、水平垂直居中的彈框 三、固定的側邊的工具欄 四、固定在底部的按鈕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style> .con{ width: 400px; height: 400px; border: 1px solid #000; margin: 100px auto 0; position: relative; } .con div, .box4{ width: 200px; height: 100px; margin: 20px; background-color: gold; line-height: 100px; text-align: center; font-size: 40px; } .con .box1{ position: relative; left: 50px; top: 50px; background-color: green; z-index: 2; } .con .box2{ position: absolute; left: 0px; top: 0px; background-color: red; z-index: 1; } .box4{ background-color: pink; position: fixed; right: 0px; top: 0px; } </style> </head> <body> <div class="con"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> <div class="box4">4</div> </body> </html>
12.塊元素、內聯元素、內聯塊元素
元素就是標籤，佈局中經常使用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。 塊元素 塊元素，也能夠稱爲行元素，佈局中經常使用的標籤如：div、form、table、p、pre、h1～h五、dl、ol、ul等等都是塊元素，它在佈局中的行爲： • 支持所有的樣式 • 若是沒有設置寬度，默認的寬度爲父級寬度100% • 盒子佔據一行、即便設置了寬度 內聯元素 內聯元素，也能夠稱爲行內元素，佈局中經常使用的標籤如：span、a、strong、em、label、input、select、textarea、img、br等等都是內聯元素，它們在佈局中的行爲： 支持部分樣式（不支持寬、高、margin上下、padding上下） • 寬高由內容決定 • 盒子並在一行 • 代碼換行，盒子之間會產生間距 • 子元素是內聯元素，父元素能夠用text-align屬性設置子元素水平對齊方式，用line-height屬性值設置垂直對齊方式 內聯塊元素 內聯塊元素，也叫行內塊元素，是新增的元素類型，現有元素沒有歸於此類別的，img和input元素的行爲相似這種元素，可是也歸類於內聯元素，咱們能夠用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行爲： • 支持所有樣式 • 若是沒有設置寬高，寬高由內容決定 • 盒子並在一行 • 代碼換行，盒子會產生間距 • 子元素是內聯塊元素，父元素能夠用text-align屬性設置子元素水平對齊方式，用line-height屬性值設置子元素垂直對齊方式 這三種元素，能夠經過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，因此咱們常常把內聯元素轉化爲塊元素，少許轉化爲內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。 display屬性 display屬性是用來設置元素的類型及隱藏的，經常使用的屬性有： 一、none 元素隱藏且不佔位置 二、block 元素以塊元素顯示 三、inline 元素之內聯元素顯示 四、inline-block 元素之內聯塊元素顯示 解決內聯元素間隙的方法 一、去掉內聯元素之間的換行 二、將內聯元素的父級設置font-size爲0，內聯元素自身再設置font-size 3. 將父元素的word-spacing:-5px; 4. margin:-3px;
補充：
透明度：opacity: 1; 0-1 手心圖標：cursor: pointer; 邊框圓潤度：border-radius: 15%; 0 - 100%
佈局實例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的簡歷</title> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- <link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.min.css"> --> <style> .side-bar{ width: 20%; height: 100%; background-color: rgb(37,70,101); float: left; } .main{ width: 80%; height: 100%; float: left; } .header{ padding: 20px 15px; } .header, .personal{ height: 200px; } .header .avatar{ display: block; border: 5px solid #fff; margin: 0 auto; position: relative; overflow: hidden; width: 128px; height: 128px; border-radius: 50%; } .avatar img{ max-width: 100%; } .side-bar .content{ color: white; } .personal .content{ width: 100%; margin: 10px auto 0 20px; } .personal .content span{ color: #fff; font-family: "微軟雅黑"; line-height: 26px; } .evaluation{ height: 200px; /*border: 2px solid #fff;*/ } .evaluation .content{ text-indent: 20px; padding: 5px 10px; } .name, .info{ text-align: center; color: white; margin: 10px auto; } .per-header, .eva-header, .hob-header{ height: 50px; background-color: rgb(91,155,213); color: white; text-align: center; line-height: 50px; letter-spacing: 10px; } .main{ margin: 20px 0; } .main .education, .main .skill, .main .project, .main .honor{ min-height: 150px; /*border: 2px solid #000;*/ } .edu-header, .sk-header, .pro-header, .hon-header{ margin-left: 20px; font-size: 20px; font-weight: bolder; padding-bottom: 10px; border-bottom: 1px solid #000; } .main .content{ text-align: left; padding: 5px 30px; } .main .content p{ margin: 7px auto; } .hobby .content table{ width: 80%; margin: 5px auto; text-align: center; } .hobby .content span{ display: inline-block; padding: 7px 20px; } </style> </head> <body> <div class="side-bar"> <div class="header"> <a href="" class="avatar"> <img src="kobe.jpg" alt="" width="128px" height="128px;"> </a> <div class="name">科比</div> <div class="info">NBA籃球巨星</div> </div> <div class="personal"> <div class="per-header">我的簡介</div> <div class="content"> <span><i class="fa fa-user-o"></i> : 美國公民</span><br> <span><i class="fa fa-vcard-o"></i> : 1978.08.23</span><br> <span><i class="fa fa-map-marker"></i> : 費城</span><br> <span><i class="fa fa-phone"></i> : 666666666</span><br> <span><i class="fa fa-envelope-o"></i> : kobe@qq.com</span><br> </div> </div> <div class="evaluation"> <div class="eva-header">我的評價</div> <div class="content"> 球場就是戰場，惟有突破自我才能成爲這場硬仗的主角，而堅持是強者的性格，是贏家的祕籍，是科比身上最高的鬥戰奧義，有一種堅持，叫 科比•布萊恩特！. </div> </div> <div class="hobby"> <div class="hob-header">興趣愛好</div> <div class="content"> <table> <tbody> <tr> <td><span><i class="fa fa-laptop fa-2x"></i></span></td> <td><span><i class="fa fa-soccer-ball-o fa-2x"></i></span></td> </tr> <tr class="hobby-name"> <td><span>計算機</span></td> <td><span>籃球</span></td> </tr> <tr> <td><span><i class="fa fa-book fa-2x"></i></span></td> <td><span><i class="fa fa-cab fa-2x"></i></span></td> </tr> <tr class="hobby-name"> <td><span>閱讀</span></td> <td><span>戶外</span></td> </tr> <tr> <td><span><i class="fa fa-pencil-square-o fa-2x"></i></span></td> <td><span><i class="fa fa-music fa-2x"></i></span></td> </tr> <tr class="hobby-name"> <td><span>寫做</span></td> <td><span>音樂</span></td> </tr> </tbody> </table> </div> </div> </div> <div class="main"> <div class="education"> <div class="edu-header"> <i class="fa fa-mortar-board"></i> 教育經歷</div> <div class="content"> <p><b>2014.09—2018.6 山西醫科大學 信息管理與信息系統專業 </b></p> <p>科比·布萊恩特（Kobe Bryant），1978年8月23日出生於美國賓夕法尼亞州費城，前美國職業籃球運動員，司職得分後衛/小前鋒（鋒衛搖擺人），綽號「黑曼巴」/「小飛俠」。 [1] 1996年第1輪第13位被夏洛特黃蜂隊選中，後來被交易到湖人隊。整個NBA生涯（1996年-2016年）所有效力於NBA洛杉磯湖人隊，是前NBA球員喬·布萊恩特的兒子 [1] 。 </p> </div> </div> <div class="skill"> <div class="sk-header"><i class="fa fa-wrench"></i> 專業技能</div> <div class="content"> <p>1. 熟練使用Python, 熟悉R和go語言， 有必定的C、java基礎。</p> <p>2. 熟悉Python的Django、Flask等web框架，瞭解vue.js, 並能夠進行相應web開發</p> <p>3. 能熟練使用Python進行爬蟲，熟悉scrapy框架，可以用多線程、進程、協程提升爬蟲性能。熟練數據處理等相關操做</p> <p> 4. 掌握機器學習經常使用算法的原理和實現</p> <p>5. 主要研究方向爲天然語言處理</p> <p>6. 數據庫：Mysql, redis和mongodb和sqlite3</p> </div> </div> <div class="project"> <div class="pro-header"><i class="fa fa-pencil-square"></i> 項目（科研）經歷</div> <div class="content"> <p>2016.9參加全國大學生數學建模競賽，並得到山西賽區的優秀獎</p> <p>2016.10參加名稱爲《「醫」動校園APP》創新創業校級項目,並順利完成項目。</p> <p>2017年12月於《智富時代》雜誌發表題爲《「醫」動校園APP的設計與開發》的論文。</p> <p>畢業設計自主開發山西醫科大學知識問答平臺（django2.0.5+python3.7+mysql5.7） 實現登陸、退出功能，搜索、提問、回答問題功能，發佈，編輯文章功能，給文章留言功能，我的中心能夠修改密碼，查看提問數、回答數、發佈文章數，並能夠刪除個人提問，從新編輯或刪除已發佈文章，以及利用django自帶admin實現用戶，問答和文章的後臺管理功能</p> </div> </div> <div class="honor"> <div class="hon-header"><i class="fa fa-glass"></i> 獎項榮譽</div> <div class="content"> <p>21世紀頭10年最佳NBA球員</p> <p>奧運會冠軍：2次（2008年北京奧運會，2012年倫敦奧運會） [233] </p> <p>NBA總冠軍：5次（2000，2001，2002，2009，2010） [234-237] </p> <p>NBA得分王：2次（2006，2007） [238] </p> <p>NBA西部冠軍：7次（2000—2002，2004，2008—2010） [234-236] [239-240] </p> <p>NBA總決賽MVP：2次（2009，2010） [159] </p> <p>NBA常規賽MVP：1次（2008） [113] </p> <p>NBA全明星賽MVP：4次（2002，2007，2009－與沙奎爾·奧尼爾共享，2011） [241] </p> <p>NBA全明星賽扣籃大賽冠軍：1次（1997） [242] </p> <p>NBA全明星：18次（1998，2000—2016）（注：1999年因勞資糾紛，比賽未舉辦 </p> <p>2010年達拉斯全明星賽、2014年新奧爾良全明星賽因傷退出） [73] [243] </p> </div> </div> </div> </body> </html>
相關文章
- 1. 網頁三劍客之HTML
- 2. 網頁三劍客之JS
- 3. HTML、CSS 和 JavaScript-----網頁三劍客
- 4. HTML-CSS- JavaScript——網頁三劍客
- 5. 網頁三劍客
- 6. 前端三劍客之 css
- 7. 網絡「三劍客」
- 8. 三劍客之sed
- 9. 三劍客之grep
- 10. 三劍客之awk
- 更多相關文章...
- • Web 網頁 驗證 - 網站建設指南
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 網頁三劍客之HTML
- 2. 網頁三劍客之JS
- 3. HTML、CSS 和 JavaScript-----網頁三劍客
- 4. HTML-CSS- JavaScript——網頁三劍客
- 5. 網頁三劍客
- 6. 前端三劍客之 css
- 7. 網絡「三劍客」
- 8. 三劍客之sed
- 9. 三劍客之grep
- 10. 三劍客之awk