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 &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:;

    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 ...

随机推荐

mvc通过ActionFilterAttribute做登录检查
1.0 创建Attribute using System; using System.Collections.Generic; using System.Linq; using System.Web; ...
.Net(C#)最简单的邮件发送案例
一.序言刚开始接触邮件发送功能的时候,在网上找的资料都挺复杂的!对于新手入门有点难(至少对于本人来说,第一次接触的时候确实不容易).这里就写一段简单的邮箱发送代码,备忘,也给新手一个参考(相关类的字 ...
C#的变迁史 - C# 5.0 之并行编程总结篇
C# 5.0 搭载于.NET 4.5和VS2012之上. 同步操作既简单又方便,我们平时都用它.但是对于某些情况,使用同步代码会严重影响程序的可响应性,通常来说就是影响程序性能.这些情况下,我们通常是 ...
不可或缺 Windows Native (15) - C++: 命名空间
[源码下载] 不可或缺 Windows Native (15) - C++: 命名空间作者:webabcd 介绍不可或缺 Windows Native 之 C++ 命名空间示例CppNamespa ...
值栈（Structs2）
1. 关于值栈: 1). 登陆时, ${userName} 读取 userName 值, 实际上该属性并不在 request 等域对象中, 而是从值栈中获取的. 2). ValueStack: I. ...
mybatis同时启用mapperscanner和传统DAO
在通过MapperScannerConfigurer启用了mybatis的映射器之后,默认情况下,在basePackage下的所有接口类都会被无条件的自动代理,如下所示: <!--mapper ...
vim自动补全插件YouCompleteMe
前言 Valloric/YouCompleteMe可以说是vim安装最复杂的插件之一,但是一旦装好,却又是非常好用的.YouCompleteMe简称ycm 在安装折腾的过程中,我再一次的体会到,除了官 ...
使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
CSS之详解:active选择器
Active的一段话 active的英文解释为"积极的",表现在鼠标上就是点击的意思.关于active选择器最多的示例恐怕就是应用在链接上面的,然而打开链接是一个一瞬间的动作,这不 ...
【zepto学习笔记01】核心方法$()（补）
前言昨天学习了核心$(),有几个遗留问题,我们今天来看看吧 $.each 遍历数组/对象,将每条数据作为callback的上下文,并传入数据以及数据的索引进行处理,如果其中一条数据的处理结果明确返回 ...

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

HTML5气泡悬浮框(已经加上完整文件)的更多相关文章

随机推荐

热门专题