!!!分享一个漂亮的HTML5后台管理界面模板

今天这篇文章给大家分享一个使用 HTML5 和 CSS3 技术的后台管理模板，HTML5 和 CSS3 加入了众多令人耳目一新的新特性，正引领着网页制作技术的革命。

这套后台管理界面模板使用了 HTML5 和 CSS3 技术制作，主要特性：

集成 jQuery Table Sorter 插件实现表格排序

可快速整合 Google Chart API 的图表

支持菜单收缩功能

提供了各种样式效果

跨浏览器兼容，IE7+、FF、Chrome 和 Opera

这个模板可免费下载和使用，它的代码也很简洁，对于想要学习 HTML5 网站制作的朋友来说也是一个不错的选择。

下载模板，在线演示

标签：HTML5 CSS3

补充话题说明?

#favor_form{width:200px;}

#favor_form p {color:#666;}

#favor_form form{height:60px;width:200px;}

#favor_form form ._favor_input{display:block;margin:2px 0;width:199px;}

#favor_form form ._favor_button{float:left;padding:2px 5px;}

.favor_ok {text-align:center;font-size:10.5pt;width:199px;height:60px;margin-top:10px;}

#TagsSwitcher{cursor:pointer;float:right;margin-top:10px;}

#MyTags{display:none;width:199px;}

#MyTags a.tag {float:left; background-color: #E0EAF1;border-bottom: 1px solid #3E6D8E;border-right: 1px solid #7F9FB6;color: #3E6D8E;font-size: 8pt;line-height: 16px;margin: 2px 2px 2px 0;padding: 2px 4px;text-decoration: none;white-space: nowrap;}

.osc_promotion{ position: relative; display: inline-block; padding: 10px; margin: 10px 0; border: 1px solid #ccc;}

.osc_promotion .c{ position: absolute; right: -1px; top: -1px;}

.ask_toolbar {float:right;list-style: none; font-size: 12px; color: #333; height: 28px;_padding-top: 5px; overflow: hidden;margin:20px 0 10px 0;}

.ask_toolbar div{ float: left; margin-left: 5px; background: url("/img/ask-icon.gif") no-repeat; padding: 6px 0 6px 15px; padding-left: 15px; height: 16px;}

.ask_toolbar a{ height: 16px; color: #333; text-decoration: none; display:inline-block; zoom:1; vertical-align: middle; }

.ask_share{width: 89px;vertical-align: bottom; line-height: 15px; _line-height: 14px;}

.ask_share a{background: url("/img/ask-icon.gif"); width: 16px; }

a.ask_share_sina{ background: url("/img/ask-icon.gif") 0 -40px no-repeat; margin-left: 5px; }

a.ask_share_tencent{background-position: 0 -70px; margin-left: 5px; }

.ask_toolbar em{ height: 28px; line-height:28px; width: 14px; display: inline-block; float: left; background: url("/img/ask-icon.gif") top right;}

.ask_collect a,.ask_report a, .ask_vote a, .ask_collected a{padding-left: 20px; line-height: 15px; }

.ask_collect a{ background: url("/img/ask-icon.gif") 0 -131px no-repeat; }

.ask_collected a{ background: url("/img/ask-icon.gif") 0 -100px no-repeat; }

div.ask_collect_count{ background: url("/img/ask-icon.gif") 0 -309px no-repeat; font-weight: bold; font-size: 14px; margin-left: 0; height: 16px;line-height: 16px;}

.ask_report a{ background: url("/img/ask-icon.gif") 0 -160px no-repeat;}

em.ask_collect_count_r{background-position: 59px -309px;}

.ask_vote a{background: url("/img/ask-icon.gif");}

a.ask_vote_up{background-position: 3px -190px;}

a.ask_vote_down{background-position: 0 -280px;}

a.ask_vote_uped {background-position: 3px -190px;}

a.ask_vote_downed {background-position: 0 -280px;}

.ask_vote span{ display: inline-block; margin: 0 10px; font-weight: bold; font-size: 14px; vertical-align: middle; margin-bottom: 2px; line-height: 16px;}

span.vote-down-count{margin:0 3px;}

span.vote-up-count{margin:0 3px;}

分享到

收藏

56

举报

踩0 | 顶1

按默认排序 | 显示最新评论 | 回页面顶部共有25个评论 发表评论?andreyanga 回答于 2011-12-11 09:42

举报

Very Nice!有帮助(0) | 没帮助(0) | 评论(0) | 引用此评论 天天笑笑 回答于 2011-12-11 09:46

举报

在IE8下还是悲剧有帮助(0) | 没帮助(0) | 评论(0) | 引用此评论 召哥(liuxey) 回答于 2011-12-11 09:51

举报

跨浏览器兼容，IE7+、FF、Chrome 和 Opera

有帮助(0) | 没帮助(0) | 评论(0) | 引用此评论 雷志伟 回答于 2011-12-11 14:30

举报

非常喜欢!有帮助(0) | 没帮助(0) | 评论(0) | 引用此评论 张亦俊 回答于 2011-12-11 21:31

举报

菜鸟问一句，既然是HTML5+CSS3，怎么做到

?跨浏览器兼容，IE7+、FF、Chrome 和 Opera有帮助(0) | 没帮助(0) | 评论(0) | 引用此评论 Lu.Xu 回答于 2011-12-12 09:27

举报

不错，收藏先，慢慢研究。

有帮助(0) | 没帮助(0) | 评论(0) | 引用此评论 0123milan 回答于 2011-12-12 09:34

举报

确实漂亮，收藏有帮助(0) | 没帮助(0) | 评论(0) | 引用此评论 陈俊贤 回答于 2011-12-12 11:22

举报

这个下载是推广华为网盘么，没账号很不方便

有帮助(0) | 没帮助(0) | 评论(0) | 引用此评论 一桶浆糊 回答于 2012-01-03 17:22

举报

我认为中小型系统，没必要修正CSS Hack了，直接用最新浏览器登录后台，确保一种浏览器支持HTML5就是好的，反正也没多少人有权限操作

模板非常漂亮

!!!分享一个漂亮的HTML5后台管理界面模板