今天通過在MDN的學(xué)習(xí)更深的認(rèn)識(shí)了背景氏豌、邊框和列表喉酌。其中有一些之前沒有遇到過的方法，今天的demo中就用了其中的background-slice泵喘。
下面貼上今天的demo
代碼如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>第三天</title><style>body{background-image:url("seabeach.jpg");background-size:100%auto;background-repeat:no-repeat;}#md{color:chartreuse;font-style:italic;font-weight:bold;font-size:50px;text-align:center;text-transform:capitalize;margin:200pxauto;}.v{font-family:書體坊米芾體;font-size:50px;text-align:center;border-radius:300px300px;width:300px;margin:50pxauto;background-color:#f66;text-align:center;border:20pxsolidblack;background-clip:padding-box;border-image-source:url("border-image.png");border-image-slice:40;border-image-repeat:round;}ul{text-align:center;margin:50pxauto;}li{display:inline;}a{text-decoration:none;font-weight:bold;opacity:0.5;font-size:2em;padding:10px;}p:hover{transform:scale(1.2,1.2);}a:link{background:deepskyblue;}a:visited{color:#ff6666;}a:hover{transform:scale(1.5,1.5);color:chartreuse;background-color:sandybrown;}a:active{color:white;}</style></head><body><pclass="v">vacation</p><pid="md">Happy summer</p><ul><li><ahref=#>第一天</a></li><li><ahref="index.html">第二天</a></li><li><ahref=#>第三天</a></li></ul></body></html>
收貨：
第一次使用opacity設(shè)置透明度泪电。
學(xué)會(huì)使用border-image-source和border-image-slice設(shè)置圖片邊框，這里要注意 background-clip的使用纪铺，這里附上該屬性區(qū)別相速。
w3school在線測(cè)試工具 v1.2?www.w3school.com.cn
今日待解決問題：
點(diǎn)擊第二天超鏈接，第三天也會(huì)變成已點(diǎn)擊狀態(tài)鲜锚。
超鏈接沒有完全居中突诬。
沒有實(shí)現(xiàn)hover后scale變化（故代碼中已刪除）。
剪貼今日的學(xué)習(xí)學(xué)習(xí)教程：
不附上網(wǎng)頁的原因時(shí)這個(gè)課程只會(huì)開到九月烹棉，到時(shí)候會(huì)無法打開鏈接攒霹。
今天就先到這里，明天再見＝础４呤！伏社！
