前端css样式规范初稿

前端css样式规范初稿

ID:30034141

大小:95.00 KB

页数:9页

时间:2018-12-26

前端css样式规范初稿_第1页
前端css样式规范初稿_第2页
前端css样式规范初稿_第3页
前端css样式规范初稿_第4页
前端css样式规范初稿_第5页
资源描述:

《前端css样式规范初稿》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、江苏三六五网络有限公司HOUSE365前端CSS规范初稿2011/0531一CSS命名规范页面制作最重要的就是CSS,定义合理的CSS命名规范,可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用骆驼式命名法。骆驼式命名法:正如它的名称所表示的那样,是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。例如:mianNavfootNav1.通用命名规则:1)所有ID或者class字母和数字之间用“_”连接,如:#col_1、#col

2、_22)所有ID或者class两个单词之间的链接采用骆驼式命名法,如:mianNav、footNav3)页面主体框架布局命名:Lay_1、Lay_2、Lay_34)栏目布局容器命名一律采用:col_1、col_2、col_3、col_4、col_N5)栏目标题块命名一律采用title。元素标签采用:

如:

标题

6)页面所有图片区域全部采用:pic_1、pic_2、pic_3、pic_N7)页面文本列表区域全部采用:Lst_1、Lst_2、Lst_3、Lst_N8)页面

3、上按钮采用:btn_1、btn_2、btn_3、btn_N9)广告区域:ad_1,ad_2,ad_3,ad_N9江苏三六五网络有限公司2.主框架命名规则:1)#header(页面头部)2)#main(页面主体)3)#footer(页面尾部)3.通用命名规则:主体main外层wrap功能条funcBar主导航mainNav子导航subNav友情链接:friendLink版权:copyright页眉header页脚footer标题title主导航mainNav子菜单subMenu注释note面包屑breadcrumb容器containe

4、r内容content搜索search登陆Login当前状态current页头header标志logo侧栏sidebar广告banner导航nav子导航subnav菜单menu子菜单submenu搜索search滚动scroll页面主体main内容content标签页tab文章列表list信息msg提示技巧tips栏目标题title指南guide服务service热点hot新闻news下载download注册reg(register)状态status按钮btn投票vote4.常用简写命名规则:bd:Bodyhd:Headerfnt:字

5、体nav:导航tb:表格lnk:链接ml/mr:margin-left/margin-rightlst:列表pl/pr/pd:padding-left/-right/paddingcol:栏目frm:表单con:内容inf:信息lg:Logoinp:Input9江苏三六五网络有限公司ft:Footerbtn:Buttonmore:更多Tit:标题栏Spr:空行bdr:边w:宽h:高t/d/mid/l/r:上/下/中/左/右fl/frfloat:left/float:right二网站布局和样式文件命名1.网站样式文件命名和样式从属关系

6、1)全局CSS文件:global.css,其中global.css包括cssreset(用来清除默认值)、全局性的一些属性值的定义2)全局布局共用CSS文件:layout(网站布局容器的共用的CSS部分:页眉、页脚、搜索共用CSS3)频道私有CSS文件:home.css(当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack)2.网站布局:网站采用目前最流行的960宽度布局;布局类型分为3栏和2栏两种方式。两栏布局:主容器宽度为700px副容器宽度为240px三栏布局:依次为190px、510px、240px;

7、9江苏三六五网络有限公司3.网站栏目:web页面上不同内容的组合方式:图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义:1)全局框架通用样式2)页眉3)导航4)搜索5)页脚6)内容列表通用样式7)图片通用样式8)表单通用样式4.频道私有CSS文件:针对网站频道不同风格所以各部分需要独自私有定义,但是通用布局不需要再重新设置,只需要设置私有部分。三XHTML文档结构1.Xhtml基本框架结构

8、l//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签