博主内推:阿里菜鸟网络春招 【部门直推】【海量实习岗位&正式岗位】
源文件链接: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: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;}