欢迎来到天天文库
浏览记录
ID：8981825
大小：70.00 KB
页数：18页
时间：2018-04-14
《zving前端开发规范(css部分)》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、Zving前端开发规范（CSS部分）为了保持页面规范，避免错误，加快学习和开发效率，以下列出Zving前端开发中CSS的一些规范及注意事项，此规范适用于项目前端页面。（2009年7月31日初稿2012年11月22日修正）页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用下划线命名法或骆驼式命名法，不要使用中划线命名法。骆驼式命名法：是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记。例如：mianNav
2、footNav下划线命名法：是指函数名中的每一个单词都用一个下划线来隔开。例如：mian_navfoot_nav1.通用命名规则：1)所有ID或者class字母和数字之间用“_”连接，如:#col_left、#col_right2)或所有ID或者class两个单词之间的链接采用骆驼式命名法，如:mianNav、footNav3)页面主体框架布局命名：lay_left、lay_center、lay_right4)栏目布局容器命名一律采用: col_left、col_right5)栏目标题块命名一律采用title元素标签采用:如：标
3、题6)页面所有图片区域全部采用：pic_banner、pic_logo7)页面文本列表区域全部采用： list_pic、list_item8)页面上按钮采用：btn_submit、btn_search9)广告区域：ad_left,ad_right,ad_top,ad_bottom2.主框架命名规则：1)#header(页面头部)2)#main(页面主体)3)#footer(页面尾部)3.通用命名规则：主体：main外层：wrap功能条：funcBar主导航：mainNav子导航：subNav友情链接：friendLink版权：c
4、opyright页眉：header页脚：footer标题：title主导航：mainNav子菜单：subMenu注释：note面包屑：breadcrumb容器：container内容：content搜索：search登陆：Login当前状态：current页头：header标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list信息：msg提示技巧：tips栏目
5、标题：title指南：guide服务：service热点：hot新闻：news下载：download注册：reg（register）状态：status按钮：btn投票：vote4.常用简写命名规则：bd：Bodyhd：Headerfnt：字体nav：导航tb：表格lnk：链接ml/mr：margin-left/margin-rightlst：列表pl/pr/pd：padding-left/-right/paddingcol：栏目frm：表单con：内容inf：信息lg：Logoinp：Inputft：Footerbtn：Butt
6、onmore：更多fl/frfloat:left/float:righttit标题栏spr空行 t/d/mid/l/r：上/下 / 中/左/右bdr：边w：宽h：高网站布局和样式文件命名1.网站样式文件命名和样式从属关系1)全局布局共用CSS文件：common（s包括cssreset（用来清除默认值）、全局性的一些属性值的定义，还有网站布局容器的共用的CSS部分：页眉、页脚、搜索共用CSS）2)频道私有CSS文件：home.css（当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack）2. 网站布局：网站
7、采用目前最流行的960宽度布局；布局类型分为3栏和2栏两种方式。分栏宽度参考设计稿，如果没有设计稿就按下面的规则两栏布局：主容器宽度为700px副容器宽度为240px三栏布局：依次为190px、510px、240px；3.网站栏目：web页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义：1)全局框架通用样式2)页眉3)导航4)搜索5)页脚6)内容列表通用样式7)图片通用样式8)表单通用样式4.频道私有CSS文件：针对网站频道不同风格所以各部分需要独自私有定义
8、，但是通用布局不需要再重新设置，只需要设置私有部分。XHTML文档结构1.html基本框架结构12345678<html><head><metahttp-equiv="Content-Type"content="text
此文档下载收益归作者所有
