輕輕鬆鬆學CSS：position
position屬性表示元素的定位類型，在CSS佈局中，position發揮着很是重要的做用，一些元素的佈局就是用position完成的，鑑於此，本文結合一些小實例詳細講解一下。css
position屬性在一般狀況下有4個可選值，分別是：static、fixed、relative、absolute。（還有第5個屬性sticky，因部分瀏覽器可能還不支持，本文暫不介紹）html
1、static前端
默認值，由於實際設計網頁的時候「用不着」，因此不作介紹。（你若是很好學，能夠隨便在網上搜一下，一搜就一大把，通常咱們遇到一大把的解答就抓狂，似是而非的說法一大堆向你撲面而來，必定搞得你懵圈，可是我要負責地告訴你這個不會，隨便看一我的的解答，他都會講得清楚明白，幾乎每一個人講解的核心意思都是：這是「默認值」，實踐中幾乎用不到，對不少人來講懂與不懂一個樣！呵呵，這下你坦然了吧！）jquery
fixed、relative、absolute好像性格不一樣的三我的物，掌握了三我的物的性格特色基本，就掌握了這塊知識。我儘量用最通俗、最形象的語言來描述他們，讓讀者在輕鬆快樂中學習。web
2、fixed瀏覽器
輕鬆調侃完static以後，緊接着就聊fixed。在以前查閱的資料中，沒有（幾乎沒有）立刻就介紹fixed的，通常都是static-relative-absolute-fixed這樣的順序，fixed排在最後。我不隨波逐流，我以爲fixed特立獨行，他是野孩子，他不受祖制約束（不是「組織約束」，但他確實也不受「組織約束」），桀驁不馴。沒有家長的管教，他無組織、無紀律，是典型的獨行俠，所以學習他就相對簡單（「相對簡單」是指在html、css中牽扯因素少），先學簡單的符合讀者的認知規律。服務器
如今，讀者對fixed尚未一個具體的感知，先舉個簡單的例子-浮動廣告，代碼以下：ide
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>懸浮廣告</title> 6 <style> 7 .content1{ 8 height:1500px; 9 background:#ccc; 10 } 11 .content2{ 12 height:2000px; 13 background:#ddd; 14 } 15 16 .guanggao{ 17 position:fixed; 18 top:100px; 19 right:80px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="content1"> 25 這是網站第一部份內容，右上角是懸浮廣告，top和right的值都是相對瀏覽器窗口的位置 26 </div> 27 <div class="guanggao"> 28 <img src="img/guanggao.jpg"> 29 </div> 30 <div class="content2"> 31 這是網站第二部份內容，浮動廣告脫離文檔流，因此它就和網站第一部份內容緊挨着了 32 </div> 33 </body> 34 </html>
懸浮廣告是固定定位（position：fixed），他脫離了文檔流，在html安排順序中，懸浮廣告（<div class=」guanggao」><img src=」…」></div>）原本的位置是在，第一部份內容（<div class=」content1」>…</div>）與第二部份內容（<div class=」content2」>…</div>）之間的，由於他脫離了文檔流，第一部份內容和第二部份內容就當他不存在同樣，兩個塊元素（block）緊挨在一塊兒。浮動廣告只相對於瀏覽器窗口定位，和position：fixed配合的偏移屬性top:100px,right:80px都是相對於瀏覽器窗口來講的，效果圖以下：佈局
fixed叫「固定定位」,讀者運行代碼後應該能體會出，懸浮廣告老是相對瀏覽器窗口保持top=100px,right=80px不動，滾動條怎麼滾動都改變不了他的位置。學習
爲了更加有力地說明固定定位不受祖制約束，請把上邊地代碼調整一下，把懸浮廣告（<div class=」guanggao」><img src=」…」></div>）放在第一部份內容中或者是第二部份內容中，在此以放在第一部份內容中爲例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>懸浮廣告2</title> 6 <style> 7 .content1{ 8 height:1500px; 9 background:#ccc; 10 } 11 .content2{ 12 height:2000px; 13 background:#ddd; 14 } 15 16 .guanggao{ 17 position:fixed; 18 top:100px; 19 right:80px; 20 } 21 22 </style> 23 <script> 24 25 </script> 26 </head> 27 <body> 28 <div class="content1"> 29 這是網站第一部份內容，右上角是懸浮廣告，top和right的值都是相對瀏覽器窗口的位置 30 <div class="guanggao"> 31 <img src="img/guanggao.jpg"> 32 </div> 33 </div> 34 <div class="content2"> 35 這是網站第二部份內容，浮動廣告脫離文檔流，因此它就和網站第一部份內容緊挨着了 36 </div> 37 </body> 38 </html>
運行效果和上面的第一段代碼徹底同樣，故而不附效果圖了。
他徹底不受第一部份內容的約束（不受祖制的約束），運行後他的偏移屬性（top、right）都是相對瀏覽器窗口來講的，他的位置跟第一部份內容一點關係都沒有。各位讀者，我說明白了嗎？
下面再舉個稍微複雜點（由於有jquery）的例子-遮罩
遮罩的應用普遍，通常用於凸顯一部份內容同時也就淡化其餘內容，好比註冊、登陸、新增表單、修改表單等，這裏以登陸爲例（註冊、新增表單、修改表單跟登陸道理相似）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>遮罩</title> 6 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> 7 <style> 8 .fixed{ 9 position:fixed; 10 width:100%; 11 height:100%; 12 left:0; 13 top:0; 14 display:none; 15 background:rgba(0,0,0,0.5); 16 } 17 18 .login{ 19 position:absolute; 20 top:50%; 21 left:50%; 22 width:300px; 23 display:none; 24 margin-top:-200px; 25 margin-left:-150px; 26 border:1px solid #ccc; 27 padding:60px 40px; 28 background:orange; 29 border-radius:20px; 30 } 31 32 .login p{ 33 text-align:center; 34 } 35 .login p input{ 36 width:78%; 37 height:40px; 38 background:#ccc; 39 border-radius:5px; 40 } 41 #submit{ 42 margin-top:80px; 43 height:50px; 44 } 45 46 </style> 47 <script> 48 $(function(){ 49 $('button').click(function(){ 50 $('.fixed').css('display','block'); 51 $('.login').css('display','block'); 52 }); 53 $('#submit').click(function(){ 54 $('.fixed').css('display','none'); 55 $('.login').css('display','none'); 56 }) 57 }) 58 </script> 59 </head> 60 <body> 61 <button class="button">登陸</button> 62 <div class="fixed"></div> 63 <div class="login"> 64 <p><input type="text" placeholder="請輸入用戶名"></p> 65 <p><input type="password" placeholder="請輸入密碼"></p> 66 <p><input id="submit" type="button" value="登陸"></p> 67 </div> 68 </body> 69 </html>
點擊下圖中的「登陸」按鈕
此時，出現登陸框，而且在登陸框周圍有遮罩效果（遮罩：凸顯登陸框，淡化周圍元素。出現登陸框和遮罩須要用到js或jQuery知識，這些知識不在本文討論的範圍以內）
點擊上圖登陸框中的「登陸」按鈕，遮罩消失。（這裏也用到js或jQuery知識）
由於遮罩應用較多，因此把上邊的代碼解釋一下：
遮罩（<div class=」fixed」></div>）須要把整個屏幕遮罩住，因此定位在top=0,left=0,而且全屏寬（width：100%）、全屏高（height：100%），爲了避免使下面的元素徹底看不見，設置了透明度爲0.5，background:rgba(0,0,0,0.5)背景是黑色，透明度爲50%。
有的讀者注意到登陸框（<div class=」login」>…</div>）也是固定定位（<style> .login{position:fixed;…} … </style>），其實他也能夠設置爲absolute，若是沒有設置登陸框的position屬性就沒法保證登陸框顯示在遮罩之上（這涉及到定位元素的堆疊順序的知識，因不是本文重點，故而點到爲止）
這麼一看，好像fixed也不簡單呀。其實，懸浮廣告仍是很是好理解的，遮罩須要點js或jQuery知識，這樣就增長了一點難度，可是對讀者（要有一點點html、css基礎，個人文章主要面對這樣的讀者）來講，努力一下應該可以克服，畢竟爲了實現本身的理想，爲了技術上有所提升，這樣的難度應該不是大事。退一步說，遮罩你理解不了，懸浮廣告總能理解吧？能理解這一關也算勉強經過了。
下一關，讓咱們見識見識relative，他又是怎樣的一我的呢？
3、relative
請讀者先看下面這段代碼，爲了增長讀者閱讀代碼的愉悅感，先從最簡單、最基本的入手。如下的代碼很是簡潔，只有Box2設置了定位屬性（position：relative），其餘元素均未設置定位屬性，這樣就簡化了問題，便於讀者理解。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative_Box2</title> 6 <style> 7 div{ 8 width:100px; 9 height:100px; 10 11 } 12 #Box2{ 13 position:relative; 14 left:20px; 15 top:50px; 16 background:orange; 17 } 18 #Box1{ 19 background:green; 20 } 21 #Box3{ 22 background:blue; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="Box1">Box1</div> 28 <div id="Box2">Box2</div> 29 <div id="Box3">Box3</div> 30 </body> 31 </html>
效果圖以下：
relative是相對定位，相對誰定位呢？相對於本身，確切地說是相對於本身偏移以前（圖中虛線框就是Box2本來的位置）。別人的定位基準是html/body，或是祖輩，relative也挺個性，是個自戀狂，他以自我爲中心，只和本身定位前的位置比較，未設置position：relative時在哪一個位置，設置position：relative後的位置就和未設置時比較，進行偏移。Box2就相對於虛線框位置進行偏移。（position：relative固然要配合使用偏移屬性top、left、right、bottom等，若是沒有偏移屬性配合使用，光有position：relative，跟沒有設置position是同樣的，瞎子點燈——白費蠟）。
讀者發現一個問題沒有？relative他雖然偏移了，但原來的位置還在那兒，Box1和Box3是不能擠佔的，靈魂雖然走了，但軀體還在那兒，有點像單位裏吃空餉的，拿着工資，辦公桌還在那兒擺着，就是沒見他上過班。這些讓我想起了一個成語「尸位素餐」！
下面，舉個relative應用的例子
讀者在點擊導航欄上的菜單時，可能會遇到超連接發生稍許偏移的狀況，這是由於這種效果能和用戶有個交互，增長用戶體驗。
代碼很簡單，以下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative_a</title> 6 <style> 7 li{ 8 display:inline-block; 9 margin:0 20px; 10 } 11 li:hover{ 12 position:relative; 13 top:10px; 14 left:6px; 15 } 16 </style> 17 </head> 18 <body> 19 <ul> 20 <li><a href="#">首頁</a></li> 21 <li><a href="#">新聞</a></li> 22 <li><a href="#">聯繫咱們</a></li> 23 <li><a href="#">關於咱們</a></li> 24 </ul> 25 </body> 26 </html>
效果圖以下：
這個例子，讀者理解嗎？若是理解了，請往下看另外一個例子——陰影效果，這個例子也不難
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative_shadow</title> 6 <style> 7 div.shadow{ 8 background:#ccc; 9 float:right; 10 } 11 12 img{ 13 position:relative; 14 left:-5px; 15 top:-5px; 16 17 border:1px solid #465B68; 18 padding:6px; 19 background:#fff; 20 width:208px; 21 height:151px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="shadow"> 27 <img src="img/guanggao.jpg"> 28 </div> 29 </body> 30 </html>
效果圖以下：
div的背景是灰色，照片原本是和它重疊的，看不到背景，但是照片相對定位（relative）後，（相對本身原來的位置）向左偏移5px，向上偏移5px，因爲它未脫離文檔流，它的軀殼還在原來的位置不動，而且露出了div的背景，這樣就造成了陰影效果。
讀者可能感受出relative個性鮮明，只和本身比較，應該是最簡單的呀！能夠這麼理解，可是relative不老是唱獨角戲，他有時和absolute聯袂出演，因此，讀者仍是先對absolute有個瞭解吧。
4、absolute
absolute是絕對定位，讀者先看一段代碼（凡是讓讀者上來就看一段代碼，而不是講解知識點而後再看代碼，都是由於代碼很簡單，而且須要藉助於代碼說明問題，因此，讀者儘管放心，不要一上來看到的是代碼就有畏難情緒，覺得代碼比文字更費解，偏偏相反，這種狀況下，代碼必定很簡單，我寫文章儘可能不給讀者設置閱讀障礙）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>absolute_Box2</title> <style> body{ background:gray; height:5000px; } .wrap{ border:2px solid blue; } #Box1,#Box3{ height:200px; background:orange; border:1px dashed red; } #Box2{ position:absolute; bottom:100px; right:200px; background:orange; border:1px dashed red; } </style> </head> <body> <div class="wrap"> <div id="Box1">Box1</div> <div id="Box2">Box2</div> <div id="Box3">Box3</div> </div> </body> </html>
效果圖以下：
這段代碼和relative第一段代碼差異不是很大，這段代碼只有Box2設置了定位屬性（position：absolute），其餘元素均未設置定位屬性，這是爲了簡化問題，防止其餘因素干擾，實際狀況中未必這樣，有時absolute和其餘定位屬性的值（好比：relative）可能同時出現，這是本文後面要討論的，後面再說。
在這個前提條件下（上段文字中的「只有Box2….，其餘元素均未….」），注意前提條件，本段的結論，若是脫離前提條件，就不成立了。在此，提示讀者這一點。Box2設置了絕對定位，他的偏移屬性（例如本例中bottom：100px，right：200px）是相對瀏覽器窗口來講的。（再次說明，在知足本段的前提條件下，結論才成立。後面會講到前提條件變了，偏移屬性就再也不相對於瀏覽器窗口來講了。本段提到 「前提條件」有5次之多！）
absolute脫離了文檔流（這一點和誰相像，對——是fixed），absolute（fixed）不在這個單位上班，調走了，就不在這個單位領工資了，更沒有他的辦公桌了，relative吃空餉，擺辦公桌也不上班，靈魂走了，軀殼還在（佔位）。這是absolute和fixed的相同點，同時也是absolute（fixed）和relative的區別。
absolute在知足「前提條件」（就是「只有Box2…,其餘元素均未…」那個前提條件）時和fixed相同，偏移屬性相對於瀏覽器窗口來講的。
有的讀者問了，這麼說fixed和absolute幾乎徹底同樣了？確實，相同的地方不少，但不一樣的地方仍是有的，好比，在滾動條滾動時，fixed在瀏覽器窗口中是不動的（fixed，固定不動的意思），absolute是隨着滾動條滾動的。讀者能夠往回看，對比一下懸浮廣告和知足「前提條件」下的Box2，就明白這一點了。
固然，absolute和fixed還有其它不一樣，讀者在繼續學完absolute後就知道了。
前面講到absolute的那段代碼（「前提條件」Box2那段），很簡潔，當時是爲了說明問題方便，實際狀況下，在整個代碼段中，absolute每每不是本身出現，常常和別的定位值一塊兒使用，更多的時候是和relative一塊兒出現。還記得在relative的最後那句話嗎？——「relative不老是唱獨角戲，他有時和absolute聯袂出演」。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative-absolute_Box2</title> 6 <style> 7 body{ 8 background:gray; 9 height:5000px; 10 } 11 .wrap{ 12 border:2px solid blue; 13 position:relative; 14 } 15 #Box1,#Box3{ 16 height:200px; 17 background:orange; 18 border:1px dashed red; 19 } 20 #Box2{ 21 position:absolute; 22 bottom:100px; 23 right:200px; 24 25 background:orange; 26 border:1px dashed red; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="wrap"> 32 <div id="Box1">Box1</div> 33 <div id="Box2">Box2</div> 34 <div id="Box3">Box3</div> 35 </div> 36 </body> 37 </html>
上面的代碼裏既有relative，也有absolute，仍是Box2，只是外面的包裹器（class=「wrap」）多了一個定位屬性（position：relative）。爲了說明問題，在不改變代碼含義前提下，稍微修改一下，結構能夠描述成這樣的：<div class=」wrap」 style=」position:relative」>…<div id=」Box2」 style=」position:absolute」>Box2</div>…</div>
這樣relative-absolute聯袂出現了，並且仍是父子關係（固然不只限於父子關係，也能夠推廣到爺孫關係等…）
效果圖以下：
此時，Box2（position：absolute）的偏移屬性（right：200px；bottom：100px）是相對於父元素（確切的說是：有static之外定位的祖輩元素）來講的。absolute有祖輩了（通常狀況下祖輩是relative），有家長的孩子再也不是野孩子了，出去玩玩能夠，可是得在家長的附近玩，獲得家長的寵愛，同時也受到家長的約束。這時，讀者想到fixed了嗎？這個可憐的孩子，一出生就走入社會，沒有家長的寵愛，固然也沒有家長去約束他。這也是absolute和fixed的區別，到最後，咱們再好好總結一下relative、absolute、fixed的異同點。
absolute的家長有個正規的名字叫「包含框」，通俗的說就是「定位基準」，偏移屬性的值都是相對於包含框（定位基準）來講的。
relative-absolute應用的第一個例子——提示框
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative-absolute_tip</title> 6 <style> 7 .tip{ 8 position:relative; 9 color:red; 10 cursor:pointer; 11 } 12 .tip:hover span{ 13 position:absolute; 14 top:30px; 15 left:-30px; 16 17 display:block; 18 width:100px; 19 background:#424242; 20 color:#fff; 21 padding:10px; 22 } 23 .tip span{ 24 display:none; 25 } 26 </style> 27 </head> 28 <body> 29 <p> 30 Web前端知識包括： 31 <span class="tip"> 32 CSS 33 <span>CSS 指層疊樣式表 (Cascading Style Sheets),它是網頁外觀表現樣式</span> 34 </span>、 35 <span class="tip"> 36 Html 37 <span>超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言</span> 38 </span class="tip">、 39 <span class="tip"> 40 JavaScript 41 <span>JavaScript 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可普遍用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備</span> 42 </span> 43 </p> 44 </body> 45 </html>
效果圖以下：
提示框（position：absolute）是相對於父元素（position：relative）來定位的。
relative-absolute應用的第二個例子——懸浮出現二級子菜單
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>relative-absolute_zicaidan</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 .nav{ 12 background:blue; 13 color:#fff; 14 } 15 .nav span{ 16 display:inline-block; 17 padding:30px 50px; 18 } 19 li{ 20 list-style:none; 21 } 22 23 .zicaidan{ 24 position:relative; 25 cursor:pointer; 26 27 } 28 .zicaidan ul{ 29 display:none; 30 background:#000; 31 } 32 .zicaidan ul li{ 33 padding:30px; 34 } 35 .zicaidan ul li:hover{ 36 background:#aaa; 37 color:red; 38 } 39 .zicaidan:hover ul{ 40 position:absolute; 41 top:80px; 42 left:10px; 43 display:block; 44 45 } 46 </style> 47 </head> 48 <body> 49 <div class="nav"> 50 <span>首頁</span> 51 <span class="zicaidan"> 52 新聞 53 <ul> 54 <li>新聞1</li> 55 <li>新聞2</li> 56 <li>新聞3</li> 57 <li>新聞4</li> 58 </ul> 59 </span> 60 <span class="zicaidan"> 61 聯繫咱們 62 <ul> 63 <li>聯繫方式1</li> 64 <li>聯繫方式2</li> 65 <li>聯繫方式3</li> 66 </ul> 67 </span> 68 </div> 69 </body> 70 </html>
效果圖以下：
懸浮出現二級子菜單和提示框道理上基本差很少，再也不贅述。
好了，到了該總結總結的時候了，我先陳述一下每一個人的特色，穿插着他們的異同點，最後用一個表格簡單整理一下。
fixed,一出生就被家長拋棄了，他是野孩子，無拘無束，他脫離文檔流，懸浮在通常元素之上，他在與不在對別人來講都同樣，沒啥影響。他的偏移屬性值是相對於瀏覽器窗口來講的，也就是他相對於瀏覽器窗口固定，他不隨滾動條一塊兒滾動。典型應用，懸浮廣告、遮罩。
relative是自戀狂，偏移屬性值是相對於他在正常狀況下來講的，他本身和本身比較。偏移後堆疊在通常元素之上，他原來的位置還在那兒佔着，佔着辦公桌還不上班，吃空餉。典型應用，陰影效果（relative單獨使用）。
absolute若是沒有家長（沒有家長：全部祖輩元素均沒有static之外的定位），他就和fixed很像，脫離文檔流，懸浮於通常元素之上，他在與不在對別人來講都同樣，沒啥影響。他的偏移屬性值（top、right、bottom、left簡稱：TRBL 上右下左）是相對於瀏覽器窗口來講的，也就是他相對於瀏覽器窗口固定，他隨着滾動條一塊兒滾動（這是他和fixed的區別）。
absolute更多的時候是有家長的，家長通常就是relative，relative-absolute組合使用，這是的absolute就再也不相對瀏覽器窗口定位了，而是相對於父元素（relative）定位，有了家長的孩子再也不滿世界撒野，而是在家長的管束下，但他仍然脫離文檔流，不和通常的元素爭搶位置，通常元素就當他不存在同樣，他堆疊在通常元素之上。典型應用，提示框和懸浮出現二級子菜單。
| position的主要可選值 |
是否脫離文檔流 |
是否隨着滾動條滾動 |
定位基準 |
應用 |
| fixed |
是 |
否 |
瀏覽器窗口 |
懸浮廣告、遮罩 |
| relative（單獨） |
否 |
是 |
本身在正常狀況下的位置 |
超連接錯位、陰影效果 |
| absolute（單獨） |
是 |
是 |
瀏覽器窗口 |
應用很少 |
| relative-absolute（組合）下的absolute |
是 |
是 |
定位的直系祖輩元素（此時的定位基準也叫「包含框」） |
提示框、懸浮出現二級子菜單 |
注：
relative-absolute（組合）在一般狀況下，relative做爲「定位父元素」。
先解釋一下「父元素」確切的說應該是直系祖輩元素，各類資料說法不一，但表達的意思都是同樣的，本文有時叫「父元素」，有時也叫「祖輩元素」，有時還叫「直系祖輩元素」，讀者不用糾結叫法，知道它的涵義就能夠了。
再解釋一下「定位」，是指該元素的定位屬性值是除static之外的值，更多的時候是position:relative，因此本文直接寫成「relative-absolute」。
鑑於個別內容不便於文字表達，本人計劃於近期在視頻學習網站發佈關於position的相關視頻，內容較之本文稍有拓展，屆時，我會將視頻連接發佈於此。讀者若有興趣，敬請關注。
- 1. 輕輕鬆鬆種綠豆
- 2. 輕輕鬆鬆學CSS:媒體查詢
- 3. 輕鬆學JVM
- 4. 輕鬆學卷積
- 5. 學會輕鬆完成組織架構圖，輕輕鬆鬆完成任務！
- 6. 輕輕鬆鬆運行起minicap
- 7. 輕輕鬆鬆裝個win7系統
- 8. 輕鬆一下
- 9. 輕鬆 Java IO
- 10. 輕輕鬆鬆學懂Java（一）——JDK與IDEA
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 輕輕鬆鬆種綠豆
- 2. 輕輕鬆鬆學CSS:媒體查詢
- 3. 輕鬆學JVM
- 4. 輕鬆學卷積
- 5. 學會輕鬆完成組織架構圖，輕輕鬆鬆完成任務！
- 6. 輕輕鬆鬆運行起minicap
- 7. 輕輕鬆鬆裝個win7系統
- 8. 輕鬆一下
- 9. 輕鬆 Java IO
- 10. 輕輕鬆鬆學懂Java（一）——JDK與IDEA