门户网站与大型网站的CSS架构与组织[网站美工]

赞助商链接

分享到： QQ空间新浪微博腾讯微博人人网

本文“门户网站与大型网站的CSS架构与组织[网站美工]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：

关于大型门户,海量信息平台及多模块,多区域化网站,更需求对CSS,XHTML的尺度化,符合语意的HTML框架,复用性强的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.

以上是“门户网站与大型网站的CSS架构与组织[网站美工]”的内容，如果你对以上该文章内容感兴趣，你可以看看七道奇为您推荐以下文章：

hosts是什么 hosts文件在什么位置若何改正hosts

在 Windows 8 中手动安装语言包

五个常见 PHP数据库问题