代码拉取完成，页面将自动刷新
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.min.css" />
<!--[if lt IE 9]>
<link href="static/h-ui/css/H-ui.ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<style type="text/css">
.ui-sortable .panel-header{ cursor:move}
</style>
<title>Hi，H-ui v3.1</title>
<meta name="keywords" content="关键词,5个左右,单个8汉字以内">
<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">
</head>
<body ontouchstart>
<div class="sideBox">
<ul class="nav navbar-nav pt-20">
<li><a href="about.html">登录/注册</a></li>
<li><a href="jiansuo.html">技术检索</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私保护</a></li>
<li><a href="#">免责声明</a></li>
<li><a href="#">支付方式</a></li>
</ul>
</div>
<div class="containBox">
<div class="containBox-bg"></div>
<header class="navbar-wrapper">
<div class="navbar navbar-black navbar-fixed-top">
<div class="container cl">
<a class="logo navbar-logo hidden-xs" href="/aboutHui.shtml">H-ui前端框架</a>
<a class="logo navbar-logo-m visible-xs" href="/aboutHui.shtml">H-ui</a>
<span class="logo navbar-slogan hidden-xs">简单 · 免费 · 适合中国网站</span>
<a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs JS-nav-toggle" href="javascript:;"></a>
<nav class="nav navbar-nav nav-collapse" role="navigation" id="Hui-navbar">
<ul class="cl">
<li class="current">
<a href="http://www.h-ui.net/" target="_blank">首页</a>
</li>
<li>
<a href="http://www.h-ui.net/Hui-overview.shtml" target="_blank">核心</a>
</li>
<li>
<a href="http://www.h-ui.net/lib/jQuery.cookie.js.shtml" target="_blank">脚本</a>
</li>
<li class="dropDown dropDown_hover">
<a href="javascript:;" class="dropDown_A">工具 <i class="Hui-iconfont"></i></a>
<ul class="dropDown-menu menu radius box-shadow">
<li>
<a href="http://www.h-ui.net/bug.shtml" target="_blank">Bug兼容性汇总</a>
</li>
<li>
<a href="http://www.h-ui.net/websafecolors.shtml" target="_blank">web安全色</a>
</li>
<li>
<a href="http://www.h-ui.net/Hui-3.7-Hui-iconfont.shtml" target="_blank">Hui-iconfont</a>
</li>
<li>
<a href="javascript:;">web工具箱<i class="arrow Hui-iconfont"></i></a>
<ul class="menu">
<li>
<a href="http://www.h-ui.net/tools/jsformat.shtml" target="_blank">JS/HTML格式化工具</a>
<li>
<a href="http://www.h-ui.net/tools/HTMLtoJS.shtml" target="_blank">HTML/JS转换工具</a>
<li>
<a href="http://www.h-ui.net/tools/cssformat.shtml" target="_blank">CSS代码格式化工具</a>
<li>
<a href="http://www.h-ui.net/tools/daxiaoxie.shtml" target="_blank">字母大小写转换工具</a>
<li>
<a href="http://www.h-ui.net/tools/fantizhuanhuan.shtml" target="_blank">繁体字、火星文转换</a>
<li>
<a href="javascript:;">三级菜单<i class="arrow Hui-iconfont"></i></a>
<ul class="menu">
<li>
<a href="javascript:;">四级菜单</a>
</li>
<li>
<a href="javascript:;">四级菜单</a>
</li>
<li>
<a href="javascript:;">四级菜单</a>
</li>
</ul>
</li>
<li>
<a href="#">三级导航</a>
</li>
</ul>
</li>
<li>
<a href="#">二级导航</a>
</li>
<li class="disabled">
<a href="javascript:;">二级菜单</a>
</li>
</ul>
</li>
<li>
<a href="http://h-ui.net/aboutHui.shtml" target="_blank">联系我们</a>
</li>
</ul>
</nav>
<nav class="navbar-userbar hidden-xs"></nav>
</div>
</div>
</header>
<div class="wap-container">
<div id="slider-3">
<div class="slider">
<div class="bd">
<ul>
<li>
<a href="http://www.h-ui.net/" target="_blank"><img src="temp/banner1.jpg" ></a>
</li>
<li>
<a href="http://www.h-ui.net/zhaoshang.shtml" target="_blank"><img src="temp/banner2.jpg" ></a>
</li>
<li>
<a href="http://h-ui.net/H-ui.admin.shtml" target="_blank"><img src="temp/banner3.jpg" ></a>
</li>
</ul>
</div>
<ol class="hd cl dots">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</div>
<nav class="breadcrumb">
<div class="container">
<i class="Hui-iconfont"></i>
<a href="/" class="c-primary">首页</a>
<span class="c-gray en">></span>
<a href="#">组件</a>
<span class="c-gray en">></span>
<span class="c-gray">当前页面</span>
</div>
</nav>
<div class="container ui-sortable">
<h1>Hi,H-ui!</h1>
<p>开始前端之旅！</p>
<div class="panel panel-default">
<div class="panel-header">表单</div>
<div class="panel-body">
<form action="" method="post" class="form form-horizontal responsive" id="demoform">
<div class="row cl">
<label class="form-label col-xs-3">邮箱：</label>
<div class="formControls col-xs-8">
<input type="text" class="input-text" placeholder="@" name="email" id="email" autocomplete="off">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">用户名：</label>
<div class="formControls col-xs-8">
<input type="text" class="input-text" placeholder="4~16个字符，字母/中文/数字/下划线" name="username" id="username">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">手机：</label>
<div class="formControls col-xs-8">
<input type="text" class="input-text" autocomplete="off" placeholder="手机" name="telephone" id="telephone">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">密码：</label>
<div class="formControls col-xs-8">
<input type="password" class="input-text" autocomplete="off" placeholder="密码" name="password" id="password">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">密码验证：</label>
<div class="formControls col-xs-8">
<input type="password" class="input-text" autocomplete="off" placeholder="密码" name="password2" id="password2">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">单选框：</label>
<div class="formControls skin-minimal col-xs-5">
<div class="radio-box">
<input type="radio" id="sex-1" name="sex">
<label for="sex-1">男</label>
</div>
<div class="radio-box">
<input type="radio" id="sex-2" name="sex">
<label for="sex-2">女</label>
</div>
<div class="radio-box">
<input type="radio" id="sex-3" name="sex">
<label for="sex-3">保密</label>
</div>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">出生日期：</label>
<div class="formControls col-xs-8">
<input type="text" class="input-text datetimepicker-input" value="" autocomplete="off" id="datetimepicker" name="datetimepicker">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">爱好：</label>
<div class="formControls skin-minimal col-xs-5">
<div class="check-box">
<input type="checkbox" id="checkbox-5" name="checkbox2">
<label for="checkbox-5">上网</label>
</div>
<div class="check-box">
<input type="checkbox" id="checkbox-6" name="checkbox2">
<label for="checkbox-6">摄影</label>
</div>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">数量：</label>
<div class="formControls skin-minimal col-xs-5">
<div id="spinner-demo"></div>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">附件：</label>
<div class="formControls col-xs-8">
<span class="btn-upload form-group">
<input class="input-text upload-url" type="text" name="uploadfile-2" id="uploadfile-2" readonly style="width:200px">
<a href="javascript:void();" class="btn btn-primary upload-btn"><i class="Hui-iconfont"></i> 浏览文件</a>
<input type="file" multiple name="file-2" class="input-file">
</span>
</div>
</div>
<div class="row clearfix">
<label class="form-label col-xs-3">所在城市：</label>
<div class="formControls col-xs-8">
<div class="row clearfix" style="margin-top:0">
<div class="col-xs-6">
<span class="select-box">
<select class="select" size="1" name="city">
<option value="" selected>选择省份</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</span>
</div>
<div class="col-xs-6">
<span class="select-box">
<select class="select" size="1" name="city">
<option value="" selected>选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</span>
</div>
</div>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">网址：</label>
<div class="formControls col-xs-8">
<input type="text" class="input-text" placeholder="http://" name="website" id="website">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3">备注：</label>
<div class="formControls col-xs-8">
<textarea cols="" rows="" class="textarea" name="beizhu" id="beizhu" placeholder="说点什么...最少输入10个字符"></textarea>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-xs-offset-3">
<input class="btn btn-primary" type="submit" value=" 提交 ">
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">按钮</div>
<div class="panel-body">
<table class="table table-border table-bordered table-striped table-responsive mt-20 radius">
<thead>
<tr>
<th class="col1">button</th>
<th class="col2">input</th>
<th class="col3">a</th>
<th class="col4">disabled状态</th>
<th class="col5">空心</th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="btn btn-default radius" type="button">默认</button></td>
<td><input class="btn btn-default radius" type="button" value="默认"></td>
<td><a href="#" class="btn btn-default radius">默认</a></td>
<td><input class="btn btn-default radius disabled" type="button" value="不可点击"></td>
<td></td>
</tr>
<tr>
<td><button class="btn btn-primary radius" type="button">主要</button></td>
<td><input class="btn btn-primary radius" type="button" value="主要"></td>
<td><a href="#" class="btn btn-primary radius">主要</a></td>
<td><input class="btn btn-primary radius disabled" type="button" value="不可点击"></td>
<td><input class="btn btn-primary-outline radius" type="button" value="主要"></td>
</tr>
<tr>
<td><button class="btn btn-secondary radius" type="button">次要</button></td>
<td><input class="btn btn-secondary radius" type="button" value="次要"></td>
<td><a href="#" class="btn btn-secondary radius">次要</a></td>
<td><input class="btn btn-secondary radius disabled" type="button" value="不可点击"></td>
<td><input class="btn radius btn-secondary-outline radius" type="button" value="次要"></td>
</tr>
<tr>
<td><button class="btn btn-success radius" type="button">成功</button></td>
<td><input class="btn btn-success radius" type="button" value="成功"></td>
<td><a href="#" class="btn btn-success radius">成功</a></td>
<td><input class="btn btn-success radius disabled" type="button" value="不可点击"></td>
<td><input class="btn btn-success-outline radius" type="button" value="成功"></td>
</tr>
<tr>
<td><button class="btn btn-warning radius" type="button">警告</button></td>
<td><input class="btn btn-warning radius" type="button" value="警告"></td>
<td><a href="#" class="btn btn-warning radius">警告</a></td>
<td><input class="btn btn-warning radius disabled" type="button" value="不可点击"></td>
<td><input class="btn btn-warning-outline radius" type="button" value="警告"></td>
</tr>
<tr>
<td><button class="btn btn-danger radius" type="button">危险</button></td>
<td><input class="btn btn-danger radius" type="button" value="危险"></td>
<td><a href="#" class="btn btn-danger radius">危险</a></td>
<td><input class="btn btn-danger radius disabled" type="button" value="不可点击"></td>
<td><input class="btn btn-danger-outline radius" type="button" value="危险"></td>
</tr>
<tr>
<td><button class="btn btn-link radius" type="button">链接</button></td>
<td><input class="btn btn-link radius" type="button" value="链接"></td>
<td><a href="#" class="btn btn-link radius">链接</a></td>
<td><input class="btn btn-link radius disabled" type="button" value="不可点击"></td>
<td></td>
</tr>
</tbody>
</table>
<h3>按钮大小</h3>
<table class="table table-border table-bordered table-striped">
<thead>
<tr>
<th width="30%">按钮</th>
<th>class=""</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" class="btn btn-primary size-XL radius" value="特大按钮"></td>
<td><code>size-XL</code></td>
</tr>
<tr>
<td><input type="button" class="btn btn-primary size-L radius" value="大按钮"></td>
<td><code>size-L</code></td>
</tr>
<tr>
<td><input type="button" class="btn btn-primary radius" value="默认尺寸"></td>
<td><code>size-M</code> 缺省值</td>
</tr>
<tr>
<td><input type="button" class="btn btn-primary size-S radius" value="小按钮"></td>
<td><code>size-S</code></td>
</tr>
<tr>
<td><input type="button" class="btn btn-primary size-MINI radius" value="迷你按钮"></td>
<td><code>size-MINI</code></td>
</tr>
</tbody>
</table>
<h3>按钮组</h3>
<div class="btn-group">
<span class="btn btn-primary radius">左边按钮</span>
<span class="btn btn-default radius">中间按钮</span>
<span class="btn btn-default radius">中间按钮</span>
<span class="btn btn-default radius">右边按钮</span>
</div>
<div class="cl mt-20">
<div class="btn-group l">
<span class="btn btn-primary" title="源代码"><i class="Hui-iconfont"></i></span>
</div>
<div class="btn-group l ml-5">
<span class="btn btn-primary" title="左对齐"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="居中对齐"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="右对齐"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="两头对齐"><i class="Hui-iconfont"></i></span>
</div>
<div class="btn-group l ml-5">
<span class="btn btn-primary" title="字体"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="加粗"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="倾斜"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="下划线"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="行高"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="行宽"><i class="Hui-iconfont"></i></span>
</div>
<div class="btn-group l ml-5">
<span class="btn btn-primary" title="链接"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="有序列表"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="无序列表"><i class="Hui-iconfont"></i></span>
</div>
<div class="btn-group l ml-5">
<span class="btn btn-primary" title="剪切"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="复制"><i class="Hui-iconfont"></i></span>
<span class="btn btn-primary" title="粘贴"><i class="Hui-iconfont"></i></span>
</div>
</div>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">图片</div>
<div class="panel-body">
<p><img width="140" height="140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" alt="..." class="radius">
<img width="140" height="140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" alt="..." class="round">
<img style="width:140px; height:140px" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" alt="..." class="thumbnail"></p>
<div class="album-item" style="width:200px">
<div class="album-img">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=">
</div>
<div class="album-title">《仙剑奇侠传》赵灵儿
<span class="c-999">(20张)</span>
</div>
<div class="album-bg">
<div class="album-bg-Fir"></div>
<div class="album-bg-Sec"></div>
</div>
</div>
<div>
<img src="static/h-ui/images/ucnter/avatar-default.jpg" class="avatar radius size-MINI">
<img src="static/h-ui/images/ucnter/avatar-default.jpg" class="avatar radius size-S">
<img src="static/h-ui/images/ucnter/avatar-default.jpg" class="avatar radius size-M">
<img src="static/h-ui/images/ucnter/avatar-default.jpg" class="avatar radius size-L">
<img src="static/h-ui/images/ucnter/avatar-default.jpg" class="avatar radius size-XL">
</div>
<div class="maskWraper" style="width:300px; height:250px; border:solid 1px #ddd;">
<img src="http://images.h-ui.net/www/AD-300x250.gif" width="300" height="250">
<div class="maskBar text-c">遮罩条</div>
</div>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">表格</div>
<div class="panel-body">
<table class="table table-border table-bordered table-striped mt-20">
<thead>
<tr>
<th class="col1">表头</th>
<th class="col2">表头</th>
<th class="col3">表头</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col1">类别</th>
<td class="col2">表格内容</td>
<td class="col3">表格内容</td>
</tr>
<tr>
<th class="col1">类别</th>
<td class="col2">表格内容</td>
<td class="col3">表格内容</td>
</tr>
<tr>
<th class="col1">类别</th>
<td class="col2">表格内容</td>
<td class="col3">表格内容</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">选项卡</div>
<div class="panel-body">
<div id="HuiTab-demo1" class="HuiTab">
<div class="tabBar cl">
<span>选项卡一</span>
<span>选项卡二</span>
<span>自适应宽度</span>
</div>
<div class="tabCon">内容一</div>
<div class="tabCon">内容二</div>
<div class="tabCon">内容三</div>
</div>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">便签与标号</div>
<div class="panel-body">
<table class="table table-border table-bordered table-bg">
<thead>
<tr>
<th>class=""</th>
<th>标签</th>
<th>标号</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>label label-default radius</code></td>
<td><span class="label label-default radius">默认</span></td>
<td><span class="badge badge-default radius">1</span></td>
<td>默认</td>
</tr>
<tr>
<td><code>label label-primary radius</code></td>
<td><span class="label label-primary radius">主要</span></td>
<td><span class="badge badge-primary radius">2</span></td>
<td>主要</td>
</tr>
<tr>
<td><code>label label-secondary radius</code></td>
<td><span class="label label-secondary radius">次要</span></td>
<td><span class="badge badge-secondary radius">3</span></td>
<td>次要</td>
</tr>
<tr>
<td><code>label label-success radius</code></td>
<td><span class="label label-success radius">成功</span></td>
<td><span class="badge badge-success radius">4</span></td>
<td>成功</td>
</tr>
<tr>
<td><code>label label-warning radius</code></td>
<td><span class="label label-warning radius">警告</span></td>
<td><span class="badge badge-warning radius">5</span></td>
<td>警告</td>
</tr>
<tr>
<td><code>label label-danger radius</code></td>
<td><span class="label label-danger radius">危险</span></td>
<td><span class="badge badge-danger radius">6</span></td>
<td>危险</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">警告</div>
<div class="panel-body">
<div class="Huialert Huialert-success"><i class="Hui-iconfont"></i>成功状态提示</div>
<div class="Huialert Huialert-danger"><i class="Hui-iconfont"></i>危险状态提示</div>
<div class="Huialert Huialert-error"><i class="Hui-iconfont"></i>错误状态提示</div>
<div class="Huialert Huialert-info"><i class="Hui-iconfont"></i>信息状态提示</div>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">进度条</div>
<div class="panel-body">
<div class="progress radius">
<div class="progress-bar">
<span class="sr-only" style="width:25%"></span>
</div>
</div>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">弹出窗口</div>
<div class="panel-body">
<p class="mt-20">
<button class="btn btn-primary" onClick="modaldemo()">弹出对话框</button>
<button class="btn btn-primary ml-20" onClick="modalalertdemo()">消息框，2秒钟自动消失</button>
</p>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">分享到</div>
<div class="panel-body">
<section class="share cl">
<div class="bdsharebuttonbox Hui-share">
<span class="share-text Hui-iconfont"></span>
<a href="#" class="bds_weixin Hui-iconfont" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_qzone Hui-iconfont" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_sqq Hui-iconfont" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_tsina Hui-iconfont" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_tqq Hui-iconfont" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_douban Hui-iconfont" data-cmd="douban" title="分享到豆瓣网"></a>
</div>
<script type="text/javascript">
window._bd_share_config={
"common":{
"bdSnsKey":{},
"bdText":"H-ui前端框架，架起设计与后端的桥梁轻量级前端框架，简单免费，兼容性好，服务中国网站。",
'bdDes':'国内免费轻量级前端框架',
'bdPopTitle':'H-ui前端框架',
"bdMini":"2",
"bdMiniList":false,
"bdPic":"http://static.h-ui.net/h-ui/images/logo-big.jpeg",
"bdStyle":"0",
"bdSize":"24"
},
"selectShare":{
"bdContainerClass":null,
"bdSelectMiniList":["weixin","qzone","sqq","tsina","tqq","douban"]
}
};
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
</section>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">标签</div>
<div class="panel-body">
<div id="Huitags-demo1"></div>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">星星评价</div>
<div class="panel-body">
<div class="clearfix">
<span class="f-l f-15 va-m">描述相符：</span>
<div id="star-1" class="star-bar size-M f-l mr-10 va-m"></div>
<strong id="result-1" class="f-l va-m"></strong>
</div>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">tooltip效果</div>
<div class="panel-body">
<button class="btn btn-primary radius" data-toggle="tooltip" data-placement="right" title="右边显示">右边显示</button>
<button class="btn btn-primary radius" data-toggle="tooltip" data-placement="top" title="上边显示">上边显示</button>
<button class="btn btn-primary radius" data-toggle="tooltip" data-placement="bottom" title="下边显示">下边显示</button>
<button class="btn btn-primary radius" data-toggle="tooltip" data-placement="left" title="左边显示">左边显示</button>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header">popover效果</div>
<div class="panel-body">
<button type="button" class="btn btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容">左侧的 Popover</button>
<button type="button" class="btn btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容">顶部的 Popover</button>
<button type="button" class="btn btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容">底部的 Popover</button>
<button type="button" class="btn btn-primary radius" title="标题" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容">右侧的 Popover</button>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header clearfix">
<span class="f-l">H-ui官方插件</span>
<span class="f-r">需要升级到 H-ui.js v3.1 版本</span>
</div>
<div class="panel-body">
<table class="table table-border table-bordered table-bg">
<thead>
<tr>
<th width="30%">名称</th>
<th width="20%">版本号</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.Huihover.js.shtml" target="_blank">jQuery.Huihover.js</a></td>
<td>2.0</td>
<td>hover</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.Huifocusblur.js.shtml" target="_blank">jQuery.Huifocusblur.js</a></td>
<td>2.0</td>
<td>得到失去焦点</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.Huifold.js.shtml" target="_blank">jQuery.Huifold.js</a></td>
<td>2.0</td>
<td>折叠</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.Huipreview.js.shtml" target="_blank">jQuery.Huipreview.js</a></td>
<td>2.0</td>
<td>图片预览</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.Huispinner.js.shtml" target="_blank">jQuery.Huispinner.js</a></td>
<td>2.0</td>
<td>微调器</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.Huitab.js.shtml" target="_blank">jQuery.Huitab.js</a></td>
<td>2.0</td>
<td>选项卡</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.Huitags.js.shtml" target="_blank">jQuery.Huitags.js</a></td>
<td>2.0</td>
<td>标签</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.Huitextarealength.js.shtml" target="_blank">jQuery.Huitextarealength.js</a></td>
<td>2.0</td>
<td>字数限制</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.HuitogglePassword.js.shtml" target="_blank">jQuery.HuitogglePassword.js</a></td>
<td>2.0</td>
<td>隐藏显示密码</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.Huitotop.js.shtml" target="_blank">jQuery.Huitotop.js</a></td>
<td>2.0</td>
<td>返回顶部</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header clearfix">
<span class="f-l">H-ui.js v3.0 整合的第三方插件<small>(引入了H-ui.js v3.0版本，无需再单独重复引用以下插件)</small></span>
<span class="f-r">感谢以下插件！优秀的插件就像金子一样，处处发光</span>
</div>
<div class="panel-body">
<table class="table table-border table-bordered table-bg">
<thead>
<tr>
<th width="30%">名称</th>
<th width="20%">版本号</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.cookie.js.shtml" target="_blank">jQuery.cookie.js</a></td>
<td>1.4.1</td>
<td>jQuery cookie插件。</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.form.js.shtml" target="_blank">jQuery.form.js</a></td>
<td>3.51.0</td>
<td>jquey表单插件。</td>
</tr>
<tr>
<td><a href="http://www.h-ui.net/lib/jQuery.lazyload.js.shtml" target="_blank">jQuery.lazyload.js</a></td>
<td>1.9.3</td>
<td>图片的延迟加载插件。</td>
</tr>
<tr>
<td>jQuery.responsive-nav.js</td>
<td>1.0.39</td>
<td>响应式导航插件。</td>
</tr>
<tr>
<td>jQuery.placeholder.js</td>
<td>1.0</td>
<td>IE浏览器支持placeholder。</td>
</tr>
<tr>
<td>jQuery.emailsuggest.js</td>
<td>1.0</td>
<td>邮箱域名自动提示填充插件。</td>
</tr>
<tr>
<td>jQuery.format.js</td>
<td>1.0</td>
<td>格式化字符串。</td>
</tr>
<tr>
<td>jQuery.iCheck.js</td>
<td>1.0</td>
<td>单选框，复选框美化插件。</td>
</tr>
<tr>
<td>jQuery.onePageNav.js</td>
<td>1.0</td>
<td>单页面滚动导航。</td>
</tr>
<tr>
<td>jQuery.stickUp.js</td>
<td>1.0</td>
<td>网页滚动，元素固定置顶插件。</td>
</tr>
<tr>
<td>jQuery.ColorPicker.js</td>
<td>1.0</td>
<td>颜色控件。</td>
</tr>
<tr>
<td>Bootstrap.modal.js</td>
<td>3.3.0</td>
<td>Bootstrap模态窗口，弹窗插件。</td>
</tr>
<tr>
<td>Bootstrap.dropdown.js</td>
<td>3.3.0</td>
<td>Bootstrap下拉框插件。</td>
</tr>
<tr>
<td>Bootstrap.transition.js</td>
<td>3.3.0</td>
<td>Bootstrap过渡效果(Transition)插件。</td>
</tr>
<tr>
<td>Bootstrap.tooltip.js</td>
<td>3.3.0</td>
<td>Bootstrap工具提示插件。</td>
</tr>
<tr>
<td>Bootstrap.popover.js</td>
<td>3.3.0</td>
<td>Bootstrap弹出框插件。</td>
</tr>
<tr>
<td>Bootstrap.alert.js</td>
<td>3.3.0</td>
<td>Bootstrap警告框插件。</td>
</tr>
<tr>
<td>Bootstrap.slider.js</td>
<td>1.0.1</td>
<td>Bootstrap滑动条插件。</td>
</tr>
<tr>
<td>Bootstrap.datetimepicker.js</td>
<td>1.0</td>
<td>Bootstrap日期插件。</td>
</tr>
<tr>
<td>Bootstrap.Switch.js</td>
<td>1.3</td>
<td>Bootstrap 开关控件。</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default mt-20">
<div class="panel-header clearfix">
<span class="f-l">lib中的第三方插件</span>
<span class="f-r">非必选插件，请有选择性的使用，用不上的可自行删除，减少框架体积</span>
</div>
<div class="panel-body">
<table class="table table-border table-bordered table-bg">
<thead>
<tr>
<th width="30%">名称</th>
<th width="20%">版本号</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>jQuery.js</td>
<td>1.9.1</td>
<td>jQuery库，可自行下载新版本，替换现有版本。</td>
</tr>
<tr>
<td>Hui-iconfont</td>
<td>1.0.8</td>
<td>阿里图标字体库（H-ui定制）</td>
</tr>
<tr>
<td>jquery.SuperSlide</td>
<td>2.1.1</td>
<td>幻灯片组件</td>
</tr>
<tr>
<td>Validform</td>
<td>5.3.2</td>
<td>表单验证插件</td>
</tr>
<tr>
<td>jquery.validation</td>
<td>1.14.0</td>
<td>表单验证插件</td>
</tr>
<tr>
<td>My97DatePicker</td>
<td>4.8</td>
<td>日期插件</td>
</tr>
<tr>
<td>datatables</td>
<td>1.10.0</td>
<td>表格插件</td>
</tr>
<tr>
<td>nprogress</td>
<td>0.2.0</td>
<td>进度条插件</td>
</tr>
<tr>
<td>layer</td>
<td>2.4</td>
<td>layer弹出层插件</td>
</tr>
<tr>
<td>laypage</td>
<td>1.2</td>
<td>laypage 翻页插件</td>
</tr>
<tr>
<td>html5shiv.js</td>
<td><3.7.0/td>
<td>html5插件，让低版本IE支持html5元素</td>
</tr>
<tr>
<td>DD_belatedPNG_0.0.8a-min.js</td>
<td>0.0.8a</td>
<td>解决IE6png透明</td>
</tr>
<tr>
<td>swfobject.js</td>
<td>2.2</td>
<td>Flash插件</td>
</tr>
<tr>
<td>waterfall.min</td>
<td>0.1.6</td>
<td>瀑布流插件</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class="footer mt-20">
<div class="container">
<nav class="footer-nav">
<a target="_blank" href="http://www.h-ui.net/aboutHui.shtml">关于H-ui</a>
<span class="pipe">|</span>
<a target="_blank" href="http://www.h-ui.net/copyright.shtml">软件著作权</a>
<span class="pipe">|</span>
<a target="_blank" href="http://www.h-ui.net/juanzeng.shtml">感谢捐赠</a>
</nav>
<p>Copyright ©2013-2017 H-ui.net All Rights Reserved. <br>
<a rel="nofollow" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备15015336号-1</a>
<br>
未经允许，禁止转载、抄袭、镜像<br>
用心做站，做不一样的站</p>
</div>
</footer>
</div>
</div>
<!--普通弹出层-->
<div id="modal-demo" class="modal fade middle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content radius">
<div class="modal-header">
<h3 class="modal-title">对话框标题</h3>
<a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
</div>
<div class="modal-body">
<p>对话框内容…</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">确定</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="lib/jquery.SuperSlide/2.1.3/jquery.SuperSlide.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.min.js"></script>
<script>
//弹窗
function modaldemo(){
$("#modal-demo").modal("show");
}
//消息框
function modalalertdemo(){
$("body").Huimodalalert({
content: '我是消息框，2秒后我自动滚蛋！',
speed: 2000,
}, function () {
alert("我已滚蛋");
});
}
$(function(){
$(".input-text,.textarea").Huifocusblur();
//幻灯片
jQuery("#slider-3 .slider").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:700,interTime:3000,pnLoop:false,titOnClassName:"active"});
$(".panel").Huifold({
titCell:'.panel-header',
mainCell:'.panel-body',
type:1,
trigger:'click',
className:"selected",
speed:"first",
});
//邮箱提示
$("#email").emailsuggest();
//checkbox 美化
$('.skin-minimal input').iCheck({
checkboxClass: 'icheckbox-blue',
radioClass: 'iradio-blue',
increaseArea: '20%'
});
//日期插件
$("#datetimepicker").datetimepicker({
language: 'zh-cn',
format: 'yyyy-mm-dd',
minView: "month",
todayBtn: 1,
autoclose: 1,
endDate : new Date()
}).on('hide',function(e) {
//此处可以触发日期校验。
});
/*+1 -1效果*/
$("#spinner-demo").Huispinner({
value:1,
minValue:1,
maxValue:99,
dis:1
});
$(".textarea").Huitextarealength({
minlength:10,
maxlength:200.
});
$("#demoform").validate({
rules:{
email:{
required:true,
email:true,
},
username:{
required:true,
minlength:4,
maxlength:16
},
telephone:{
required:true,
isMobile:true,
},
password:{
required:true,
isPwd:true,
},
password2:{
required:true,
equalTo: "#password"
},
sex:{
required:true,
},
datetimepicker:{
required:true,
},
checkbox2:{
required:true,
},
city:{
required:true,
},
website:{
required:true,
url:true,
},
beizhu:{
maxlength:500,
}
},
onkeyup:false,
focusCleanup:true,
success:"valid",
submitHandler:function(form){
$("#modal-shenqing-success").modal("show");
$(form).ajaxSubmit();
}
});
//选项卡
$("#HuiTab-demo1").Huitab({
index:0
});
$("#Huitags-demo1").Huitags();
//返回顶部
$.Huitotop();
//hover效果
$('.maskWraper').Huihover();
//星级评价
$("#star-1").raty({
hints: ['1','2', '3', '4', '5'],//自定义分数
starOff: 'iconpic-star-S-default.png',//默认灰色星星
starOn: 'iconpic-star-S.png',//黄色星星
path: 'static/h-ui/images/star',//可以是相对路径
number: 5,//星星数量，要和hints数组对应
showHalf: true,
targetKeep : true,
click: function (score, evt) {//点击事件
//第一种方式：直接取值
$("#result-1").html('你的评分是'+score+'分');
}
});
$( ".ui-sortable" ).sortable({
//connectWith: ".panel",
items:".panel",
handle: ".panel-header",
//delay: 300, //时间延迟
//distance: 15, //距离延迟
placeholder: "ui-state-highlight", //占位符样式
update: function(event, ui){
}
}).disableSelection();
var _bodyHeight = $(window).height();
var _doch = $(document).height();
$(".containBox").height(_bodyHeight);
/*左右滑动菜单*/
$(".JS-nav-toggle").click(function() {
$("body").addClass('sideBox-open');
$(".containBox-bg").height(_bodyHeight).show();
});
$(".containBox-bg").click(function() {
$(this).hide();
$("body").removeClass('sideBox-open');
});
});
</script>
</body>
</html>
<!--H-ui前端框架提供前端技术支持 h-ui.net @2018-09-17 -->
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。