【實驗題目】HTML&CSS實驗(4)
【實驗目的】學習CSS選擇器的使用方法。
----------------------個人作業，如果有后輩的作業習題一致，可以參考學習，一起交流，請勿直接copy
【調試工具】瀏覽器和編輯器。三種可選編輯方式：
(1) 本地調試：記事本
(2) 在線調試：http://172.18.187.11:8080/lab/html4/index.jsp
* 在線圖像存放地點：http://172.18.187.11:8080/lab/html4/images
【實驗要求】
除了題目中有說明，本次實驗均不使用連接符~和+，也不能自行加id和class，不能修改正文（<body>的內容），只能按題意增加或修改樣式(<style>的內容)。
不能用!important。
【實驗內容】
1、為網頁sohu.html添加樣式。首先要求對於鏈接的訪問，平時和訪問過的鏈接都沒有下划線並且顯示為黑色字，鼠標移動到鏈接上方時鏈接文字顯示下划線和藍色字，點擊(按下)鏈接時鏈接文字顯示下划線並且變為紅色字；然后，設計樣式讓每行的偶數鏈接顯示綠色字並且沒有下划線(如下圖所示)，懸浮和活動鏈接與原來一樣。
參考效果：
完成后保存網頁(sohu.html)並截屏瀏覽器(ctrl+alt+PrintScreen)：
樣式表：
可行√ 
不可行:最后一句的偽類屬性無法作用
l a無法適應於nth-child，選擇odd時全選，選擇even時不執行；
l li可使用nth-child但必須結合a的偽類選擇器使用（不結合a則無顯示，因為li沒有直接的文字內容）；
l 單純在a的標簽下修改顏色，使用偽類選擇器可執行（優先級問題，偽類選擇器優先於元素選擇器）；但是如果利用nth-child偽類選擇器選擇之后，同時使用偽類選擇器，那么偽類選擇器的內容不會被執行（前者的優先級高，會覆蓋偽類選擇器），需要重新編寫一遍偶數的偽類鏈接效果。
l 綜上考慮到這個原因，可以通過利用nth-child偽類選擇器全選，來提高其鏈接偽類語句的優先級，如下：可正常執行。
可行√
2、為網頁register.html添加樣式，使得：被聚焦的輸入域的背景變為黃色，單選或多選的選中項的文字顯示為紅色字；disabled的按鈕的字體顯示為灰色字；textarea中選中的文字顏色變為白色，背景變為藍色。
參考效果：
完成后進行保存(register.html)並截屏瀏覽器：
樣式表：
//重新閱讀了老師的表單樣例，對表單的實現有了新的理解，也發現了之前沒有找到的可以實現邊框帶文字的<legend>標簽（僅用於表單<form>）
3、(sohu1.html)實現下圖樣式。注意：除了加指定的選擇器，不要修改任何代碼。參考效果：
完成后保存網頁(sohu1.html)並截屏瀏覽器(ctrl+alt+PrintScreen)：
樣式表：
l 第三個選擇器的even不會覆蓋第二個選擇器的3~9之間的樣式，所以第二個選擇器要加上not的內容（同樣是優先權的原因）
l 並列的內容中不可以有空格，如果“:not”之前有空格，則瀏覽器不會執行這一選擇器的內容
4、為網頁ZhuZiQing.html加上選擇器，使得:
(1) 鏈接和訪問過的鏈接顯示為藍色字體並且沒有下划線
(2) 按下鏈接顯示為棕色字體且沒有下划線
(3) 每個段落左對齊並且首行縮進兩個字
(4) 每個段落首字母為1個半字大小
(5) 每個段落第一行用斜體字
(6) 鼠標移動到段落上方時，段落文字顯示為綠色字
(7) 偶數段落顯示為粗體字
(8) 引用文獻采用上標 {vertical-align:super;font-size:10px}
參考效果：
用文件ZhuZiQing.html保存完成后的網頁並截屏瀏覽器(ctrl+alt+PrintScreen)：
樣式表：
5、為網頁(LotusPond .html)編寫樣式，使得其平時顯示如下：
當把鼠標移動到某個段落(下面為第二段)上方時，顯示如下：
用文件LotusPond .html保存完成后的網頁並截屏瀏覽器(ctrl+alt+PrintScreen)：
樣式表：
//同樣的style格式，在不同的瀏覽器下，會有不同的表現形式，比如在如上截圖的chrome中，hover的選擇器選中之后，first-letter中的內容會一起作用，顯示為藍色大1.5倍；但是在edge中，則不會同時作用，而且hover離開后，作用效果會消失，變成普通字體，如下：
6、在網頁(calendar.html)中增加選擇器（不要改動樣式的次序或增加樣式）后得到如下網頁顯示：
用文件calendar.html保存完成后的網頁並截屏瀏覽器(ctrl+alt+PrintScreen)：
樣式表：
//如果最后一條語句不加“：after”，則這條語句不會作用-----:after 選擇器在被選元素的內容后面插入內容，需要使用 content 屬性來指定要插入的內容。（也就是說，如果使用content來插入內容，就必須使用：after選擇器）
7、用網頁(chess.html)設計一個國際象棋棋盤和棋子：
（1）設計棋盤並擺設棋子(棋子圖像文件在images目錄中)，只能使用標簽h1、table、tr、td、img（已給出了它們的樣式），不能使用其他標簽，也不能使用類和id屬性：
*其中的白色棋子不顯眼
完成后截圖：
//修改了h1的font-size為4倍，table和td的屬性為-------border:solid 2px gray;
html文件的主要內容：
（2）按如下步驟和要求為棋盤加上樣式：
A、一般狀態下，每個格子(td)具有兩種背景色(background-color)之一：rgb(100,100,100), rgb(200,200,200)。
B、鼠標移動到淡色格上方時，淡色格的背景色(background-color)變為rgb(200,200,240):
C、鼠標移動到深色格上方時，深色格的背景色(background-color)變為rgb(100,100,160):
D、當鼠標移到白色棋子(img)上方時，白色棋子邊框顯示黃色虛線border:dashed 1px yellow。參見步驟B和步驟C的圖。
E、當鼠標移到黑色棋子(img)上方時，黑色棋子邊框顯示紅色虛線border:dashed 1px red。參見步驟B和步驟C的圖。
F、要求懸浮在棋子上時格子線不動。
用文件chess.html保存完成后的網頁，當鼠標移到黑色棋子和白色棋子上分別截一幅圖：
與步驟（1）相比，步驟（2）新增的樣式表：
問題：為了實現步驟E增加的樣式是什么？
tr:nth-child(-n+2) td>img:hover{
border:dashed 1px red;
}
問題：為了實現步驟F增加的樣式是什么？
tr:nth-child(n+7) td>img:hover{
border:dashed 1px yellow;
margin:auto;
}
tr:nth-child(-n+2) td>img:hover{
border:dashed 1px red;
margin:auto;
}
//同樣的，在這個例子中，使用同樣的style，在不同的瀏覽器下會有不同的結果：在edge瀏覽器中，即使不加margin：auto；使其自動適應居中，也不會有table格線偏移的問題；但是在IE瀏覽器和chrome瀏覽器中如果不加，則會出現hover移動指向后出現格線偏移的后果，添加后正常。
【完成情況】
是否完成了這些步驟？(√完成 ×未做或未完成)
1 [√ ] 2 [√] 3 [√] 4 [√] 5 [√] 6 [√ ] 7(1)[ √] 7(2) [√ ]
【實驗體會】
寫出實驗過程中遇到的問題，解決方法和自己的思考;並簡述實驗體會（如果有的話）。
在實驗中遇到的問題在此前的分小節的實驗樣例中已經提到了問題和解決方法，在這里不詳細描述，只列出總結要點：
l a無法適應於nth-child，選擇odd時全選，選擇even時不執行
l li可使用nth-child但必須結合a的偽類選擇器使用（不結合a則無顯示，因為li沒有直接的文字內容）
l 單純在a的標簽下修改顏色，使用偽類選擇器可執行（優先級問題，偽類選擇器優先於元素選擇器）；但是如果利用nth-child偽類選擇器選擇之后，同時使用偽類選擇器，那么偽類選擇器的內容不會被執行（前者的優先級高，會覆蓋偽類選擇器），需要重新編寫一遍偶數的偽類鏈接效果
l 綜上考慮到這個原因，可以通過利用nth-child偽類選擇器全選，來提高其鏈接偽類語句的優先級即可正常執行
l 重新閱讀了老師的表單樣例，對表單的實現有了新的理解，也發現了之前沒有找到的可以實現邊框帶文字的<legend>標簽（僅用於表單<form>）
l 並列的內容中不可以有空格，如果“:not”之前有空格，則瀏覽器不會執行這一選擇器的內容
l 相同優先權選擇器的even不會覆蓋第二個選擇器的3~9之間的樣式，所以第二個選擇器要加上not的內容（同樣是優先權的原因
l 同樣的style格式，在不同的瀏覽器下，會有不同的表現形式，比如在chrome中，hover的選擇器選中之后，first-letter中的內容會一起作用，顯示為藍色大1.5倍；但是在edge中，則不會同時作用，而且hover離開后，作用效果會消失，變成普通字體；在edge瀏覽器中，即使不加margin：auto；使其自動適應居中，也不會有table格線偏移的問題；但是在IE瀏覽器和chrome瀏覽器中如果不加，則會出現hover移動指向后出現格線偏移的后果，添加后正常。
l :after 選擇器在被選元素的內容后面插入內容，需要使用 content 屬性來指定要插入的內容。（也就是說，如果使用content來插入內容，就必須使用：after選擇器）
如果說之前的Web設計編程只是把內容編寫出來，應用一些css的style屬性，那么這一部分就有些設計的成分在里面了。只是簡單的style添加，就能體現出一些簡單實用看上去舒服的設計感，雖然只是按照老師所給的模板來完成，但是仍舊讓我感到新奇和激動，對今后的實驗也越來越期待了。