CSS 第一題 a標簽 操作
阿新 • • 發佈：2018-04-17
HR one 操作 第一題 oct round 技術分享 sed lin 
1.樣式 display:inline-block;可改變a標簽，合其可定義寬高
2.a:hover表示鼠標經過
3.background:url(110.png) bottom 表示：給鏈接一個圖片 並底端對齊 代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> a{ display: inline-block; width:67px; height:32px; background: url("110.png")View Code; } a:hover{ background: url(110.png) bottom; } </style> <title></title> </head> <body> <a href="#"></a> </body> </html>
4.text-align:center 水平劇中
5一行文字與父元素等高時 文字垂直居中
text-decoration:none去掉下劃線
eg:
<!DOCTYPE html> <html>View Code<head> <meta charset="utf-8"> <style type="text/css"> a{ display: inline-block; width: 120px; height: 58px; text-align: center; text-decoration: none; color: white; line-height: 50px; } a.one{ background: url(images/bg1.png); } a.two{ background: url(images/bg2.png); } a.three{ background: url(images/bg3.png); } a.four{ background: url(images/bg4.png); } a:hover{ background: url(images/bg6.png) } } </style> <title></title> </head> <body> <a href="#" class="one">五彩導行</a> <a href="#" class="two">五彩導行</a> <a href="#" class="three">五彩導行</a> <a href="#" class="four">五彩導行</a> </body> </html>
效果：
CSS 第一題 a標簽 操作