CSSはどのようにカスタムリンクのヒントを実現します
2554 ワード
CSSはどのようにカスタマイズのリンクのヒントを実現します:提案:できるだけ手書きのコード、効果的に学習の効率と深さを高めることができます.デフォルトでは、使用橄榄球的title properti,可以实现链接效果.例:Viewコード<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>アリ部族</title>
</head>
<body>
<a href="http://www.softwhy.com「title=」アリ部族」>アリ部族</a>
</body>
</html>上记标题可以实现链接效果,但没有满足实际的需求,有必要与更美的链接效果和页面组成的链接效果。科德的例子如下。View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>アリ部族</title>
<style type="text/css">
ul
{
list-style:none;
font-size:14px;
}
li
{
width:100px;
height:30px;
line-height:30px;
float:left;
text-align:center;
position:relative;
border:1px solid red;
}
span
{
display:none;
}
a:link,a:visited
{
text-decoration:none;
}
a:hover .tishi
{
display:block;
width:100px;
height:30px;
background-color:#6C9;
line-height:30px;
text-align:center;
position:absolute;
left:80px;
top:40px;
color:#FFFFFF;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#" class="mylink">DIV+CSS<span class="tishi">DIV+CSS</span></a>
</li>
<li>
<a href="#" class="mylink">jQuery<span class="tishi">jQuery</span></a>
</li>
<li>
<a href="#" class="mylink">JS<span class="tishi">JS</span></a>
</li>
<li>
<a href="#" class="mylink">HTML<span class="tishi">HTML</span></a>
</li>
<div style="clear:both"></div>
</ul>
</body>
</html>以上的コード顺序实现了我们所希望的效果。最も主要な方法はハイパーリンク擬似クラスを用いてspan要素の表示を実現することである.
原文住所は:CSSはどのようにカスタムリンクのヒントを実現します
原文住所は:CSSはどのようにカスタムリンクのヒントを実現します