HTML.CSS學習筆記02

01-圖片size寫法

background-size: 12px ;
當給一個數值的時候，另一個設定為auto

參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size


02-圖片切換-方法1:
css:
.a123 a {
background: url("123.png");/*預設顯示圖片*/
display: block;
}

.a123 a:hover {
background: url("123.png");
}

html:
<div class="a123"><a href="#"></a></div>

這樣就可以切換囉
參考來源:https://haoyue66.blogspot.com/2014/08/css.html



03-圖片切換-方法2

感恩TINA大大告訴我，不用a 用div也可以使用 :hover
參考如上，直接把內容div刪除

css:

.a123 {
background: url("123.png")
}
.a123:hover {
background: url("123.png");
}

html:
<div class="a123"></div>

同理a:link, a:visited, a:hover, a:active都可以直接使用在div上

04-div可點擊連結事件
可點擊方式1-為a 超連記href
<a href="http://www.google.com" target="_blank" title="google"></a>

方式2-onclick事件
<div class="main-1" onclick="location.href='index.html';">

方式3-js寫入
我還不會QQ 等會了補充過來