如何对css进行组织与架构

html-css022

如何对css进行组织与架构,第1张

首先关于CSS文件，我一般只使用一个文件，这无关于网站的大小，网站越大，某种意义上我这种做法的优势与潜力就会体现的越明显。我这种单CSS文件的做法适合于web2.0的网站

让网站单CSS谁都会，关键是为何可以使用单CSS文件，这个CSS文件不会很大吗，如果一个网站有400个页面，那么这个CSS文件岂不要数百K。非也，在网站页面风格一致，在web系统结构良好的情况下，CSS文件可以控制的非常小，而且高性能，同时页面扩展性也非常好。下面就开始一点一点的展示，内容较多，需要慢慢来~~

1、整体概述

页面布局与文章内容显示需要，我将整体架构做成了一张图片，见下图：

2、关于CSS reset

CSS reset(css重置)基本上是不需要的，至少可以说80%的的CSS reset都是没有必要的，反而增加了页面CSS 的overwrite，尤其像开心网*{margin:0}这样子业余的做法更是要不得（反而破坏了很多UI的兼容性，比如说单复选框等）。我不是一概鄙弃CSS reset，有些常用标签我也是会简单重置一下的，而且会避免overwrite（样式重写），以保证样式最精简，渲染最高效。如下代码示例：

感觉你应该在A标签上用onmouseover事件来调用这个SCRIPT脚本才能签到这个效果,看了你JS的代码，感觉name应该是你A标签的ID，而A标签外面的LI也应该有个ID，类似于con_a_1,con_a_2,con_a_3,con_a_4,con_a_5...这样子的吧，所以我想，你的下面HTML代码或许应该是这个样子的：

<LI id="con_a_1"><A id="a1" class=menu href="content.asp?id=1" target="" onmouseover="setTab("a",1,8)">关于我们</A></LI>

<LI id="con_a_2"><A id="a2" class=menu href="content.asp?id=2" target="" onmouseover="setTab("a",2,8)">发展历程</A></LI>

<LI id="con_a_3"><A id="a3" class=menu href="content.asp?id=3" target="" onmouseover="setTab("a",3,8)">组织架构</A></LI>

<LI id="con_a_4"><A id="a4" class=menu href="content.asp?id=4" target="" onmouseover="setTab("a",4,8)">荣誉资质</A></LI>

<LI id="con_a_5"><A id="a5" class=menu href="content.asp?id=5" target="" onmouseover="setTab("a",5,8)">企业理念</A></LI>

<LI id="con_a_6"><A id="a6" class=menu href="content.asp?id=6" target="" onmouseover="setTab("a",6,8)">文化活动</A></LI>

<LI id="con_a_7"><A id="a7" class=menu href="content.asp?id=7" target="" onmouseover="setTab("a",7,8)">合作公司</A></LI>

<LI id="con_a_8"><A id="a8" class=menu href="content.asp?id=8" target="" onmouseover="setTab("a",8,8)">分支机构</A></LI>

具体的你自己试试看吧，我也没试过。