您现在的位置是:首页 > 教程资讯 > 编程开发

门户网站CSS框架构建规则

2021-11-25 19:00:14【编程开发】人查看

简介 对于大型门户,海量信息平台及多模块,多区域化网站,更需要对CSS,XHTML,的标准化,符合语意的HTML框架,复用性强的CSS代码,这些才能保障你的网站,具有很好的“地基”。

第一部分:关于构建CSS框架的目的:1。以主流平台的适应性实现标准化和前端实现;2.快速发展,场地风格确定后,前端不要成为整个项目的瓶颈;3.重构需求,尽可能地使类和块样式可重用;4.分离结构和表达的要求,观察语义结构的一致性;5.该架构完全符合金融网络特性的CSS框架。6.对代码执行必要的搜索引擎优化。第2部分:关于CSS命名的一些约定:1。不要使用大写的类名和id名;2.尽量使用描述性英语单词的组合作为类名和id名;3.3.id名称和类名的多个英文单词用“_”破折号隔开;4.按区域描述编号示例:main01_DIV01_UL01(可以理解为主体第一个区域中第一个DIV下的第一个UL)接下来,我们需要对整个网站进行分析和设计稿,制作一个符合我们门户结构特点的CSS框架。我们以Sina.com为例分析了网站结构:整个页面分为:首页、更多页面、内容页面、专题页面和数据中心。新闻中心、频道页面、广告.我们整理这些页面,发现它们的共同点。这些发现的地方包括CSS样式、区域和模块的片段。我们需要做的是提出这些共同点。经过观察,我们可以将CSS分为以下几类:主样式表:sjweb.cssfont(字体样式、字号和颜色的集合)、layout(全局默认样式的集合)、component(组成页面的部分样式表的集合、模块片段的集合),这些都导入到sjweb.css的主样式表中,主样式表作为加载器加载新的外部样式,比如广告样式表。这样,这些页面只需要编写一点属于自己特殊需求的CSS样式代码。在构建这个CSS框架的时候,最好统一很多细节,比如行距和模块之间的距离。以下是一个门户的主页结构图:

规则:1。所有区域和模块之间的距离为8像素;2.新闻列表颜色# 333;3.新闻列表行距为20像素;等等。调整环境:IE7、ff、IE6、IE5.x、Opera。PS:其实更多的是你搭建的时候的细节,我就不多说了。嗯。多有趣啊