小伙伴們,根據(jù)所學(xué)知識(shí),實(shí)現(xiàn)如下圖所示的簡(jiǎn)單無(wú)序列表,并為每個(gè)列表項(xiàng)添加超鏈接。每個(gè)列表項(xiàng)的寬度為50px,高度為30px,列表中的文字在水平和垂直方向上均居中顯示,超鏈接初始狀態(tài)和訪問(wèn)后的狀態(tài)均為黑色無(wú)下劃線,鼠標(biāo)經(jīng)過(guò)和點(diǎn)擊時(shí)文字均為白色,無(wú)下劃線,背景顏色為#BE3948。
效果圖:
溫馨提示:完成任務(wù)后,請(qǐng)驗(yàn)證是否與實(shí)踐描述效果一致,如一致,恭喜您,你已經(jīng)掌握此技能,否則,請(qǐng)重復(fù)學(xué)習(xí)此節(jié)內(nèi)容。
一、在右側(cè)代碼的body標(biāo)簽中添加一個(gè)無(wú)序列表。
二、為每一個(gè)列表項(xiàng)設(shè)置超鏈接,可以設(shè)置空鏈接(#)。
三、在右側(cè)代碼的</head>之前,分別定義標(biāo)簽選擇器li和a,并按照題目要求定義其CSS樣式 。
注意:
① 超鏈接四種狀態(tài)的設(shè)置順序; ② 要想讓列表在水平方向上排列,需要設(shè)置列表項(xiàng)浮動(dòng) ③ 由于a標(biāo)簽屬于內(nèi)聯(lián)元素,無(wú)高度和寬度屬性,因此控制鼠標(biāo)經(jīng)過(guò)狀態(tài)改變背景顏色時(shí),僅在有文字的地方顯示背景顏色。解決的辦法是把a(bǔ)標(biāo)簽變?yōu)閴K級(jí)元素,display:block
小伙伴們,可以在右下角的"源代碼下載"區(qū),下載參考代碼。
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)