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>效果：
CSS 第一题 a标签 操作
原文地址：https://www.cnblogs.com/SoftWareIe/p/8861803.html