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

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

其他新增選擇器

實戰體驗一：設計層序化的數據表格

當數據需要結構化顯示時，設計師可以考慮選用table（一級），thead(二級)，tbody(二級)，tfoot(二級)，tr（三級），th（四級），td(四級)等表格元素來以結構化的方式組織數據。但是，如果希望數據表格也能夠呈現出層次結構關係，則就應該藉助CSS來模擬這種結構。

CSS設計思路：

適當完善數據表格的結構，使其更利於樹形結構的設計。藉助否定僞類選擇器和結構僞類選擇器，配合CSS背景圖像技術設計樹形結構標誌；藉助僞類選擇器設計鼠標經過時的動態背景效果；利用CSS邊框和背景色設計標題行的立體顯示效果。

<!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">
body {
    font-family:"宋體" arial, helvetica, sans-serif;
}
table {
    border-collapse: collapse; /*細線表格必須聲明的屬性*/
    font-size: 75%;
    line-height: 1.1;
}
tr:hover, td.start:hover, td.end:hover { /*鼠標經過的動態背景色效果*/
    background: #FF9;
}
th, td {
    padding: .3em .5em;
    cursor:pointer; /*手指鼠標樣式*/
}
th {
    font-weight: normal; /*清除加粗顯示*/
    text-align: left;
    padding-left: 15px;
}
/這裏可以寫爲dt：only-of-type 使用結果僞類選擇器選擇合併單元格所在的行，以背景方式在行前定義指示圖標/
.arrow {
    background:#eee url(images/arrow.gif) no-repeat 12px 50%;
    padding-left: 28px;
    font-weight:bold;
    color:#444;
}
thead th {
    background: #c6ceda;
    border-color: #fff #fff #888 #fff;
    border-style: solid;
    border-width: 1px 1px 2px 1px;
    padding-left: .5em;
}
/*這裏可以寫爲tbody th:not(.end) 使用否定僞類選擇器選擇主題區域中的非最後一個th元素，以背景方式在行前定義結構路徑線*/
tbody th.start {
    background: url(images/dots.gif) 15px 56% no-repeat;
    padding-left: 26px;
}
/*使用僞類選擇器選擇主題區域中的最後一個th元素，以背景方式在行前定義結構封閉路徑線*/
tbody th.end {
    background: url(images/dots2.gif) 15px 56% no-repeat;
    padding-left: 26px;
}
</style>
</head>
<body>
<h1>設計層序化的數據表格</h1>
<table summary="數據表格信息">
    <thead>
        <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>
    </thead>
    <tbody>
        <tr>
            <td class="arrow" colspan="12">一類</td>
        </tr>
        <tr>
            <th class="start">1</th>
            <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>京 </td>
            <td>1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <th class="end">2</th>
            <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 class="arrow" colspan="12">二類</td>
        </tr>
        <tr>
            <th class="start">3</th>
            <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>
            <th class="start">4</th>
            <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>
            <th class="start">5</th>
            <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>
            <th class="start">6</th>
            <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>
            <th class="start">7</th>
            <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>
            <th class="start">8</th>
            <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>
            <th class="start">9</th>
            <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>
            <th class="end">10</th>
            <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>
    </tbody>
</table>
</body>
</html>

實戰體驗2：改善頁內導航的視覺體驗

通過錨點超鏈接，用戶能夠在網頁內部自有跳轉，以實現頁內導航和定位。對於目錄結構形式的包含長篇內容的網頁來說，設計頁內導航是非常重要的。但是，有時候也遇到這樣的難題，當用戶在頁面頂部單擊頁內導航鏈接時，卻不知道要定位到那個標題和欄目下，當多個定位項都顯示在同一個頁面中時，更讓人尷尬。

CSS設計思路：

通過E：target選擇器，爲頁內不同的標題或者欄目定義高亮顯示的樣式，這樣當用戶定位到該標題時，會自動高亮顯示，以方便用戶瀏覽。

提示：

當單擊“聯繫人、短信和應用程序備份”錨點鏈接時，瀏覽器會把頁面定位到該欄目中，並高亮顯示標題，同時恢復前次操作的標題顏色；

<!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">
/*清除頁邊距和列表的默認樣式，隱藏主標題*/
body {
    padding:0;
    margin:0 auto;
}
h1 { display:none; }
ul, li {
    padding:0;
    margin:0;
    list-style-type:none;
}
/*定義導航樣式*/
ul {  /*定製導航目錄外框樣式*/
    background:url(images/web_bg_1.jpg) no-repeat center;
    width:1259px;
    height:601px;
    /*這個聲明很重要：把導航目錄框定義爲包含塊，以方便內部列表項精確定位*/
    position:relative;
}
ul a { /*導航目錄的超鏈接樣式*/
    text-decoration:none;
    color:#000;
    font-weight:bold;
    font-family:"黑體";
    font-size:20px;
}
/*設置導航目錄選項的絕對定位，以便精確控制*/
ul li { position:absolute; }
/*用結構僞類選擇器匹配每個目錄項，並精確定位他們的顯示位置*/
li:nth-of-type(1) {
 left:280px;
 top:200px;
}
li:nth-of-type(2) {
 left:670px;
 top:200px;
}
li:nth-of-type(3) {
 left:280px;
 top:300px;
}
li:nth-of-type(4) {
 left:670px;
 top:300px;
}
li:nth-of-type(5) {
 left:280px;
 top:400px;
}
li:nth-of-type(6) {
left:670px;
top:400px;
}
li:nth-of-type(7) {
left:280px;
top:500px;
}
div {  /*將各欄目快的外包裝定製爲包含塊，以便精確定位各個欄目*/
    width:1259px;
    position:relative;
    text-align:center; /*與下一個樣式中的margin：auto;配合使用，以實現欄目的居中顯示*/
    padding-left:117px; /*以內補白方式微調標題的顯示位置*/
}
/*通用樣式彙總，優化CSS代碼，減少編碼的工作量*/
div h2 {
    position:absolute;
    width:919px;
    margin:auto;
    text-align:left;
    padding:70px 0 0 100px;
    color:#000;
    font-weight:bold;
    font-family:"黑體";
    font-size:20px;
}
/*下面的各個樣式分別使用結構僞類選擇器來匹配每個欄目，並精確定位他們的顯示位置*/
h2:nth-of-type(1) {
background:url(images/web_bg_2.jpg) no-repeat center;
height:391px;
top:-50px;
}
h2:nth-of-type(2) {
background:url(images/web_bg_3.jpg) no-repeat center;
height:390px;
top:341px;
}
h2:nth-of-type(3) {
background:url(images/web_bg_4.jpg) no-repeat center;
height:393px;
top:731px;
}
h2:nth-of-type(4) {
background:url(images/web_bg_5.jpg) no-repeat center;
height:392px;
top:1124px;
}
h2:nth-of-type(5) {
background:url(images/web_bg_6.jpg) no-repeat center;
height:392px;
top:1516px;
}
h2:nth-of-type(6) {
background:url(images/web_bg_7.jpg) no-repeat center;
height:390px;
top:1908px;
}
h2:nth-of-type(7) {
background:url(images/web_bg_8.jpg) no-repeat center;
height:432px;
top:2298px;
}
h2:target { color:red; }
</style>
</head>
<body>
<h1>改善頁內導航的視覺體驗</h1>
<ul>
    <li><a href="#h1">應用程序安裝</a></li>
    <li><a href="#h2">音樂下載與管理</a></li>
    <li><a href="#h3">手機視頻下載和轉碼</a></li>
    <li><a href="#h4">聯繫人、短信和應用程序備份</a></li>
    <li><a href="#h5">在電腦上收發短信</a></li>
    <li><a href="#h6">聯繫人管理和導入導出</a></li>
    <li><a href="#h7">手機屏幕截圖</a></li>
</ul>
<div>
    <h2 id="h1">應用程序安裝</h2>
    <h2 id="h2">音樂下載與管理</h2>
    <h2 id="h3">手機視頻下載和轉碼</h2>
    <h2 id="h4">聯繫人、短信和應用程序備份</h2>
    <h2 id="h5">在電腦上收發短信</h2>
    <h2 id="h6">聯繫人管理和導入導出</h2>
    <h2 id="h7">手機屏幕截圖</h2>
</div>
</body>
</html>

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

其他新增選擇器

實戰體驗一：設計層序化的數據表格

實戰體驗2：改善頁內導航的視覺體驗

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

一文搞懂 Spring 循環依賴

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

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

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

慕課網實戰—《用組件方式開發 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以太網驅動總結