HUI 通过 .hui-header 样式完成头部布局：
<header class="hui-header">
<div id="hui-back"></div>
<h1>这里是标题</h1>
<div id="hui-header-menu"></div>
</header>
效果图
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI </title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
<div id="hui-back"></div>
<h1>HUI </h1>
<div id="hui-header-menu"></div>
</header>
<div class="hui-wrap">
<div class="hui-center-title" style="margin-top:15px;"><h1>演示样例</h1></div>
<div style="padding:28px; text-align:center;" class="hui-text">
点击右上角的菜单按钮来体验效果吧！
</div>
</div>
<script type="text/javascript" src="../js/hui.js"></script>
<script type="text/javascript">
var meuns = ['我的订单', '我的消息', '我的收藏', '退出登录'];
var cancel = '关闭菜单';
hui('#hui-header-menu').click(function(){
hui.actionSheet(meuns, cancel, function(e){
console.log(e.index);
hui.toast(e.innerHTML);
});
});
</script>
</body>
</html>