Html 气球示例的CSS和标记

我如何才能创建一个“联系我们”的超链接，作为此页面右上角的超链接

---

我对气球样式特别感兴趣。

因为气球样式是静态的，所以我只需要使用

就可以了。

他们使用简单的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;
}

联系我们{
-moz边界半径：5px 5px 5px 5px；
背景：无重复滚动0 0#EBE9D9；
边框：1px实心#FFFFFF！重要；
颜色：#4C4632！重要；
显示：块；
浮动：左；
字体大小：1.3em；
字体大小：粗体；
线高：1；
保证金：0；
填充：0.4em0.7em0.6em1.2em；
文字装饰：无；
文本阴影：1px 1px 0#FFFFFF；
宽度：6em；
}
李。给我们一个span。箭头{
左边框：0无；
右边框：16px虚线透明；
边框顶部：11px实心#FFFFFF；
底部：-11px；
左：8px；
右：自动；
}
李：请与我们联系{
左边框：0无；
右边框：14px虚线透明；
边框顶部：10px实心#EBE9D9；
底部：自动；
左：1px；
顶部：-12px；
}
李：请与我们联系{
背景：无重复滚动0 0透明；
边框底宽：0；
显示：块；
身高：0；
位置：绝对位置；
宽度：0；
}

如果您在该气球中签入html和css，您将得到答案：

html:

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

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;
}

---

我已经将代码包含在LI标记中，甚至更新css的DIV中。在div中，我看不到箭头，而与LI在一起时，我认为某些样式丢失了…为了进一步参考，请查看此以获得css信息窗口气球的完整指南。