HTML5越来越流行，为了不落伍，dreamforce也推出一系列的HTML5精致简单的教程，希望能给你有所帮助..
制作之前可以看看完成后的效果DEMO： 点HERE!
准备背景图片：
上图是作为pop-up bar的背景图，可以根据个人喜好自行用Photoshop制作.
HTML部分：
[html]
<!DOCTYPE html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>
<script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.4.2.js’></script>
<script type=’text/javascript’ src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script>
</head>
<body>
<div id=popup>
<span>
<a href=#>C</a>
</span>
<p>Hello! I’m a cute little bar. This is a popup.</p>
</div>
<span>
<a href=#>C</a>
</span>
<article>
content here
</article>
</body>
[/html]
在HTML中，加入doctype标识，这是HTML5的解析标识。 Article标签是HTML5的文章正文标签，它集成了上下文自动排版的功能等，详情可以查阅HTML5API库.
javascript 部分：
[javascript]
$(document).ready(function(){
$(‘#popup’).show(“bounce”, { times:3 }, 300);
$(‘.showpop’).hide();
$(‘.hide’).click(function(){
$(‘#popup’).slideUp();
$(‘span.showpop’).fadeIn(‘slow’);
return false;
});
$(‘a.showpoplink’).click(function(){
$(‘#popup’).show(“bounce”, { times:3 }, 300);
$(‘.showpop’).hide();
return false;
});
});
[/javascript]
以上通过简单的事件脚本实现
CSS可直接下载.
属于你的HMLT5的弹出条完成了，享受吧.
主题做的不错，被主题吸引过来的。 内容太少了。。
咦，我怎么有头像？
……
真的。。。难道路人都是这个头像？？？
……..
果然。。
…..
主题很清新，大爱原创的东西，日后多交流。。
谢谢咯，你的网站也不错，我这是新站，还在不断的改进中～ 互相学习哈～
这个BAR，我觉得单调了，不过这个animation 的JS挺好的，以前没用过
Hi there I am publishing which you excellent selection of superb singers and also hear the good practical experience you lovely sounds blend with each other and once I had formed an opportunity to ever before go to The united states in addition to talk to you would be my very own one huge aspiration is usually to meet you yet again if not any I could truthfully be around a person perhaps enjoy so I could fill up my wish. I really do not understand when should you come back to European union however believe that a few and not almost thus perhaps sometimes even also although myself of course, if you actually ever manage to check out The usa, in addition to undoubtedly I would end up being pleased once we possess your own shows on the lazy ever before have noticed. If only an individual the best for the entire class each good results and also offers great activities specifically fantastic inside your operations. Again If only best wishes for any nice day.