H-ui前端框架目录结构及规范
发布时间：2016-07-13 18:29 | 人气数：2310
<!DOCTYPE HTML> <meta charset="utf-8"> 开始注释：<!-- 注释 --> 结束注释：<!-- /注释文案 --> <img src="" alt="图片描述" title="图片描述">
\根目录 │ _blank.html 空白页(每次我们都拿空白页去创建，这样比较干净 │ _footer.html 页脚公共代码片段 │ _header.html 头部公共代码片段 │ _meta.html meta公共代码片段 │ robots.txt 搜索引擎爬虫配置文件 │ login.html 登陆页面 │ reg.html 注册页面 │ index.html 首页(主框架) │ member-开头的 用户相关 │ artice-开头的 资讯相关 │ picture-开头的 图片相关 │ product-开头的 产品相关 │ page-开头的 单页相关 │ system-开头的 系统相关 │ admin-开头的 管理员相关 │ charts-开头的 统计相关 │ blog-开头的 博客相关 ├─css │ H-ui.reset.css H-ui.reset css │ H-ui.css h-ui CSS │ H-ui.min.css h-ui CSS 压缩版 │ H-ui.login.css H-ui.admin后台登录样式 │ H-ui.admin.css H-ui.admin样式 │ style.css 写你自己的样式 ├─images UI相关的图片素材 ├─js │ H-ui.js H-ui核心脚本 │ H-ui.admin.js 本站相关的js ├─lib │ jquery jQuery类库（v1.9.1） │ bootstrapSwitch 开关控件 │ Hui-iconfont_v1.0 阿里图标字体库（H-ui定制） │ font-awesome 字体库文件 │ icheck 单选框、复选框控件 │ laypage laypage 翻页插件 │ layer layer弹出层插件 │ laytpl JavaScript模板引擎 │ My97DatePicker 日期插件 │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ dataTables 表格排序，检索插件 │ WebUploader 百度文件上传组件 │ lightbox2 图片预览组件 │ html5.js html5插件，让低版本IE支持html5元素 │ DD_belatedPNG_0.0.8a-min.js 解决IE6png透明 │ swfobject.js Flash插件 │ expressInstall.swf 检查flash插件 │ unslider.min.js Unslider图片滚动效果插件 │ stickUp.min.js 让页面元素"固定"位置 │ respond.min.js 让IE兼容media │ Echo.js 图片延迟加载插件 │ colpick.js 颜色插件 │ handlebars.js js模版引擎 │ waterfall.min.js 瀑布流插件 └─temp 测试数据、图片
字符 名称 实体名 ¥ 人民币符号：元 ¥ © 版权 © ® 注册商标 ® ™ 商标TM ™ · 间隔符号 · " 双引号 " & &符 & < 左尖括号（小于号） < > 右尖括号（大于号） > 半角空格 × 乘号 × ÷ 除号 ÷统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。
windows 7系统：微软雅黑 Arial； windows XP及以下：新宋体，宋体，Arial MAC默认字体：Helvetica Neue和Helvetica Hiragino Sans GB。 font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53"; 微软雅黑 \5FAE\8F6F\96C5\9ED1 或 Microsoft YaHei 黑体 \9ED1\4F53 新宋体 \65b0\5b8b\4f53 宋体 \5b8b\4f53按照元素模型由外及内，由整体到细节书写，大致分为五组：
位置：position,left,right,float 盒模型属性：display,margin,padding,width,height 边框与背景：border,background 段落与文本：line-height,text-indent,font,color,text-decoration,... 其他属性：overflow,cursor,visibility,... .上下模块之间的间距统一使用下一个模块的margin-top来实现，好处是：如果没有下 一个模块也不会多出一段空隙。 :link :visited :hover :active 书写顺序 L-V-H-A 不要使用 @import
1. _ IE6 2. * IE6/7 3. !important IE7/Firefox 4. *+ IE7 5. \9 IE6/7/8 6. \0 IE8 7. 条件hack
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> IE7以下版本 <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> IE7 <!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> IE8 <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> IE8以上
current 当前 hover 悬停 selected 挑选 disabled 禁用 focus 得到焦点 blur 失去焦点 checked 勾选 success 成功 error 出错 header(hd) 头部 content(cnt) 内容 title(tit) 标题 item 项目（条）cell 单元 image/pic(img) 图片 text(txt) 文字 top 顶部 scrubber 时序菜单 nav 导航 mainbav 主导航 subnav 子导航 topnav 顶部导航 breadcrumb 面包屑导航 flink 友情链接 footer 尾 copyright 版权 menu 菜单 submenu 子菜单 dropdown 下拉菜单 searchBar 搜索条 search 搜索条 searchTxt 搜索框 searchBtn 搜索按钮 search_key 搜索词 member 会员 ucenter 用户中心 loginBar 登陆条 login 登录 loginBtn 登录按钮 regsiter 注册按钮 btn-regsiter注册按钮 name 用户名 password 密码 nickname 昵称 obilephone/mobile 手机 telephone/tel 电话 defaultavatar 默认头像 hot 热点 news 新闻 banner/AD 广告 download 下载 content 内容 title 标题 summary 摘要 time 时间 share 分享 digg 顶 like 喜欢 list 列表 pList 图片列表 tList 文字列表 tpList 图文列表 table 表格 row 行 column 列 gutter 间隔 viewport 视口 tab 标签 tags 标签 scroll 滚动 sidebar 侧边栏 column 栏目 section 区块 msg 提示信息 status 状态 vote 投票 tips 小技巧 guild 指南 note 注释 icon- 图标 btn- 按钮 goods 商品 goodsList 商品列表 goodsDetail 商品详情 goodsInfo 商品信息 tuan 团购 tuanList 团购列表 tuanDetail 团购详情 tuanInfo 团购信息 transition 动画 shadow 阴影 fade 淡入淡出 flip 翻页效 slide 滑动 slideup 上滑动 slidedown 下滑动 turn 翻页 horizontal 水平 vertical 垂直 collapsible 折叠 corners 拐角 flow 流 reverse 反向 pop 弹窗 count 总数/计数 plus 加号/正 minus 减号/负 controlgroup 控制组
default/index.html 首页 404.html 404错误页 print.html 打印页 header.html 页头 footer.html 页脚 sitemap.html 网站地图 passport.html 通行证 rank.html 排行榜 roll.html 滚动新闻 solution.html 解决方案 joinus.html 加入我们 partner.html 合作伙伴 service.html 服务 aboutus.html 关于我们 contact.html 联系我们 company.html 公司介绍 organization.html 组织结构 culture.html 企业文化 strategy.html 发展策略 honor.html 公司荣誉 aptitudes.html 企业资质 events.html 大事记 business.html 商务合作 contract.html 服务条款 privacy.html 隐私声明 CSR.html 企业社会责任
news-开头.html 新闻相关 article-开头.html 资讯相关 picture-开头.html 图片相关 photo-开头.html 相册相关 product-开头.html 产品相关 goods-开头.html 商品相关 system-开头.html 系统相关 tag-开头.html tag相关 brand-开头.html 品牌相关 help-开头.html 帮助相关 member-开头.html 会员相关 search-开头.html 搜索相关文件夹命名规范
admin 后台管理 app 应用 article 资讯 common 公共 config 配置 data 数据 digg 顶 en-us 英文 extend 延伸 install 安装 Lang 语言包 Lib 库 mall 商城 picture 组图 product 商品 search 搜索 section 区块 shop 商店 static 静态 system 系统 templates 模版 tuan 团购 ucenter 用户中心 upload 上传 video 视频 vote 投票 zh_tw 繁体中文 zh-cn 简体中文CSS reset
.pos-r{position:relative}
.pos-a{position:absolute}
.pos-f{position:fixed}
.f-l{float:left!important;_display:inline}
.f-r{float:right!important;_display:inline}
注意： 浮动的父级元素一定要用 cl 清除浮动，否则高度会无法撑开。
<span class="pipe">|</span>
<p class="c-primary">主色</p> <p class="c-secondary">次色</p> <p class="c-success">强调色-成功</p> <p class="c-error">强调色-错误</p> <p class="c-warning">强调色-警告</p> <p class="c-333">辅助色-#333333灰色</p> <p class="c-666">辅助色-#666666灰色</p> <p class="c-999">辅助色-#999999灰色</p> <p class="c-red">标准色-红色</p> <p class="c-green">标准色-绿色</p> <p class="c-blue">标准色-蓝色</p> <p class="c-white">标准色-白色</p> <p class="c-black">标准色-黑色</p> <p class="c-orange">标准色-橙色</p>
<abbr title="User Interface" class="initialism">UI</abbr> <address>北京市海淀区上地……</address>
<div class="content">
<p>content是内容样式，14号字体，25px行高，段落自动首行缩进两个字符。</p>
</div>
<ul class="tlist"> <li class="dot-1"><span class="time r">12.25</span>带圆点的列表</li> <li class="box-1">带方点的列表</li> <li class="jt-1">带箭头的列表</li> <li class="jt-2">带箭头的列表</li> <li class="jt-3">带箭头的列表</li> </ul>
文件主题：H-ui前端框架目录结构及规范 文件大小：3.79M下载链接
文件关键词：目录结构, h-ui, 前端框架, 规范, 网页规范
上一篇：经常使用的20个正则表达式 下一篇：点击小图显示大图JS代码
