H-ui前端框架目录结构及规范

发布时间:2016-07-13 18:29 | 人气数:961
<!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        测试数据、图片
字符  名称  实体名 
¥  人民币符号:元  &yen; 
©  版权  &copy; 
®  注册商标  &reg; 
™  商标TM  &trade; 
·  间隔符号  &middot; 
"  双引号  &quot; 
&  &符  &amp; 
<  左尖括号(小于号)  &lt; 
>  右尖括号(大于号)    &gt; 
   半角空格  &nbsp; 
×  乘号  &times; 
÷  除号  &divide;
统一使用 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, 前端框架, 规范, 网页规范