<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>sample</title>
<style type="text/css" media="screen">
body {
font-size:12px;
}
/* 链接按钮 3 */
.abtn_3 {
font-size:14px;
line-height:1em;
background:url(http://www.moonless.net/i/sample.gif) no-repeat -33px -123px;
text-decoration:none;
position:relative;
}
.abtn_3 span {
visibility:hidden;
overflow:hidden;
}
.abtn_3:hover {
text-indent:0;
}
/* 提示框 */
.hintsB {
display:none;
}
.abtn_3:hover .hintsB {
display:block;
position:absolute;
top:-1.3em;
left:20px;
width:180px;
padding:0 0 0 5px;
background:url(http://www.moonless.net/i/sample.gif) no-repeat 0 center;
color:#326324;
cursor:text;
font-weight:normal;
}
@media all and (min-width: 0px){ .abtn_3:hover .hintsB {top:auto;left:auto;} }
.abtn_3:hover .hintsB div {
line-height:18px;
padding:7px 4px 6px 6px;
border:1px solid #bed48f;
border-left:none;
background-color:#effaeb;
font-size:12px!important;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<a href="javascript:void(0);" class="abtn_3">
<span>提示</span>
<div class="hintsB">
<div>这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！</div>
</div>
</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>sample</title>
<style type="text/css" media="screen">
body {
font-size:12px;
}
/* 链接按钮 3 */
.abtn_3 {
font-size:14px;
line-height:1em;
background:url(http://www.moonless.net/i/sample.gif) no-repeat -33px -123px;
text-decoration:none;
position:relative;
}
.abtn_3 span {
visibility:hidden;
overflow:hidden;
}
.abtn_3:hover {
text-indent:0;
}
/* 提示框 */
.hintsB {
display:none;
}
.abtn_3:hover .hintsB {
display:block;
position:absolute;
top:-1.3em;
left:20px;
width:180px;
padding:0 0 0 5px;
background:url(http://www.moonless.net/i/sample.gif) no-repeat 0 center;
color:#326324;
cursor:text;
font-weight:normal;
}
@media all and (min-width: 0px){ .abtn_3:hover .hintsB {top:auto;left:auto;} }
.abtn_3:hover .hintsB div {
line-height:18px;
padding:7px 4px 6px 6px;
border:1px solid #bed48f;
border-left:none;
background-color:#effaeb;
font-size:12px!important;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<a href="javascript:void(0);" class="abtn_3">
<span>提示</span>
<div class="hintsB">
<div>这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！</div>
</div>
</a>
</body>
</html>
分享到：
发表评论
-
db2, oracle和sqlserver取前几行的语法
2010-10-18 11:58 940db2： select * from tab f ... -
项目总结（Ajax＋Struts＋Spring＋Hiberante＋SQLServer2000） 第一部分 (转载)
2008-03-29 16:49 675总算将一个项目勉强上线，也是第一次我独立完成的这么多任务，框架 ... -
实例学习Spring和Hibernate的一点点体会 (转载)
2008-03-29 17:36 785昨天用Spring写DAO,有朋友说比较Hibernate还是 ... -
jsp+xsl查询数据库
2008-04-06 19:26 1029往往JSP通常用来动态的生成HTML文件，来 ... -
hibernate3.0中文查询问题解决方法
2008-04-07 13:08 736在applicationContext.xml中加入如下代码： ... -
简单的JSTL应用（入门）
2008-04-07 19:51 1014需要的包及TLD文件: 首先需要将用到的jar包放入WEB-I ... -
EL表达式语言
2008-04-09 00:30 692引用：http://blog.163.com/s_zhchlu ... -
使用COOKIE登录验证（转载）
2008-04-21 20:11 1518附加功能：登录成功后 ... -
JavaMail
2008-04-30 13:19 649package org.hank.mail;import ... -
用"window.showModalDialog()"实现DIV模式弹出窗口 (转)
2008-05-04 09:20 17731、test.html 测试页 <html> ... -
以二进制流的方式存取图像
2008-05-07 00:03 1235imageinfo.sql CREATE TABLE ... -
java 生成图片缩略图
2008-05-08 13:26 7171方法一: import javax.imageio.Image ... -
一个不错的弹出窗口的js效果(值的收藏)
2008-06-02 19:00 1114<script type="text/jav ... -
<c:forEach>&条件标签使用
2008-06-06 09:57 7097<c:forEach>标签的使 ... -
div 缓慢下拉效果
2008-06-10 18:05 1519<!DOCTYPE html PUBLIC " ... -
弹出窗口传值
2008-06-13 09:07 909子窗口中内容： function change(obj){ ... -
Action之间传值
2008-06-13 09:13 864return new ActionForward(" ... -
数据库连接池简介
2008-06-15 14:30 741数据库连接是一种关键的有限的昂贵的资源，这一点在多用户的网页应 ... -
Spring的事务管理
2008-06-15 14:32 430Spring提供了一致的事务管理抽象。这个抽象是Sprin ... -
form产生的空行的解决
2008-06-16 16:32 680利用css属性，将form的内部上下左右的填充距离设置为0就好 ...
相关推荐
接下来，要实现“带三角的提示框”，我们需要将这个三角形与一个带有文本的矩形框结合。这通常通过将三角形元素（一个伪元素，如`:before`或`:after`）与提示框元素（可能是`div`或`span`）定位来完成。通过设置绝对...
在IT行业中，自定义的JavaScript和CSS Alert提示框是一种常见的用户交互设计，它允许开发者创造出与系统默认样式不同的警告、信息或确认对话框。本文将深入探讨如何利用这两种技术实现这样的功能。 首先，我们来看...
消息提示框的基本样式通常包括背景色、边框、内边距和文字对齐。使用CSS，我们可以定义`.alert`类作为基础样式，例如设置背景颜色为白色，边框为灰色，圆角为4px，以及合适的内边距和字体大小。 ```css .alert { ...
【CSS圆角提示框】是一种常见的前端开发技术，主要用于创建具有视觉吸引力且用户体验良好的提示信息。在本案例中，我们看到的"css圆角提示框.zip"是一个包含纯HTML和CSS代码的压缩包，用于展示如何在不同浏览器上...
使用`placeholder`属性可以在输入框内显示提示文字，而CSS3的`transition`和`opacity`属性可以使提示文字在聚焦和失去焦点时有平滑的淡入淡出效果，提高可读性和易用性。 5. **响应式设计** CSS3的媒体查询(`...
**CSS3提示框Tooltip动画详解** 在Web开发中，Tooltip是一种常见的交互元素，它用于提供额外的信息，当用户将鼠标悬停在特定元素上时显示。传统的Tooltip通常使用JavaScript实现，但随着CSS3特性的日益成熟，我们...
2. **提示框**：用于提示用户注意特定信息或操作时，增强交互性和美观性。 3. **内容区域划分**：为页面的不同部分划分边界，同时增加视觉效果。 4. **装饰元素**：为网站增添细节，提升整体设计感。 通过以上分析...
根据需求，可以调整箭头的方向（向上、向左、向右）以及提示框的背景色、文字内容等。在实际应用中，还可以结合`box-shadow`添加阴影效果，增强视觉层次感，或者通过`transition`实现动画效果，增加用户体验。 总结...
在这个名为"纯css3 animation动画属性点击loading加载动画提示框效果代码.zip"的压缩包中，我们可以预见到一个利用CSS3的animation属性创建的交互式加载提示框的示例。 动画在现代网页设计中扮演着至关重要的角色，...
今天要给大家带来另外一款基于CSS3的文字菜单鼠标悬停气泡提示动画，它比较适合用在文字菜单上，当鼠标滑过菜单项时，你可以定义其弹出一个气泡提示框，可以是一个小图标。另外，这些气泡提示框在弹出的时候还会配合...
【jQuery CSS3提示框按钮过渡效果】是一种网页交互设计技术，它结合了JavaScript库jQuery与CSS3的强大功能，为用户提供了一种动态且吸引人的提示框按钮体验。在网页设计中，这种过渡效果能够提升用户体验，使得用户...
一个简单的提示框可能由一个包含文本的`<div>`元素组成，该元素可能有一个特定的类名，如`.bubble`。例如： ```html 这是一条提示信息 ``` 接下来，我们使用CSS来定义`.bubble`的样式。这通常包括设置位置、尺寸、...
这段CSS代码设置了提示框的定位、边框、内边距、阴影效果以及关闭按钮的样式，使其在页面中央显示并具有一定的视觉吸引力。 最后，我们需要编写JavaScript（在`scripts.js`文件中）来处理用户的点击事件和提示框的...
在这个“12种利用html5+css3打造的消息提示框效果”中，我们可以看到如何巧妙地运用这两种技术来构建多样化的通知和提示组件。 1. **HTML5**：HTML5是超文本标记语言的最新版本，它引入了许多新元素，如`<section>`...
在这个主题中，我们将探讨三种简单的CSS3方法，用于在鼠标悬停帮助图标时显示图片和文字提示框。这将有助于提升用户对网站内容的理解，增强其互动性。 首先，我们来看第一种方法：使用伪类`:hover`和`<img>`元素。`...
"纯CSS实现tips帮助提示框代码"是一个专为网页开发者设计的资源，它允许你创建交互式的提示框，无需依赖JavaScript，只用CSS就能实现。这在优化页面加载速度和降低复杂性方面具有显著优势。 首先，我们要理解CSS...
要实现一个气泡提示框，需要结合JavaScript和CSS的相关技术。本文将分别从鼠标事件处理、纯CSS三角形制作这两个关键技术点，以及相关的HTML结构来介绍如何创建一个功能完整的气泡提示框。 首先，涉及到的JavaScript...
本教程将详细介绍如何使用JavaScript创建文字提示框和图片提示框。 1. **基本的JavaScript提示框：alert()** JavaScript 提供了 `alert()` 函数，用于弹出一个带有单一按钮的警告对话框，通常用于简单的信息提示。...
密码强度指示器通常通过改变背景颜色、文字提示或者进度条等形式展示。我们可以使用CSS3的伪类和过渡效果来创建平滑的视觉变化。例如，用渐变背景和不同颜色表示不同的强度等级： ```css #password-strength { ...
在本“CSS小练习01-PS提示框”中，我们将深入探讨如何使用CSS来创建类似于Photoshop（PS）中的提示框效果。CSS，即层叠样式表，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的Web标准语言。这个...