规范目的
为提高团队协作效率,便于后台人员查找及前端后期优化维护,对项目整体的文档进行规范总结。
文件夹命名
说明:如果对于PC端较少的页面可以*_html, images文件夹可去掉第3层;
“*”代表的名称依项目的功能模块而定,只需符合文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符
关于*_public.css一部分css样式
PC端
基本样式
/*重写浏览器默认样式*/
body {
font-size: 1.6rem;
line-height:1.6;
font-family:"Microsoft YaHei" arial,courier new,courier,"宋体",monospace;
}
*{ margin:0; padding:0; border:none; list-style:none;}
input,textarea,a{ outline:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}
/*自定义全局样式*/
.img_wrap img {100%; display:block;}
a:hover, a:focus{ text-decoration:none; border:none; }
a{ text-decoration:none; }
a,button,input{outline:none;}
/*bootstrap框架样式重写*/
.clear_padding{
padding-left:0;
padding-right:0;
}
.clear_padding_l{padding-left:0 !important;}
.clear_padding_r{padding-right:0 !important;}
移动端////////////////////////////////////////////////
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 10px;
}
body {
font-size: 1.6rem;
line-height:1.6;
font-family:"Microsoft YaHei" arial,courier new,courier,"宋体",monospace;
}
*{ margin:0; padding:0; border:none; list-style:none;}
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0); outline:none;} /*去除微信网站的a,button,input,点击出现的蓝色边框*/
a:focus{ border:none; }
/*amaze框架样式重写*/
.side_padding{
padding-left:1rem;
padding-right:1rem;
}
.side_margin{
margin-left:1rem;
margin-right:1rem;
}
.clear_padding{
padding-left:0;
padding-right:0;
}
.clear_padding_l{padding-left:0 !important;}
.clear_padding_r{padding-right:0 !important;}
常用的命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright