HTML5气泡悬浮框(已经加上完整文件)
源文件链接:https://pan.baidu.com/s/1M7j41_OWGpD8ddgXwbO8kg 密码:b7vr
设计气泡悬浮框
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:;
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:;
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:;
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 &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:;
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:;
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:;
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;}
HTML5气泡悬浮框(已经加上完整文件)的更多相关文章
- Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）
关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...
- 026 Android 带不同类型条目的listview(纯文本类型的条目，图片+文字类型的条目)+读取内存空间、手机进程信息+常驻悬浮框
1.目标效果 带不同类型条目的listview(纯文本类型的条目,图片+文字类型的条目)+常驻悬浮框 2.页面布局文件 (1)activity_process_manager.xml <?xml ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- Android 应用开机自启和无需权限开启悬浮框
开机自启主要自定义广播接收类,且需要在清单文件中注册,不要在代码中动态注册. <uses-permission android:name="android.permission.REC ...
- JavaScript侧边悬浮框
<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...
- js实现页面悬浮框
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...
- C# 鼠标悬停在datagridview的某单元格，显示悬浮框效果
今天在做项目时,看到一软件做的悬浮框效果不错,从网上搜罗了一些资料,未见到有十分好的解决办法,只能自已动手,利用datagridview 的ToolTipText 来达到此效果. 以下是我简单实现的代 ...
- js右侧悬浮框
示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...
随机推荐
- 【原创】Kakfa network包源代码分析
kafka.network包主要为kafka提供网络服务,通常不包含具体的逻辑,都是一些最基本的网络服务组件.其中比较重要的是Receive.Send和Handler.Receive和Send封装了底 ...
- 日志插件 log4net 的使用
文本格式说明 可以记载的日志类别包括:FATAL(致命错误).ERROR(一般错误).WARN(警告).INFO(一般信息).DEBUG(调试信息). 文本参数说明 %m(message):输出的日志 ...
- C#微信公众平台开发—access_token的获取存储与更新
一.什么是access_token? access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.正常情况下access_token有效期为7200秒,重复获取 ...
- 为IEnumerable扩展一个ForEach方法
IEnumerable没有一个ForEach方法,我们可以使用C#写一个扩展方法: Source Code: using System; using System.Collections.Generi ...
- 循序渐进开发WinForm项目（6)--开发使用混合式Winform模块
1.Winform数据访问模式定义 传统的Winform程序模块:用于传统的数据库通讯获取数据,这种方式获取数据,方便快捷,可以用于常规的业务系统的场景,用于单机版软件或者基于局域网内的业务系统软件. ...
- IOS系统概述与层次
一.概述 IOS是apple公司为其自己的移动设备(iPhone,iPod touch,iPad)而开发的操作系统,IOS许多的技术是基于苹果的Mac OSX桌面系统的,如果你开发过苹果的mac系统应 ...
- Nancy 学习-自宿主 继续跨平台
Nancy简介 Nancy是一个轻量级的独立的框架,下面是官网的一些介绍: Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台,框架的目标是保持尽可能 ...
- C程序编译过程浅析
前几天看了<程序员的自我修养——链接.装载与库>中的第二章“编译和链接”,主要根据其中的内容简单总结一下C程序编译的过程吧. 我现在一般都是用gcc,所以自然以GCC编译hellworld ...
- AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- iOS AFNetworking 打印从服务器返回的错误提示信息
每次做项目的时候都会在网络请求时候测试接口的时候会出现一些不同的错误,而控制台打印的错误提示信息都是data类型,看不出提示的错误的信息是什么.后面经过一些查阅发现其实是可以把这个转变为string的 ...