- 浏览: 1111073 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
效果图:
注意以下要点:
1、提示框的箭头效果,且箭头随位置变动。
2、提示框的关闭按钮,且提示框内容高度随意。
3、阴影效果
测试网址:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow
代码:
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2387980
-
注意以下要点:
1、提示框的箭头效果,且箭头随位置变动。
2、提示框的关闭按钮,且提示框内容高度随意。
3、阴影效果
测试网址:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow
代码:
<!DOCTYPE HTML> <HTML> <HEAD> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ function showTip(flag){ var tip = $("div.tool-tip-content-wrapper, div.tool-tip-info-border"); if(flag) tip.show(); else tip.hide(); } $("span.tool-tip-info").on("click",function(){ showTip(true); }); $("div.tip-content-btn").on("click",function(){ showTip(false); }); }); </script> <style> .tool-tip-info-border{ display:none; } .tool-tip-info-border-b{ border-top-color: #fff; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-style: dashed dashed solid; border-width: 8px; position: absolute; top: -12px; left: -2px; z-index:2000; height: 0; width: 0; } .tool-tip-info-border-a{ border-top-color: #aaa; border-left-color: transparent; border-right-color: transparent; border-bottom-color:transparent; border-style: dashed dashed solid; border-width: 8px; position: absolute; top: -11px; left: -2px; z-index:2000; height: 0; width: 0; } .tool-tip-content { background: #fff; border: 1px solid #ccc; border-color: rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2); box-shadow: 0 2px 10px rgba(0,0,0,.2); outline: none; overflow: hidden; position: absolute; left: 0px; bottom: 7px; -webkit-animation: gb__a .2s; animation: gb__a .2s; -webkit-border-radius: 2px; border-radius: 2px; -webkit-user-select: text; width:360px; height:auto; padding:15px; font: 13px 'Lato',sans-serif; color:rgb(51,51,51); box-sizing: border-box; } .tool-tip-info{ position:relative; display:inline-block; width:13px; height:13px; text-align:center; line-height:13px; border: 1px solid #407bae; border-radius:10px; color:#407bae; font: 12px 'Lato',sans-serif; cursor:pointer; } .tip-content-btn{ position:absolute; top:2px; right:2px; width:13px; height:13px; cursor:pointer; } .tip-content-btn:before{ position:absolute; top:1px; left:3px; width:1px; height:15px; background-color:#888; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); content:""; } .tip-content-btn:hover:before{ background-color:#333; } .tip-content-btn:after{ position:absolute; top:1px; left:3px; width:1px; height:15px; background-color:#888; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); content:""; } .tip-content-btn:hover:after{ background-color:#333; } .tool-tip-content-wrapper{ position:relative !important; height:0px; display:none; z-index:1000; } </style> </HEAD> <BODY> <p>Paragraph A</p> <p>Paragraph B</p> <p>Paragraph C</p> <p>Paragraph D</p> <p>Paragraph E</p> <p>Paragraph F</p> <p>Paragraph G</p> <div class="tool-tip-content-wrapper"> <div class="tool-tip-content"> <div class="tip-content-msg"> Providing your last name adds another layer of security and keeps your World Of Tester profile protected. </div> <div class="tip-content-btn"></div> </div> </div> <div> Last Name: <span class="tool-tip-info"> <span>i</span> <div class="tool-tip-info-border"> <div class="tool-tip-info-border-a"></div> <div class="tool-tip-info-border-b"></div> </div> </span> </div> <hr/> <!--======== TEST CODE ONLY :::::::: Test Begin =========== --> <p>Paragraph A</p> <p>Paragraph B</p> <p>Paragraph C</p> <p>Paragraph D</p> <p>Paragraph E</p> <p>Paragraph F</p> <p>Paragraph G</p> <div class="tool-tip-content-wrapper"> <div class="tool-tip-content"> <div class="tip-content-msg"> Providing your last name adds another layer of security and keeps your World Of Tester profile protected. Providing your last name adds another layer of security and keeps your World Of Tester profile protected. Providing your last name adds another layer of security and keeps your World Of Tester profile protected. Providing your last name adds another layer of security and keeps your World Of Tester profile protected. </div> <div class="tip-content-btn"></div> </div> </div> <div> Longer - Last Name: <span class="tool-tip-info"> <span>i</span> <div class="tool-tip-info-border"> <div class="tool-tip-info-border-a"></div> <div class="tool-tip-info-border-b"></div> </div> </span> </div> <!--======== TEST CODE ONLY :::::::: Test End =========== --> <BODY> </HTML>
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2387980
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 398flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 755效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 438css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8282Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1466效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2406在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1317HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1243Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2186CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 554@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 653Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 927A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 680导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1094效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2912效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16767- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 998在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2219原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4561效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3729如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
对于“chrome/FF/IE7”兼容性,这意味着这个CSS提示框的解决方案应该能在主流浏览器,包括Chrome、Firefox以及较旧版本的Internet Explorer(如IE7)中正常工作。这可能需要利用到一些浏览器特有前缀,如`-webkit-`...
本篇文章将详细探讨如何利用`CSS`的`border`属性来实现一个Bubble提示框,特别是通过创建两个三角形来形成箭头。 首先,理解`CSS`中的`border`属性至关重要。`border`属性允许我们定义元素的边框,包括边框宽度、...
在网页设计中,CSS3(层叠样式表第三版)为开发者提供了更多强大的功能和丰富的样式,其中之一就是创建各种类型的提示框。弹出提示框在网页交互中扮演着重要角色,用于显示信息、警告、确认或者错误消息。本文将深入...
firefox下没有问题,IE下显示不正常,CSS厉害的可以修改一下。
至于文件名"poppingwin",可能是这个自定义Alert提示框的示例文件或组件名,它可能包含了实现弹出窗口效果的JavaScript和CSS代码。在实际开发中,这样的组件通常会被封装成一个模块或者库,以便在多个项目中复用。 ...
总结来说,利用JavaScript和CSS实现仿QQ空间信息提示框,需要掌握基本的DOM操作、CSS样式设计以及JavaScript事件处理和动画效果。这是一个很好的实践项目,可以帮助开发者提升前端技能,并理解如何在实际项目中创建...
要实现一个气泡提示框,需要结合JavaScript和CSS的相关技术。本文将分别从鼠标事件处理、纯CSS三角形制作这两个关键技术点,以及相关的HTML结构来介绍如何创建一个功能完整的气泡提示框。 首先,涉及到的JavaScript...
JavaScript可以通过修改元素的CSS属性来实现这些效果,例如,使用`setTimeout`或`setInterval`进行定时操作,或者监听`mouseover`和`mouseout`事件来控制提示框的显示和隐藏。 总的来说,CSS圆角提示框的实现涉及到...
标题中的“CSS JS图片漂浮提示框效果”指的是在网页设计中使用CSS(层叠样式表)和JavaScript技术实现的一种交互式用户体验。这种效果通常会在用户鼠标悬停在图片上时,显示一个漂浮的提示框,提供额外的信息或者与...
在这个“css实现Bubble提示框效果”的示例中,我们将探讨如何使用CSS来创建具有不同特性的提示框。 首先,我们需要创建HTML结构来表示提示框。一个简单的提示框可能由一个包含文本的`<div>`元素组成,该元素可能有...
本主题将深入探讨如何使用CSS创建不同类型的提示框,并结合JavaScript进行动态控制。我们将讨论以下几个方面: 1. **基本CSS样式**: 消息提示框的基本样式通常包括背景色、边框、内边距和文字对齐。使用CSS,我们...
"纯CSS实现tips帮助提示框代码"是一个专为网页开发者设计的资源,它允许你创建交互式的提示框,无需依赖JavaScript,只用CSS就能实现。这在优化页面加载速度和降低复杂性方面具有显著优势。 首先,我们要理解CSS...
这里,我们利用了CSS3的相邻兄弟选择器(`+`)使得当鼠标悬停在按钮上时,与其相邻的提示框元素会显示出来,并通过`transition`属性实现平滑过渡。同时,我们可以通过调整`z-index`确保提示框始终位于其他元素之上。...
在本项目中,“HTML5+CSS3实现内置功能按钮提示框带有关闭小图标”是利用这两种技术创建的一个交互式的弹出提示框组件。这个组件不仅具有基本的提示信息功能,还具备了关闭按钮和可自定义的内置功能按钮,如“确定”...
在这个名为“css3神奇tooltips提示框动画”的项目中,开发者利用CSS3的特性,创造了一系列引人注目的提示框动画效果。 首先,我们来探讨CSS3的Transitions(过渡)特性。Transitions允许我们在改变一个CSS属性时,...
"CSS实现的登录框"这个主题涉及到使用层叠样式表(Cascading Style Sheets, 简称CSS)来创建一个具有视觉吸引力和实用性的登录界面。下面我们将深入探讨如何利用CSS来设计登录框,以及在这个过程中可能涉及的相关...
在这个“html5 css3人物头像提示框动画显示特效”中,我们将探讨如何利用这两种技术来实现一个有趣且吸引人的用户体验。 首先,HTML5(HyperText Markup Language第五版)引入了许多新元素,旨在使网页结构更加语义...
本教程将探讨如何利用JavaScript(简称JS)和CSS来实现一个点击后弹出的提示框,这样的功能广泛适用于各种网页应用,包括PHP驱动的网站。 首先,我们需要创建HTML结构。`弹出提示框.html`文件将包含以下基本元素: ...
在本主题中,“css3提示框制作热点地图气泡提示框动画特效”涉及的是利用CSS3来创建交互式的地图应用,特别是那些突出显示特定区域(热点)并以动态气泡提示框展示信息的特性。下面我们将详细探讨这一知识点。 首先...
在"CSS3提示框Tooltip动画.zip"文件中,可能包含了一系列实现此类效果的示例代码和资源。 首先,让我们深入了解一下CSS3在创建提示框动画中的作用。CSS3引入了许多新的选择器、布局模型和动画功能,这使得开发者...