什么是960 css框架?

CSS框架是一种你能够使用在你的web项目中概念上的结构,是别人已经写完的,而且很完善的CSS定义集合。CSS框架一般是CSS文件的集合,包括基本风格的字体排版,表单样式,表格布局等等

【相关教程推荐:css教程】

————简单的来说就是站在巨人的肩膀上面,利用别人写好的东西,不用自己在麻烦一次

浏览器不兼容的问题-----这一直是一个心痛的问题

因为在不同的浏览器中所得到的网页显示效果是不同的,这就给网页设计限制了很大的发展空间,虽然有很笨拙的方法去避免这种无法兼容的尴尬

男一号——960grid

聪明的网页设计者发现,其实无论在哪一个浏览器里,也无论是否宽屏电脑,整个网页只要让它占据正中的位置不就行了吗

聪明的前辈就发现只要是960px就行了,让整个网页显示在正中间,不会跑偏。所以,在html+css中遇到的棘手的浏览器不兼容的问题在960的严格限制下就好多了。

由于电脑显示器有方屏、宽屏,宽屏又分16:9和16:10。分辨率更是多种多样,这么多不同模式下得用户如何能看到外观整齐、一致的网站呢?人们发现一个奇妙的事情:960px的宽度是Very Good!无论什么屏,那种分辨率都通吃。

现在有人专门开发了一组网站架构CSS规则,只要遵守这些简单的规则(其实就是class类),你就能快速设计出960px宽度的网页结构来。

这,就是960Grid。

官网:http://960.gs/

如何使用960Grid框架?

(1)在html文件中引入相关的外部CSS文件:

主要有是那个960.css为主要排版样

还有两个css文件:reset.css和text.css,它们的主要作用是为了消除浏览器间显示差异准备的,前者消除了html标签在各浏览器间的差异,而后者则主要针对的是字体。

(2)定义一个DIV大容器,放下整个页面:

grid其实就是一个容器,在这个容器里,已经给分好了“块,所以这个容器就给平均分成了块,有12和16两种,我们用.container_12 和 .container_16来区分

简而言之就是将这960分成12或者16块,到底是用12列的还是16列的这就要你来规定了

div class="container_12"></div>——12块


<div class="container_12">
    <div class="grid_12"></div>-------这一块使用了一个12列的grid
</div>

划线后数字就是该DIV所占的列数。当然为了布局方便,我们一定会加入更多的class或id的,最后如下:

<div class="container_12">
    <div class="grid_12 logo"></div>
</div>

案例2:将网页均匀的分开

<div class="container_12">
    <div class="grid_3 first">第一块</div>
    <div class="grid_6 second">第二块</div>
    <div class="grid_3 three">第三块</div>
</div>

css

.first{
    
    height: 200px;
}
.second{
    
    height: 200px;
}
.three{
    
    height: 200px;
}

我们可以很明确的看到,两个之间有空缺,这是为什么呢?

因为平分了12列,每两列之间都会有一个留白,就是所谓的margin,在默认的情况下,每一列的左右都会留出10px的白,那么相邻的两列之间的margin就是20px

alpha和omega

alpha是去除左边的margin,omega是去除右边的margin

然后要是两边都想去除呢?

   <div class="grid_3 first omega">第一块</div>
    <div class="grid_6 second alpha omega">第二块</div>
    <div class="grid_3 three alpha">第三块</div>

那如果我不想在同一行完成呢

尝试一下——

  <div class="clear"></div>

为了清除它对身后的CSS设置影响,建议在每个横向DIV大块做完之后,都加上class="clear"进行收尾。

  <div class="grid_3 first omega">第一块</div>
    <div class="clear"></div>
    <div class="grid_6 second alpha omega">第二块</div>
    <div class="clear"></div>
    <div class="grid_3 three alpha">第三块</div>

注意了:

<div class="grid_12 nav">——还记得这个玩意吗
        <ul>...</ul>
</div>

更多web前端学习前端开发学习知识,请查阅 HTML中文网 !!

以上就是什么是960 css框架?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏