用照片完成非常连接的个性化化下划线

日期:2020-12-11 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

假如某种你看到照片中的下划线连接请不必诧异。由于它实际上很简易,你还可以保证。
来这里看看具体实际效果 http://5key.net/demo/hyperlink-underline

最先,大家来讲说这个五颜六色的下划线是如何弄的。或许你早已猜到了,1张渐变色的情况照片。没错!便是下面这张照片。

再看看下面的css,全部连接的转变实际效果我想你应当早已搞清楚了吧。
假如并不是太清晰。先来掌握1下拖动门的定义 body {
font-size:14px;
font-family: Helvetica, sans-serif;
padding:10px;
margin:0px;
}
h1{margin:0; padding:0; font-size:16px; }
p{padding:20px 0 0 0;}
a{
*padding-bottom:1px;
text-decoration:none;
}
a:link{
color:#06F;
background: url(1.gif);
background-repeat: repeat-x;
background-position: 0 16px;
}
a:visited{
color:#06f;
background-image: url(1.gif);
background-repeat: repeat-x;
background-position: 0 16px;
}
a:hover{
color:#039;
background:url(1.gif) repeat-x 0 bottom;
}