热门关键字:  8 教程  css  flash  表单  定位
当前位置 : 主页>div+css>列表

大型网站CSS的管理

来源:http://www.dw8.org/ 作者:dw8 时间:2008-03-15 点击:
刚进公司,发现公司网站的CSS管理不合理,而且显得很凌乱,因此制作一个CSS标准供大家作为参考:

规范css是为了增强网站样式表的使用效率和扩展性
一,几个特殊样式:
1. index.css
(首页特有样式)

http://www.dw8.org Dreamweaver cs3 专业网站

2. global.css(全局样式,定义body以及font等等) http://www.dw8.org Dreamweaver 专业网站

3. form.css(定义表单样式,特殊表单样式可在表内用名称区别开)

http://www.dw8.org Dreamweaver cs3 专业网站

4. link.css    (对于所有链接的样式以后都放在这个文件夹) http://www.dw8.org Dreamweaver 专业网站

5. print.css(打印样式,这个可根据现在网站的需要决定) http://www.dw8.org dw专业网站


二,5个区块样式:
header.css
(头部样式)

http://www.dw8.org Dreamweaver 专业网站

top.css (头部分样式,主站不涉及到此样式,但是IBOX会有) http://www.dw8.org dw专业网站

main.css(主要内容部分) http://www.dw8.org Dreamweaver 专业网站

sidebar.css(侧边栏)

http://www.dw8.org Dreamweaver 专业网站

sidebar2.css(侧边栏2,这个主要为首页有左中右三列布局时会用到,一般很少涉及)

http://www.dw8.org dw专业网站

footer.css (脚部,版权信息等) http://www.dw8.org dw专业网站

三,其它:
登录注册,内容页面,频道页面等有时会使用不同头部或脚部样式,可在区块基础上创建新样式,命名规则为:区块-频道名称.css.
(例如:内容页面的头部可命名为:header-content.css

http://www.dw8.org Dreamweaver 专业网站

例:

Ibox代码分析:

http://www.dw8.org dw专业网站

<body>
<!--header-->
<div id="header">
<iframe src="header.htm" scrolling="no" height="100" width="983" frameborder="0"></iframe>
</div>
<div id="top">
<iframe src="top.htm" scrolling="no" height="100" width="983" frameborder="0"></iframe>
</div>
<!--main-->
<div id="main">
        <!--sidebar-->   
        <div id="sidebar">
     <iframe src="left.htm" scrolling="no" width="215" height="1120" frameborder="0"></iframe>
       </div>
           <div id="content">content</div>
http://www.dw8.org dw专业网站

</div>
<!--footer-->
<div id="footer">
<iframe src="footer.htm" scrolling="no" height="150" width="983" frameborder="0"></iframe>
</div>
</body>
最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册