HTML5气泡悬浮框(已经加上完整文件)

源文件链接：http://pan.baidu.com/s/1pKHlNSn

设计气泡悬浮框

1.在网页设计中，气泡悬浮框常常用于页面中为某些对象显示提示信息，恰当地使用气泡悬浮框能够使网页布局更加完美，使网页看上去更漂亮、美观；

2.一般而言，替换文本使用alt属性来呈现，说明性文本通过title属性来实现，这两个属性是HTML默认提供的功能，在网页设计中使用它们，容易引起用户的反感；

3.在这种情况下，使用气泡悬浮框能够产生不一样的视觉体验。

下面使用气泡悬浮框来设计网页中的替代文本与说明文本。

设计过程：

（一）设计网页布局

使用Balsamiq Mockups工具将网页布局描绘出来，如下图所示。

(二)编写HTML5代码

我们将标题设置为: Fade in/out Tooltip Design, CSS3 & jQuery

但是在这里需要注意"字符实体"

如果要显示& 那么实体名称为& 实体编号&

其他字符实体见下表：

下面添加<a>并设置class 和 href.在<a>标签内插入<div>标签

<a class="tooltip photo1" href="http://yamoo9.com/?p=699"><div class="tooltip-box"><h4 class="tooltip-title">在嘉平地区登上摆渡船</h4><p class="tooltip-desc">2011年8月20日清晨10点40分，从上风站乘地铁赶往嘉平站。事实上，这次旅行......</p></div>
</a>

添加其他的<a>标签：

<a class="tooltip photo1" href="http://yamoo9.com/?p=699"><div class="tooltip-box"><h4 class="tooltip-title">在嘉平地区登上摆渡船</h4><p class="tooltip-desc">2011年8月20日清晨10点40分，从上风站乘地铁赶往嘉平站。事实上，这次旅行......</p></div>
</a>
</li>
<li>
<a class="tooltip photo2" href="http://yamoo9.com/?p=699"><div class="tooltip-box"><h4 class="tooltip-title">Artnuvo's drawing</h4><p class="tooltip-desc">Art Student Lengue of NewYork位于纽约曼哈顿区，培养了大批世界级的艺术家。让我们一起鉴赏金惠景老师在那儿绘画的杰作!</p></div>
</a>
</li>
<li>
<a class="tooltip photo3" href="http://yamoo9.com/?p=699"><div class="tooltip-box"><h4 class="tooltip-title">Adobe Creator -ACL Yamoo</h4><p class="tooltip-desc">最近出现了一些非常引人关注的字眼，如"赠"、"分享"等。ACL Yamoo积极响应这场运动，开放了“开放知识讲座”项目，跟大家一起分享知识</p></div>
</a>

（三）编写CSS3样式表

1.控制body样式

body{padding: 150px;background: #2b2b2b url(../images/bg_tile.jpg);
}

2.设置标题字体样式

h1{margin-bottom: 40px;font-family: 'Lato',Sans-Serief;color:#fff;
}

同时需要在CSS代码前加上字体应用

@import url(http://fonts.googleapis.com/css?family=Lato:100);

3.控制图片样式

a.tooltip{position: relative;display:block;width:100px;height:100px;border:5px solid #4b4b4b;background:#fff no-repeat center;
}

同时设置.gallery-nav内的li元素

.gallery-nav li{float:left;margin-right:100px;
}

下面分别为控制a.tooltip、a.tooltip.photo1(photo2 / photo3)的样式

a.tooltip{border-radius:55px;-webkit-border-radius:55px;-khtml-border-radius:55px;-moz-border-radius:55px;}
a.tooltip.photo1{background-image: url(../images/sussjini-bbo.jpg);
}
a.tooltip.photo2{background-image: url(../images/khk-artwork.png);
}
a.tooltip.photo3{background-image: url(../images/interview-yamoo9.png);
}

4.控制气泡悬浮框1：基本样式、位置、添加圆角与尾巴并制作Transition动画

a.tooltip .tooltip-box {opacity:0;position: absolute;left:50%;bottom:100px;width:20em;margin-left:-10.4em;padding:.8em;background:#111;-webkit-border-radius:15px 0px;-khtml-border-radius:15px 0px;-o-border-radius:15px 0px;border-radius:15px 0px;-webkit-transition:all .4s ease-in .3s;-moz-transition:all .4s ease-in .3s;-o-transition:all .4s ease-in .3s;-ms-transition:all .4s ease-in .3s;transition:all .4s ease-in .3s;
}a.tooltip:hover .tooltip-box,
a.tooltip:focus .tooltip-box {opacity: 1;bottom: 90px;
}
a.tooltip .tooltip-box:before {content: '';position: absolute;bottom: -10px;left: 120px;border-top: 10px solid #111;border-left: 10px solid transparent;border-right: 10px solid transparent;
}a.tooltip .tooltip-title {color:#fff;
}
a.tooltip.tooltip-desc{margin-bottom:0;font-size:11px;text-align:justify;color:#bcbcbc;
}

下面给出完整代码：

<!DOCTYPE html>
<!--[if IE 6]><html lang="zh" class="no-js old ie6"><![endif]-->
<!--[if IE 7]><html lang="zh" class="no-js old ie7"><![endif]-->
<!--[if IE 8]><html lang="zh" class="no-js old ie8"><![endif]-->
<!--[if IE 9]><html lang="zh" class="no-js modern ie9"><![endif]-->
<!--[if !IE]><!--><html lang="zh" class="no-js modern"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>CSS3 Tooltip Design - 淡入/淡出提示工具设计</title>
<link rel="stylesheet" href="css/tooltip.css" />
<script src="js/jquery.min.js"></script>
<script src="js/tooltip.js"></script>
</head>
<body>
<h1> Fade in/out Tooltip Design, CSS3 &amp;jQuery</h1>
<ul class="gallery-nav">
<li>
<a class="tooltip photo1" href="http://yamoo9.com/?p=699"><div class="tooltip-box"><h4 class="tooltip-title">在嘉平地区登上摆渡船</h4><p class="tooltip-desc">2011年8月20日清晨10点40分，从上风站乘地铁赶往嘉平站。事实上，这次旅行......</p></div>
</a>
</li>
<li>
<a class="tooltip photo2" href="http://yamoo9.com/?p=699"><div class="tooltip-box"><h4 class="tooltip-title">Artnuvo's drawing</h4><p class="tooltip-desc">Art Student Lengue of NewYork位于纽约曼哈顿区，培养了大批世界级的艺术家。让我们一起鉴赏金惠景老师在那儿绘画的杰作!</p></div>
</a>
</li>
<li>
<a class="tooltip photo3" href="http://yamoo9.com/?p=699"><div class="tooltip-box"><h4 class="tooltip-title">Adobe Creator -ACL Yamoo</h4><p class="tooltip-desc">最近出现了一些非常引人关注的字眼，如"赠"、"分享"等。ACL Yamoo积极响应这场运动，开放了“开放知识讲座”项目，跟大家一起分享知识</p></div>
</a>
</li>
</body>
</html>

完整CSS代码：

@charset "utf-8";
@import "reset.css";
@import url(http://fonts.googleapis.com/css?family=Lato:100);
/* tooltip.css - ToolTip设计样式, 2012 © yamoo9.com
---------------------------------------------------------------- */
body{padding: 150px;background: #2b2b2b url(../images/bg_tile.jpg);
}h1{margin-bottom: 40px;font-family: 'Lato',Sans-Serief;color:#fff;
}.gallery-nav li{float:left;margin-right:100px;
}a.tooltip{position: relative;display:block;width:100px;height:100px;border:5px solid #4b4b4b;background:#fff no-repeat center;background-size:cover;border-radius:55px;-webkit-border-radius:55px;-khtml-border-radius:55px;-moz-border-radius:55px;-webkit-transition:all .4s ease-in .3s;-moz-transition:all .4s ease-in .3s;-o-transition:all .4s ease-in .3s;-ms-transition:all .4s ease-in .3s;transition:all .4s ease-in .3s;
}
a.tooltip:hover,
a.tooltip:focus{border-color:#fff;
}a.tooltip .tooltip-box {opacity:0;position: absolute;left:50%;bottom:100px;width:20em;margin-left:-10.4em;padding:.8em;background:#111;-webkit-border-radius:15px 0px;-khtml-border-radius:15px 0px;-o-border-radius:15px 0px;border-radius:15px 0px;-webkit-transition:all .4s ease-in .3s;-moz-transition:all .4s ease-in .3s;-o-transition:all .4s ease-in .3s;-ms-transition:all .4s ease-in .3s;transition:all .4s ease-in .3s;
}a.tooltip:hover .tooltip-box,
a.tooltip:focus .tooltip-box {opacity: 1;bottom: 90px;
}
a.tooltip .tooltip-box:before {content: '';position: absolute;bottom: -10px;left: 120px;border-top: 10px solid #111;border-left: 10px solid transparent;border-right: 10px solid transparent;
}a.tooltip .tooltip-title {color:#fff;
}
a.tooltip.tooltip-desc{margin-bottom:0;font-size:11px;text-align:justify;color:#bcbcbc;
}a.tooltip.photo1{background-image: url(../images/sussjini-bbo.jpg);
}
a.tooltip.photo2{background-image: url(../images/khk-artwork.png);
}
a.tooltip.photo3{background-image: url(../images/interview-yamoo9.png);
}.clearfix:after{content:"";display: block;clear:both;
}
.ie6.clearfix{height:1px;}
.ie7.clearfix{min-height:1px;}

转载于:https://www.cnblogs.com/zpfbuaa/p/5460180.html

HTML5气泡悬浮框(已经加上完整文件)相关推荐

用WindowManager实现Android悬浮框以及拖动事件
下面的App程序代码实现通过主Activity的启动按钮,启动一个Service,然后在Service中创建添加悬浮窗口:(话不多说,直接上代码) 在这里我们先看一下需要创建的类和布局和需要添加的权限 ...
php悬浮框,PopupWindow(悬浮框)的基本使用
本节引言:本节给大家带来的是最后一个用于显示信息的UI控件--PopupWindow(悬浮框),如果你想知道他长什么样子,你可以打开你手机的QQ,长按列表中的某项,这个时候后弹出一个黑色的小对话框 ...
Android UI开发第十四篇——可以移动的悬浮框
工作中遇到一些项目需要把窗体显示在最上层,像来电弹窗显示电话号码等信息或拦截短信信息显示给用户,我们想这些数据放在最上层,activity就满足不了我们的需求了,有些开发者使用了循环显示Toast的方 ...
如何使用HTML5，JavaScript和Bootstrap构建自定义文件上传器
by Prashant Yadav 通过Prashant Yadav 如何使用HTML5,JavaScript和Bootstrap构建自定义文件上传器 (How to build a custom f ...
Android 应用开机自启和无需权限开启悬浮框
开机自启主要自定义广播接收类,且需要在清单文件中注册,不要在代码中动态注册. <uses-permission android:name="android.permission.REC ...
Android自定义浮框,Android实现全局悬浮框
本文实例为大家分享了Android实现全局悬浮框的具体代码,供大家参考,具体内容如下效果图: 代码实现: Androidmanifest.xml添加弹框权限自定义悬浮窗类FloatWindow.j ...
JS实现元素拖拽，简单悬浮框实现
初学JavaScript,首次使用CSDN写博客,就当做自己的笔记本记录一下心得. 偶然了解到放大缩小拖拽这个功能,感兴趣就摸索着写了一个粗略的.实际功能还有许多问题和未优化的细节问题,仅作为学习练习 ...
ionic3 添加蒙版，弹出悬浮框
2019独角兽企业重金招聘Python工程师标准>>> 我是用ionic3做的,直接上代码,分三个文件: 1.html 1.1页面写蒙版如下 <ion-content [ngC ...
Swift——仿微信发起群聊悬浮框实现
效果声明:原作者为 TSWeChat,这里只是记录笔者移植到自己项目中使用的过程. 安装 pod添加依赖: pod 'Dollar', '9.0.0' # 操作数组的神器,比如将数组划分成若干个子集 ...
android固定悬浮框,Android实现全局悬浮框
本文实例为大家分享了Android实现全局悬浮框的具体代码,供大家参考,具体内容如下效果图: 代码实现: Androidmanifest.xml添加弹框权限自定义悬浮窗类FloatWindow.j ...

HTML5气泡悬浮框(已经加上完整文件)

HTML5气泡悬浮框(已经加上完整文件)相关推荐

最新文章

热门文章