气球样本的CSS和标记

Question

如何创建“联系我们”超链接作为此page右上角的超链接？

我对气球风格特别感兴趣。

Answer 1

由于这是静态的，我只想使用<img>。

Answer 2

他们使用简单的html作为链接，css使用圆角和箭头。

<a href="/contact">Contact Us<span class="arrow"><span></span></span></a>

li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}

li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}

li.contactus a span span {
border-left:0 none;
border-right:14px dashed transparent;
border-top:10px solid #EBE9D9;
bottom:auto;
left:1px;
top:-12px;
}

li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}

Answer 3

如果你检查那个气球的html和css，你会得到答案：

<强> HTML：

<ul><li class="contactus"><a href="/contact">Contact Us<span class="arrow"><span></span></span></a></li></ul>

<强>的CSS：

li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}

li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}

li.contactus, #home_nav li.contactus {
float:none;
font-size:1em !important;
margin:0;
overflow:visible !important;
padding:0;
position:absolute !important;
right:20px;
top:-0.5em;
width:10em;
z-index:99999;
}

li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}