CSS3 帮助提示框

哎呀小生 贡献于2012-01-09

作者 Windows 用户  创建于2012-01-09 14:35:00   修改者Windows 用户  修改于2012-01-09 14:49:00字数2245

文档摘要:如果你的图标或按钮上的文字已不足或根本没有,或只是需要一些额外的解释,那么你一定需要一个CSS3它提示。为什么的呢?因为,因为他们到现在事实证明,他们可以帮助你提高网站的可用性。话虽如此,在本文中,您将学习如何创建自己的工具提示CSS3:没有图像,没有JavaScript。
关键词:

CSS3 tooltips 如果你的图标或按钮上的文字已不足或根本没有,或只是需要一些额外的解释,那么你一定需要一个CSS3它提示。为什么的呢?因为,因为他们到现在事实证明,他们可以帮助你提高网站的可用性。 话虽如此,在本文中,您将学习如何创建自己的工具提示CSS3:没有图像,没有JavaScript。 “我真的需要它们?” HTML标题属性是默认的附加信息可以使用。但是,标题的默认无法样式。所以,如果你想要的东西很酷,它的风格,你可以如你所愿,然后自定义工具提示CSS3是解决方案。 如何做 这种方法可能很熟悉你,一个相对定位的元素绝对定位一个谁包装上。这篇文章我不是要推倒重来,我只是向您展示如何创建一些很酷的CSS3工具提示。 下面你可以看到正确的结构,注意两个指针(由使用:before和:after伪元素)谁重叠: “bordered”指针是如何 这里是被用来创建他们的成分:     渐变 Gradients     盒阴影 Box shadow     伪元素 Pseudo-elements HTML   your text   Your custom description 为什么一个定位? 只是为了兼容性的原因。 IE6有一个问题:hover伪类元素比锚与其他使用。 如果你想使用它们,锚是不是你的选择,那么你可以用它来触发IE6的工具提示: CSS .tooltip {   position: relative;   background: #eaeaea;   cursor: help;   display: inline-block;   text-decoration: none;   color: #222;   outline: none; } .tooltip span {   visibility: hidden;   position: absolute;   bottom: 30px;   left: 50%;   z-index: 999;   width: 230px;   margin-left: -127px;   padding: 10px;   border: 2px solid #ccc;   opacity: .9;   background-color: #ddd;   background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));   background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));   background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));   background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));   background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));   -moz-border-radius: 4px;   border-radius: 4px;   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba (255,255,255,.5) inset;   box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;   text-shadow: 0 1px 0 rgba(255,255,255,.4); } .tooltip:hover {   border: 0; /* IE6 fix */ } .tooltip:hover span {   visibility: visible; } .tooltip span:before, .tooltip span:after {   content: "";   position: absolute;   z-index: 1000;   bottom: -7px;   left: 50%;   margin-left: -8px;   border-top: 8px solid #ddd;   border-left: 8px solid transparent;   border-right: 8px solid transparent;   border-bottom: 0; } .tooltip span:before {   border-top-color: #ccc;   bottom: -8px; }

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 3 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档