门户网站构建CSS框架的规则_经验交流

第一部:关于构建CSS框架我们要实现的目的:

1.实现标准化,具备主流平台适应性的前端实现;
2.快速开发,在站点风格确定后,前端不应该成为整个项目里瓶颈;
3.重构的需求,尽可能的让类和区块样式可重用;
4.分离结构和表现的需求,遵守了语义化结构的约定;
5.构架完全符合金融网特色的CSS框架。
6.对代码进行必要的搜索引擎优化。

第二部:关于CSS命名的一些约定:

1.不使用大写形式的类名和id名;
2.尽可能使用描述性的英文单词的组合作为类名和id名;
3.id名及类名的多个英文单词之间使用“_”短横线分隔;
4.按区域进行描述编号 例:main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)

下来我们要对整个网站及设计稿进行分析,去做符合自己门户结构特色的CSS框架

我们已新浪网 为例子:

进行站点结构分析:

整个页面分为:首页,更多页,内容页,专题页,数据中心,新闻中心,频道页,广告……

我们对这些页面进行整理,去发现他们的公共部分,这些被发现的地方有:CSS的样式,及区域,模块的碎片,我们需要做的是把这些公有的部分提出来。

观察后我们可以把CSS分以下几类:

主体样式表:sjweb.css
font(字体样式,字号,颜色的集合)
layout(框架结构 集合)
global(全局默认样式集合)
component(组成页面部分样式表,模块碎片集合)
这些讲统统的被import到sjweb.css主体样式表里, 主体样式表做为一个loader 加载新的外来样式,
比如广告样式表。
这样这些页面只需要写一点点 属于自己特殊要求的CSS样式代码就可以了。

在构建这个CSS框架的时候有很多细节的东西最好能统一化,比如:行间距,模块之间间隔距离等。

下面是某门户网的首页结构图:

 

规则:
1.所有area之间,模块之间,间距上下左右为:8 Pixel ;
2.新闻列表颜色#333 ;
3.新闻列表行间距20 pixel;
……等等

调整环境:IE7,ff,IE6,IE5.x,Opera。

PS:其实更多是你在构建的时候细节上的问题,好了不多说了。呵呵

时间: 2024-10-25 20:14:23

门户网站构建CSS框架的规则_经验交流的相关文章

创建无表格网站的原因和原则 译文_经验交流

In a time of web developers who just like to say that 'Tables are Evil' and can't (or won't) explain why, this article will attempt to give you some solid reasons that people create tableless designs. Included are six major benefits of creating table

20个优秀CSS网站(3月精选)_经验交流

510){this.resized=true;this.style.width=510;}">从这些CSS Gallery网站中精选了20个比较漂亮的XHTML+CSS布局网站,推荐给喜欢网页设计的人,无论是做博客模板还是做网站设计,在设计理念.色调.导航条.按钮.排版布局方面,都有一些值得借鉴的地方. 1.competitious.com510){this.resized=true;this.style.width=510;}"> 2.carawilliams.com.a

Zen Coding 快速编写HTML/CSS代码的实现_经验交流

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码. 在JavaScript方面,当我们想要在一个页面上获取某个特定的元素时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重用.JavaScript框架应运而生,它们同时引入了CSS选择器引擎.

CSS注释、命名、继承性、样式排序等CSS技巧的小结_经验交流

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

网站首页head区代码规范_经验交流

head区是指首页HTML代码的<head>和</head>之间的内容.  必须加入的标签      1.公司版权注释  <!--- The site is designed by Maketown,Inc 06/2000 --->      2.网页显示字符集  简体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">  繁体中

div+CSS 兼容小摘_经验交流

区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http

CSS优化2-(常用CSS缩写语法总结)_经验交流

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1:  property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2  property:value1 value

客齐集OEM的CSS解析与开发经验_经验交流

客齐集OEM的CSS解析 这个OEM是客齐集推出来的,如果你有一个域名,那么你就可以定制自已的网站了.由于是要让站工自已定制,所以开放了HTML以及CSS.JS等代码.但默认的CSS是CSS是不能改的. 在写这个CSS时,我尽量用最少的标签,这样很站对CSS不是很熟的站长也可以定制.另外布局时和写CSS时,总的思想的就是从大的到小,从小到细. 这个布局和CSS是一次写成的,没有更改过,所以有一些地主还是可以优化的,这样的代码也不是最优的.但是,这样的布局的CSS是可以让站长定义成各式各样的.一会

多浏览器css兼容分析小结_经验交流

CSS 兼容要点:  1. DOCTYPE 影响CSS 处理 . 2 .FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行.  3 .FF: body 设置text-align 时, div 需要设置margin: auto(主要是 margin-left,margin-right) 方可居中.  4 .FF: 设置padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important