如何利用CSS制作框架？？

html-css025

如何利用CSS制作框架？？,第1张

闲着没事，给你写一个吧！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS 框架</title>

<style type="text/css">

body{text-align:centerfont:14px/1em Arial, Helvetica, sans-serif '宋体'}

*{margin:0padding:0}

.left{float:left}

.right{float:right}

.clear{clear:both}

.border{border:1px solid #888}

#wraper{margin:0 autowidth:850px}

#header{height:120pxposition:relativeborder:1px solid #888}

#header .logo{position:absolutetop:40pxleft:20pxwidth:120pxheight:50pxline-height:50pxtext-align:centertext-transform:uppercase}

#main{margin-top:5px}

#main .banner{height:60pxline-height:60px}

#main .box{margin-top:5pxwidth:49%height:250px}

#main .box h1{height:25pxline-height:25pxtext-indent:10pxfont-size:14pxborder-bottom:1px solid #888text-align:left}

#main .more{margin:5px auto 0 autowidth:80%height:15px}

#footer{margin-top:5pxheight:50pxline-height:50pxborder:1px solid #888}

</style>

</head>

<body>

<div id="wraper">

<div id="header"><div class="logo border">logo</div></div>

<div id="main">

<div class="banner border">Banner</div>

<div>

<div class="box border left"><h1>Title</h1></div>

<div class="box border right"><h1>Title</h1></div>

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

</div>

<div class="more border"></div>

</div>

<div id="footer">footer</div>

</div>

</body></html>

简单地说，就是一些事先写好的css，你只需要给你的html元素加上一些特定的类，就可以快速的得到一些想要的效果。

Blueprint是比较早的，基于静态css的框架。但是现在有两个主要的动态css语言，LESS和SASS，给css提供了变量，mixin，运算符等功能，让写出模块化的css框架成为可能。

Bootstrap现在基本是欧美这里最流行的框架，基于LESS，最近升级2.0以后完全模块化，也不需要太多配置，很好用。这个框架对大部分元素的视觉细节都已经做得很完整，基本上你只需要写html，加几个class，就可以做出像模像样的页面了，做起prototype来嗷嗷快。不过这也是个缺点，因为用的人多了样式都长一个样... 当然，模块化的框架你要修改起来也是很方便的，基本上修改变量就可以了。

另一个比较流行的是基于SASS的Compass，这个框架包含了Blueprint作为其中的一个模块。需要注意的是这个框架和Ruby on Rails是高度整合的，用起来需要大量的命令行操作，比Bootstrap麻烦，但是在Rails开发人员里面用得比较多。