HTML5气泡悬浮框(已经加上完整文件)
2016-05-04 23:00
645 查看
源文件链接：http://pan.baidu.com/s/1pKHlNSn
[b]设计气泡悬浮框[/b]
1.在网页设计中，气泡悬浮框常常用于页面中为某些对象显示提示信息，恰当地使用气泡悬浮框能够使网页布局更加完美，使网页看上去更漂亮、美观；
2.一般而言，替换文本使用alt属性来呈现，说明性文本通过title属性来实现，这两个属性是HTML默认提供的功能，在网页设计中使用它们，容易引起用户的反感；
3.在这种情况下，使用气泡悬浮框能够产生不一样的视觉体验。
下面使用气泡悬浮框来设计网页中的替代文本与说明文本。
[b]设计过程：[/b]
[b]（一）设计网页布局[/b]
使用Balsamiq Mockups工具将网页布局描绘出来，如下图所示。
[b](二)编写HTML5代码[/b]
我们将标题设置为: Fade in/out Tooltip Design, CSS3 & jQuery
但是在这里需要注意"字符实体"
如果要显示& 那么实体名称为& 实体编号&
其他字符实体见下表：
下面添加<a>并设置class 和 href.在<a>标签内插入<div>标签
添加其他的<a>标签：
[b]（三）编写CSS3样式表[/b]
[b]1.控制body样式[/b]
[b]2.设置标题字体样式[/b]
同时需要在CSS代码前加上字体应用
[b]3.控制图片样式[/b]
同时设置.gallery-nav内的li元素
下面分别为控制a.tooltip、a.tooltip.photo1(photo2 / photo3)的样式
[b]4.控制气泡悬浮框1：基本样式、位置、添加圆角与尾巴并制作Transition动画[/b]
下面给出完整代码：
完整CSS代码：
[b]设计气泡悬浮框[/b]
1.在网页设计中，气泡悬浮框常常用于页面中为某些对象显示提示信息，恰当地使用气泡悬浮框能够使网页布局更加完美，使网页看上去更漂亮、美观；
2.一般而言，替换文本使用alt属性来呈现，说明性文本通过title属性来实现，这两个属性是HTML默认提供的功能，在网页设计中使用它们，容易引起用户的反感；
3.在这种情况下，使用气泡悬浮框能够产生不一样的视觉体验。
下面使用气泡悬浮框来设计网页中的替代文本与说明文本。
[b]设计过程：[/b]
[b]（一）设计网页布局[/b]
使用Balsamiq Mockups工具将网页布局描绘出来，如下图所示。
[b](二)编写HTML5代码[/b]
我们将标题设置为: 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>
[b]（三）编写CSS3样式表[/b]
[b]1.控制body样式[/b]
body{
padding: 150px;
background: #2b2b2b url(../images/bg_tile.jpg);
}[b]2.设置标题字体样式[/b]
h1{
margin-bottom: 40px;
font-family: 'Lato',Sans-Serief;
color:#fff;
}同时需要在CSS代码前加上字体应用
@import url(http://fonts.googleapis.com/css?family=Lato:100);
[b]3.控制图片样式[/b]
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);
}[b]4.控制气泡悬浮框1：基本样式、位置、添加圆角与尾巴并制作Transition动画[/b]
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 &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;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- H5页开发规范/通用规范
- HTML5小知识
- H5的简单标签
- HTML5中Access-Control-Allow-Origin解决跨域问题
- ScrollView中嵌入ListView只显示一条的解决办法
- 谈谈HBuilder以及HTML5+
- 深入剖析HTML5 内联框架iFrame
- 老式浏览器（IE6,IE7,IE8）识别html5标签
- html5 placeholder ie 不兼容问题 解决方案
- 浏览器HTML5支持程度测试
- 跨平台的移动Web开发实战（HTML5+CSS3)
- HTML5——Range对象（2）
- HTML5——Range对象（1）
- HTML5 Canvas绘制五星红旗
- HTML5 语义元素
- HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码
- HTML5----响应式（自适应）网页设计
- html5实现 input必须为手机号且非空的验证方法
- html5引用公共头尾
- html5下让 height:100%; 起作用