《CSS3實戰》筆記--選擇器（一）

通過閱讀和學習書籍《CSS3實戰》總結
《CSS3實戰》/成林著.—北京機械工業出版社2011.

屬性選擇器

CSS1中定義的選擇器：

CSS2中定義的選擇器：

CSS3新增的屬性選擇器：

實戰體驗：文檔共享的友善之舉

在百度文庫的下載資源列表的超鏈接前面都會顯示一個文檔類型圖標，這是一種非常友好的設計細節。使用屬性選擇器就可以輕鬆實現。

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超級鏈接類型標識圖標</title>
<style type="text/css">
p { margin:4px; }
a[href^="http:"] {/*匹配所有有效超鏈接*/
 background: url(images/window.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="pdf"] {/*匹配PDF文件*/
 background: url(images/icon_pdf.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="xls"] {/*匹配XML樣式表文件*/
 background: url(images/icon_xls.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="ppt"] {/*匹配演示文稿*/
 background: url(images/icon_ppt.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="rar"] {/*匹配壓縮文稿*/
 background: url(images/icon_rar.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="gif"] {/*匹配GIF圖像文件*/
 background: url(images/icon_img.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="jpg"] {/*匹配JPG圖像文件*/
 background: url(images/icon_img.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="png"] {/*匹配PNG圖像文件*/
 background: url(images/icon_img.gif) no-repeat left center;
 padding-left: 18px;
}
a[href$="txt"] {/*匹配TXT文件*/
 background: url(images/icon_txt.gif) no-repeat left center;
 padding-left: 18px;
}
</style>
</head>
<body>
<h1>超級鏈接類型標識圖標</h1>
<p><a href="http://www.baidu.com/name.pdf">PDF文件</a> </p>
<p><a href="http://www.baidu.com/name.ppt">PPT文件</a> </p>
<p><a href="http://www.baidu.com/name.xls">XLS文件</a> </p>
<p><a href="http://www.baidu.com/name.rar">RAR文件</a> </p>
<p><a href="http://www.baidu.com/name.gif">GIF文件</a> </p>
<p><a href="http://www.baidu.com/name.jpg">JPG文件</a> </p>
<p><a href="http://www.baidu.com/name.png">PNG文件</a> </p>
<p><a href="http://www.baidu.com/name.txt">TXT文件</a> </p>
<p><a href="http://www.baidu.com/#anchor">#錨點超鏈接</a></p>
<p><a href="http://www.baidu.com/">http://www.baidu.com/</a></p>
</body>
</html>

演示效果：

結構僞類選擇器

結構僞類（Structural pseudo-classes）是CSS3新增的類型選擇器。顧名思義，結構僞類選擇器就是利用文檔結構樹（DOM）實現元素過濾。也就是說，通過文檔結構的相互關係來匹配特定的元素，從而減少文檔內對class屬性和ID屬性的定義，使得文檔更加簡潔。

實戰體驗一：設計優雅的數據表格

大量的數據顯示在一起時容易影響用戶的閱讀體驗。例如，長時間的閱讀數據易引起視覺疲勞，以及誘發錯行誤讀等問題。因此，Web設計師在設計數據表格時應該考慮到用可能會遇到的這些問題。建議採用隔行或隔列換色，動態背景等方法來提升用戶瀏覽大容量數據時的體驗。

CSS設計思路

隔行分色時最經典的數據表設計樣式，它主要是從易用性的角度來考慮的，以提高用戶瀏覽數據的速度和準確度。傳統設計方法是先定義一個樣式表，然後把該類應用到所有奇數行或者偶數行上。這種方法會增加設計師的工作量，也給文檔添加很多不必要的屬性。採用CSS的結構僞類選擇器後，實現得將很容易。可以使用E：nth-child(n)選擇器快速爲偶數行或奇數行定義分色背景，從而便於用戶瀏覽。

代碼（傳統方法版）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>設計優雅的數據表格</title>
<style type="text/css">
h1 {
    font-size:16px;
}
table {
    width:100%;
    font-size:12px;
    table-layout:fixed;
    empty-cells:show;
    border-collapse: collapse;
    margin:0 auto;
    border:1px solid #cad9ea;
    color:#666;
}
th {
    background-image: url(images/th_bg1.gif);
    background-repeat:repeat-x;
    height:30px;
    overflow:hidden;
}
td {
    height:20px;
}
td, th {
    border:1px solid #cad9ea;
    padding:0 1em 0;
}
tr.a1 {
    background-color:#f5fafe;
}
</style>
</head>
<body>
<h1>設計優雅的數據表格</h1>
<table summary="設計優雅的數據表格">
    <tr>
        <th>排名</th>
        <th>校名</th>
        <th>總得分</th>
        <th>人才培養總得分</th>
        <th>研究生培養得分</th>
        <th>本科生培養得分</th>
        <th>科學研究總得分</th>
        <th>自然科學研究得分</th>
        <th>社會科學研究得分</th>
        <th>所屬省份</th>
        <th>分省排名</th>
        <th>學校類型</th>
    </tr>
    <tr>
        <td>1</td>
        <td>清華大學 </td>
        <td>296.77</td>
        <td>128.92</td>
        <td>93.83</td>
        <td>35.09</td>
        <td>167.85</td>
        <td>148.47</td>
        <td>19.38</td>
        <td width="16">京 </td>
        <td width="12">1 </td>
        <td>理工 </td>
    </tr>
    <tr class="a1">
        <td>2</td>
        <td>北京大學 </td>
        <td>222.02</td>
        <td>102.11</td>
        <td>66.08</td>
        <td>36.03</td>
        <td>119.91</td>
        <td>86.78</td>
        <td>33.13</td>
        <td>京 </td>
        <td>2 </td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>3</td>
        <td>浙江大學 </td>
        <td>205.65</td>
        <td>94.67</td>
        <td>60.32</td>
        <td>34.35</td>
        <td>110.97</td>
        <td>92.32</td>
        <td>18.66</td>
        <td>浙 </td>
        <td>1</td>
        <td>綜合 </td>
    </tr>
    <tr class="a1">
        <td>4</td>
        <td>上海交大</td>
        <td>150.98</td>
        <td>67.08</td>
        <td>47.13</td>
        <td>19.95</td>
        <td>83.89</td>
        <td>77.49</td>
        <td>6.41</td>
        <td>滬 </td>
        <td>1</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>5</td>
        <td>南京大學</td>
        <td>136.49</td>
        <td>62.84</td>
        <td>40.21</td>
        <td>22.63</td>
        <td>73.65</td>
        <td>53.87</td>
        <td>19.78</td>
        <td>蘇</td>
        <td>1</td>
        <td>綜合 </td>
    </tr>
    <tr class="a1">
        <td>6</td>
        <td>復旦大學 </td>
        <td>136.36</td>
        <td>63.57</td>
        <td>40.26</td>
        <td>23.31</td>
        <td>72.78</td>
        <td>51.47</td>
        <td>21.31</td>
        <td>滬</td>
        <td>2</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>7</td>
        <td>華中科大</td>
        <td>110.08</td>
        <td>54.76</td>
        <td>30.26</td>
        <td>24.50</td>
        <td>55.32</td>
        <td>47.45</td>
        <td>7.87</td>
        <td>鄂 </td>
        <td>1</td>
        <td>理工 </td>
    </tr>
    <tr class="a1">
        <td>8</td>
        <td>武漢大學 </td>
        <td>103.82</td>
        <td>50.21</td>
        <td>29.37</td>
        <td>20.84</td>
        <td>53.61</td>
        <td>36.17</td>
        <td>17.44</td>
        <td>鄂 </td>
        <td>2</td>
        <td>綜合</td>
    </tr>
    <tr>
        <td>9</td>
        <td>吉林大學 </td>
        <td>96.44</td>
        <td>48.61</td>
        <td>25.74</td>
        <td>22.87</td>
        <td>47.83</td>
        <td>38.13</td>
        <td>9.70</td>
        <td>吉 </td>
        <td>1</td>
        <td>綜合</td>
    </tr>
    <tr class="a1">
        <td>10</td>
        <td>西安交大</td>
        <td>92.82</td>
        <td>47.22</td>
        <td>24.54</td>
        <td>22.68</td>
        <td>45.60</td>
        <td>35.47</td>
        <td>10.13</td>
        <td>陝</td>
        <td>1</td>
        <td>綜合</td>
    </tr>
</table>
</body>
</html>

實現效果：

代碼（結構僞類版）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>設計優雅的數據表格</title>
<style type="text/css">
h1 { font-size:16px; }
table {/*色彩恬淡的細表格是設計的主流*/
    width:100%;
    font-size:12px;
    /*這幾個聲明的好處： table-layout:fixed;能改善表格呈現性能，
       empty-cells:show;能夠隱藏不必要的干擾因素，border-collapse: collapse;能夠讓表格看起來更精緻。*/
    table-layout:fixed;
    empty-cells:show;
    border-collapse: collapse;
    margin:0 auto;
    border:1px solid #cad9ea;
    color:#666;
}
th {/*使用背景裝飾列表頭可以讓表格看起來更精緻*/
    background-image: url(images/th_bg1.gif);
    background-repeat:repeat-x;
    height:30px;
    overflow:hidden;
}
td { height:20px; }/*適當撐起單元格，讓數據看起來更輕鬆*/
td, th {/*淺色線分隔數據行和列，會讓表格看起來更清爽。不生硬*/
    border:1px solid #cad9ea;
    padding:0 1em 0;
}
tr:nth-child(even) {/*通過結構僞類選擇器爲表格內的偶數行定義背景色，以實現隔行分色的顯示效果*/
 background-color:#f5fafe;
}
</style>
</head>
<body>
<h1>設計優雅的數據表格</h1>
<table summary="設計優雅的數據表格">
    <tr>
        <th>排名</th>
        <th>校名</th>
        <th>總得分</th>
        <th>人才培養總得分</th>
        <th>研究生培養得分</th>
        <th>本科生培養得分</th>
        <th>科學研究總得分</th>
        <th>自然科學研究得分</th>
        <th>社會科學研究得分</th>
        <th>所屬省份</th>
        <th>分省排名</th>
        <th>學校類型</th>
    </tr>
    <tr>
        <td>1</td>
        <td>清華大學 </td>
        <td>296.77</td>
        <td>128.92</td>
        <td>93.83</td>
        <td>35.09</td>
        <td>167.85</td>
        <td>148.47</td>
        <td>19.38</td>
        <td width="16">京 </td>
        <td width="12">1 </td>
        <td>理工 </td>
    </tr>
    <tr>
        <td>2</td>
        <td>北京大學 </td>
        <td>222.02</td>
        <td>102.11</td>
        <td>66.08</td>
        <td>36.03</td>
        <td>119.91</td>
        <td>86.78</td>
        <td>33.13</td>
        <td>京 </td>
        <td>2 </td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>3</td>
        <td>浙江大學 </td>
        <td>205.65</td>
        <td>94.67</td>
        <td>60.32</td>
        <td>34.35</td>
        <td>110.97</td>
        <td>92.32</td>
        <td>18.66</td>
        <td>浙 </td>
        <td>1</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>4</td>
        <td>上海交大</td>
        <td>150.98</td>
        <td>67.08</td>
        <td>47.13</td>
        <td>19.95</td>
        <td>83.89</td>
        <td>77.49</td>
        <td>6.41</td>
        <td>滬 </td>
        <td>1</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>5</td>
        <td>南京大學</td>
        <td>136.49</td>
        <td>62.84</td>
        <td>40.21</td>
        <td>22.63</td>
        <td>73.65</td>
        <td>53.87</td>
        <td>19.78</td>
        <td>蘇</td>
        <td>1</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>6</td>
        <td>復旦大學 </td>
        <td>136.36</td>
        <td>63.57</td>
        <td>40.26</td>
        <td>23.31</td>
        <td>72.78</td>
        <td>51.47</td>
        <td>21.31</td>
        <td>滬</td>
        <td>2</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>7</td>
        <td>華中科大</td>
        <td>110.08</td>
        <td>54.76</td>
        <td>30.26</td>
        <td>24.50</td>
        <td>55.32</td>
        <td>47.45</td>
        <td>7.87</td>
        <td>鄂 </td>
        <td>1</td>
        <td>理工 </td>
    </tr>
    <tr>
        <td>8</td>
        <td>武漢大學 </td>
        <td>103.82</td>
        <td>50.21</td>
        <td>29.37</td>
        <td>20.84</td>
        <td>53.61</td>
        <td>36.17</td>
        <td>17.44</td>
        <td>鄂 </td>
        <td>2</td>
        <td>綜合</td>
    </tr>
    <tr>
        <td>9</td>
        <td>吉林大學 </td>
        <td>96.44</td>
        <td>48.61</td>
        <td>25.74</td>
        <td>22.87</td>
        <td>47.83</td>
        <td>38.13</td>
        <td>9.70</td>
        <td>吉 </td>
        <td>1</td>
        <td>綜合</td>
    </tr>
    <tr>
        <td>10</td>
        <td>西安交大</td>
        <td>92.82</td>
        <td>47.22</td>
        <td>24.54</td>
        <td>22.68</td>
        <td>45.60</td>
        <td>35.47</td>
        <td>10.13</td>
        <td>陝</td>
        <td>1</td>
        <td>綜合</td>
    </tr>
</table>
</body>
</html>

實現效果：

實戰體驗二：CSS大戰保齡球

CSS3定義了12種結構僞類選擇器，功能超過了jQuery的同類子元素選擇器。現歸爲四大類：

通用子元素過濾器：如E：nth-child(n)(順序過濾)和nth-last- child(n)(倒序過濾)。
通用子類型元素過濾器：如 E：nth-of-type(n)(順序過濾)和E：nth-last- of-type(n)(倒序過濾)。
特定位置的子元素：如以所有子元素爲參考的E：first-child 和 last-child，以子元素類型爲參考的E：first-of-type 和 last-of-type。
特定狀態的元素：如 E：root（根節點），E：only-child（獨子元素），E：only-of-type（獨子類型元素）和 E：empty （孤節點）。

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS大戰保齡球</title>
<style type="text/css">
h1 { font-size:16px; }
dl,dt,dd {/*網頁設計，應該先清除瀏覽器默認樣式，這個習慣有時很重要*/
    padding:0;
    margin:0;    
}
dl {/*這個聲明很重要，它能夠強迫保齡球在dl元素框內定位*/
    position:relative;
    width:778px;
    height:612px;
    background:url(images/bg3.jpg) no-repeat left top;
}
dt {/*把公共樣式統一放在前面，能夠優化代碼*/
    position:absolute;
    color:red;
    font-size:20px;
    font-weight:bold;
}
img {
    width:50px;
    position:absolute;
}

/*控制dd內的img元素，設計圖像顯示效果*/
dd:nth-of-type(1) img {/*第一行第1個保齡球*/
    left:370px;
    top:280px;
    z-index:1000;
}

dd:nth-of-type(2) img {/*第二行第1個保齡球*/
    left:330px;
    top:250px;
    width:40px;
    z-index:100;    
}
dd:nth-of-type(3) img {/*第二行第2個保齡球*/
    left:390px;
    top:250px;
    width:40px;
    z-index:100;      
}

dd:nth-of-type(4) img {/*第三行第1個保齡球*/
    left:300px;
    top:220px;
    width:30px;  
    z-index:10;        
}
dd:nth-of-type(5) img {/*第三行第2個保齡球*/
    left:350px;
    top:220px;
    width:30px;
    z-index:10;      
}
dd:nth-of-type(6) img {/*第三行第3個保齡球*/
    left:405px;
    top:220px;
    width:30px;
     z-index:10;     
}

dd:nth-of-type(7) img {/*第四行第1個保齡球*/
    left:270px;
    top:190px;
    width:20px;         
}
dd:nth-of-type(8) img {/*第四行第2個保齡球*/
    left:320px;
    top:190px;
    width:20px;   
}
dd:nth-of-type(9) img {/*第四行第3個保齡球*/
    left:370px;
    top:190px;
    width:20px;
}
dd:nth-of-type(10) img {/*第四行第4個保齡球*/
    left:420px;
    top:190px;
    width:20px;
}

/*控制dt元素，設計數字顯示效果*/
dt:nth-of-type(1){/*第一行數字1*/
    left:392px;
    top:370px;
    z-index:1001;
}

dt:nth-of-type(2){/*第二行數字2*/
    left:344px;
    top:320px;
    z-index:101;    
}
dt:nth-of-type(3){/*第二行數字3*/
    left:408px;
    top:320px;
    z-index:101;      
}

dt:nth-of-type(4){/*第三行數字4*/
    left:310px;
    top:270px;
    z-index:11;        
}
dt:nth-of-type(5){/*第三行數字5*/
    left:360px;
    top:270px;
    z-index:11;      
}
dt:nth-of-type(6){/*第三行數字6*/
    left:415px;
    top:270px;
    z-index:11;     
}
dt:nth-of-type(7){/*第四行數字7*/
    left:274px;
    top:220px;  
    z-index:1;    
}
dt:nth-of-type(8){/*第四行數字8*/
    left:324px;
    top:220px;
    z-index:1;      
}
dt:nth-of-type(9){/*第四行數字9*/
    left:374px;
    top:220px;
    z-index:1;      
}
dt:nth-of-type(10){/*第四行數字10*/
    left:420px;
    top:220px;
    z-index:1;      
}
</style>
</head>
<body>
<h1>CSS大戰保齡球</h1>
<dl>
    <dt>1</dt>
    <dd><img src="images/ball.png" /></dd>
    <dt>2</dt>
    <dd><img src="images/ball.png" /></dd>    
    <dt>3</dt>
    <dd><img src="images/ball.png" /></dd>
    <dt>4</dt>
    <dd><img src="images/ball.png" /></dd>
    <dt>5</dt>
    <dd><img src="images/ball.png" /></dd>  
    <dt>6</dt>
    <dd><img src="images/ball.png" /></dd>   
    <dt>7</dt>
    <dd><img src="images/ball.png" /></dd>   
    <dt>8</dt>
    <dd><img src="images/ball.png" /></dd> 
    <dt>9</dt>
    <dd><img src="images/ball.png" /></dd>
    <dt>10</dt>
    <dd><img src="images/ball.png" /></dd>    
</dl>    

</body>
</html>

實現效果：

實戰體驗三：讓枯燥的列表更有趣

匹配列表中不同位置的列表項，分別爲他們定義不同的背景圖標。這樣就不用再結構中添加大量無意義的標籤，讓結構變得簡潔，也便於維護和擴展。

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>讓枯燥的列表顯示得更有趣</title>
<style type="text/css">
h1 { font-size:16px; }
#menu {
    width:965px;
    height:126px;
    background:url(images/bg6.jpg) no-repeat right bottom;
}
ul, li {/*清除列表默認樣式*/
    padding:0;
    margin:0;
    list-style:none;
}
ul {/*通過外框定位列表位置和大小*/
    float:right;
    margin-right:0px;
    margin-top:55px;
    width:790px;
    font-size:12px;
}
li {/*設計列表項樣式*/
    float:left;
    width:36px;
    padding:0 0 4px 0;
    text-align:center;
    background:url(images/line1.gif)  no-repeat left center;
}

li:nth-child(3n+1) { /*匹配1,4,7,10,13......項的列表項*/
    font-weight:bold;
    background:none;/*清除加粗列表項的背景*/
}

li:nth-child(55) {font-size:11px;}/*爲特定位置列表項定義樣式*/

li:nth-child(22n+1){ margin-left:-1px;}/*微調每行第一個列表項，以便對齊*/

li:nth-child(20){ color:red;}/*爲特定位置的列表項定義樣式，突出顯示*/
</style>
</head>

<body>
<h1>讓枯燥的列表顯示得更有趣</h1>
<div id="menu">
    <ul>
        <li> 新聞</li>
        <li>軍事</li>
        <li>社會 </li>
        <li> 財經</li>
        <li>股票 </li>
        <li> 基金</li>
        <li> 科技 </li>
        <li> 手機</li>
        <li> 數碼 </li>
        <li> 體育 </li>
        <li> 中超</li>
        <li> NBA </li>
        <li> 娛樂 </li>
        <li> 明星 </li>
        <li> 音樂 </li>
        <li> 汽車 </li>
        <li> 圖庫 </li>
        <li> 車型 </li>
        <li> 博客</li>
        <li> 微博 </li>
        <li> 草根</li>
        <li> 視頻 </li>
        <li> 播客 </li>
        <li> 大片 </li>
        <li> 房產 </li>
        <li> 地產 </li>
        <li> 家居 </li>
        <li> 讀書 </li>
        <li> 教育 </li>
        <li> 健康 </li>
        <li> 女性 </li>
        <li> 星座 </li>
        <li> 育兒 </li>
        <li> 樂庫 </li>
        <li> 尚品 </li>
        <li> 寵物 </li>
        <li> 空間</li>
        <li> 郵箱 </li>
        <li> 出國</li>
        <li> 論壇</li>
        <li> SHOW </li>
        <li> UC </li>
        <li> 遊戲</li>
        <li> 玩玩</li>
        <li> 交友</li>
        <li> 城市</li>
        <li> 廣東 </li>
        <li> 上海</li>
        <li> 生活</li>
        <li> 旅遊</li>
        <li> 電商</li>
        <li> 短信 </li>
        <li> 商城</li>
        <li> 彩信</li>
        <li> 高爾夫 </li>
        <li> 下載</li>
        <li> 導航</li>
        <li> 商城 </li>
        <li> 天氣 </li>
        <li> 愛問</li>
        <li> 彩票 </li>
        <li> 公益 </li>
        <li> 世博 </li>
    </ul>
</div>
</body>
</html>

實現效果：

《CSS3實戰》筆記--選擇器（一）

屬性選擇器

結構僞類選擇器

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

java由於越界導致的報錯

慕課網實戰—《用組件方式開發 Web App全站》筆記一

《CSS3實戰》筆記--多列布局

《CSS3實戰》筆記--選擇器（三）

《CSS3實戰》筆記--漸變設計（三）

《CSS3實戰》筆記--選擇器（一）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結