BS项目中的CSS架构_仅加载自己需要的CSS

所属分类: 网络编程 / CSS/HTML 阅读数: 461
收藏 0 赞 0 分享

先说下这套架构的优点:
1.可以方便的把繁重的CSS编写工作分配出去,而不会相互造成影响。
2.结构清晰,利于维护和修改。
3.每一张网页都仅加载自己需要的CSS。

总结下来就是:提高开发效率,提高维护效率,提高网页加载效率。

下面我解释一下上面这张CSS结构图:

图中间的5个黑色的图示表示网页,其中上面单独的一张是母版页,下面四张是子页。使用VS的人都知道母版页的作用,相当于asp中的include,把共通的部分作成母版,单独的部分作成子页,提高开发效率。

图上方绿色框内的是全局CSS部分,它们存放在styles文件夹中,由母版调用并作用到所有子页。

图上方蓝色虚线框是单一CSS部分,其中每一张子页都有对应的文件夹用来存放自己独有的CSS文件。它们存放在styles/x文件夹中。 由各自对应的C#文件控制:打开不同的子页时,母版加载当前页的CSS。

图左下角的红色框是主题部分,用来存放全局的样式和图片。作用和绿色框一样,只不过它是由子页加载的,并不是母版统一加载的。 这部分和绿色框合并也无大碍。

接下来我介绍一下那么多CSS文件都有什么用?

—Adm/styles
——Basic.css 全局基础样式
——Layout.css 全局布局样式 (尺寸,定位等)
——General.css 全局美观样式 (颜色,图片等)
—Adm/styles/GroupManager 文件夹(例子)
——Group_Layout.css  group页特有的布局样式
——Group_General.css group页特有的美观样式

调用这么多CSS会带来较多的服务器请求,下面附上解决办法。

更多精彩内容其他人还在看

关于< tbody >的一个实例,很实用。

tbody Tab选项卡效果代码关键只是在<tbody>和选项卡的设置上。我在6个<tr></tr>段分别设置了<tbody></tbody>,目的是为了让一个javascript程序调用6个选项卡的时候可以循环设置tB
收藏 0 赞 0 分享

网页布局设计的标准尺寸

许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800*600尺寸及1024*768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解.
收藏 0 赞 0 分享

修正IE下使用CSS属性overflow的bug

你或许知道IE在使用 CSS 属性 overflow 时,有一些bug,请允许我在里重述一下。
收藏 0 赞 0 分享

css别忘记清除浮动clear:both

总结下清除浮动的一般解决方案,做网页时要注意
收藏 0 赞 0 分享

CSS清除浮动常用方法小结

使用div+css(姑且这样叫,虽然我也不喜欢,但是叫什么呢?)布局的好处不用多说,经常性地会使用到float,那么清除浮动就是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。
收藏 0 赞 0 分享

关于td的height和line-height兼容问题

写页面的时候,遇到处理数据的时候还是要用TABLE的,但是有的时候显示出来table, ie和ff的高不同。
收藏 0 赞 0 分享

CSS基础 CSS选择符

选择符分类介绍1.通配选择符 语法: * { sRules } 说明: 通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。 假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。
收藏 0 赞 0 分享

关于H1的位置解析

最近对H1的讨论很多(在文章内容页中),大致有以下两种情况: H1应该用于文章的标题上 H1应该用于站点的标题上
收藏 0 赞 0 分享

FF下 用 col 隐藏表格列的方法详解!

一直一来,我都在想办法看能不能用 col 控制表格的列隐藏,但是无奈,FF对COL支持不够好(其实是以前没有发现COL在FF下要怎么弄)。
收藏 0 赞 0 分享

原来CSS里的 !important 是如此用法

css下!important效果演示代码
收藏 0 赞 0 分享
查看更多