标签：over doc tle alt 标签 html ima oct 效果
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"); } 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> <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>
效果：
标签：over doc tle alt 标签 html ima oct 效果
原文地址：https://www.cnblogs.com/SoftWareIe/p/8861803.html
