17款经典CSS框架
以下17款CSS框架提供源代码——
第一款：参考网站：http://960.gs/
参考代码：
<head>
<title>经典框架一</title>
<style>
body{
background-color:#112233;
color:#FFFFFF;
font-family:"微软雅黑";
}
#main{
border:solid 1px #FFFFFF;
width:1000px;
margin:0px auto;
}
#top{
border:solid 1px #FFFF00;
width:980px;
height:270px;
margin:0px auto;
}
.leftside1{
border:solid 1px #66FFFF;
width:280px;
height:270px;
float:left;
}
.rightside1{
border:solid 1px #FFCCFF;
width:320px;
height:270px;
float:right;
}
.middleside1{
border:solid 1px #99FF99;
width:376px;
height:270px;
margin-left:280px;
}
#content{
border:solid 1px #0099FF;
margin:27px auto;
width:980px;
}
#link1{
border:solid 1px #FF9900;
width:980px;
height:123px;
margin:0px auto;
}
#link2{
border:solid 1px #33FFFF;
width:980px;
height:160px;
}
#detail1{
border:solid 1px #CC66CC;
width:980px;
height:190px;
margin:0px auto;
}
.leftside2{
border:solid 1px #66FFFF;
width:300px;
height:190px;
float:left;
}
.rightside2{
border:solid 1px #FFCCFF;
width:300px;
height:190px;
float:right;
}
.middleside2{
border:solid 1px #FF0000;
width:300px;
height:190px;
margin-left:339px;
}
#detail2{
border:solid 1px #66CC66;
width:980px;
height:210px;
margin:0px auto;
}
.leftside3{
border:solid 1px #CCFF33;
width:470px;
height:210px;
}
.rightside3{
border:solid 1px #0066FF;
width:470px;
height:210px;
float:right;
}
.detail3{
border:solid 1px #FF6666;
width:980px;
height:500px;
margin:0px auto;
}
.leftside4{
border:solid 1px #FFFF00;
width:470px;
height:500px;
}
.rightside4{
border:solid 1px #66CCFF;
width:470px;
height:500px;
float:right;
}
#footer{
border:solid 1px #CC00FF;
width:980px;
height:60px;
margin:0px auto;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div class="leftside1">此处可以添加简介</div>
<div class="rightside1">此处可以放置logo</div>
<div class="middleside1">此处可以放置小banner</div>
</div>
<div id="content">
<div id="link1">这里可以放一个超链接</div>
<div id="link2">这里可以放几个超链接</div>
<div id="detail1">
<div class="leftside2">内容1</div>
<div class="rightside2">内容2</div>
<div class="middleside2">内容3</div>
</div>
<div id="detail2">
<div class="rightside3">内容5</div>
<div class="leftside3">内容4</div>
</div>
<div class="detail3">
<div class="rightside4">内容6</div>
<div class="leftside4">内容7</div>
</div>
</div>
<div id="footer"><a href="http://960.gs/">参考网站：http://960.gs/</a></div>
</div>
</body>
</html>
第二款：参考网站：http://www.blueprintcss.org/
参考代码：
<head>
<title>经典框架二</title>
<style>
body{
background-color:#395a99;
font-family:"微软雅黑";
color:#000000;
}
#main{
border:solid 1px #FFFFFF;
width:800px;
margin:0px auto;
}
#top{
border:solid 1px #00CCFF;
width:800px;
margin:0px auto;
height:115px;
}
#content{
border:solid 1px #FF0033;
width:800px;
background-color:#FFFFFF;
}
#detail1{
border:solid 1px #0099CC;
width:800px;
height:140px;
}
#rightside1{
border:solid 1px #FF0000;
width:310px;
height:140px;
float:right;
}
#leftside1{
border:solid 1px #00FF99;
width:440px;
height:140px;
}
#detail2{
border:solid 1px #FF9933;
width:800px;
height:240px;
margin-top:25px;
}
#rightside2{
border:solid 1px #FF0099;
width:340px;
height:240px;
float:right;
}
#leftside2{
border:solid 1px #9966FF;
width:410px;
height:240px;
}
#topside1{
border:solid 1px #3366CC;
width:410px;
height:160px;
}
#below1{
border:solid 1px #00FF33;
width:410px;
height:55px;
margin-top:21px;
}
#detail3{
border:solid 1px #CC00CC;
width:800px;
height:500px;
margin-top:25px;
}
#rightside3{
border:solid 1px #FF3366;
width:373px;
height:500px;
float:right;
}
#leftside3{
border:solid 1px #0066FF;
width:373px;
height:500px;
}
#footer{
border:solid 1px #FFCCCC;
width:800px;
height:60px;
margin-top:23px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
该处放banner
</div>
<div id="content">
<div id="detail1">
<div id="rightside1"></div>
<div id="leftside1"></div>
</div>
<div id="detail2">
<div id="rightside2"></div>
<div id="leftside2">
<div id="topside1"></div>
<div id="below1"></div>
</div>
</div>
<div id="detail3">
<div id="rightside3"></div>
<div id="leftside3"></div>
</div>
<div id="footer"><a href="http://www.blueprintcss.org/">参考网站：http://www.blueprintcss.org/</a></div>
</div>
</div>
</body>
</html>
第三款：参考网站：http://developer.yahoo.com/yui/grids/
参考代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>经典框架三</title>
<style>
body{
font-family:"微软雅黑";
color:#000000;
}
#main{
width:1300px;
margin:0px auto;
border:solid 1px #0000FF;
}
#top{
border:solid 1px #FF0000;
width:1300px;
height:110px;
}
#content{
border:solid 1px #9900FF;
width:1300px;
height:800px;
margin-top:15px;
}
#leftside{
border:solid 1px #FF9900;
width:200px;
height:800px;
float:left;
}
#rightside{
border:solid 1px #66FF00;
width:300px;
height:800px;
float:right;
}
#middleside{
border:solid 1px #FF0066;
width:750px;
height:800px;
margin-left:224px;
}
#footer{
border:solid 1px #6600FF;
width:1300px;
height:50px;
margin-top:15px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">此处放置banner</div>
<div id="content">
<div id="leftside"></div>
<div id="rightside"></div>
<div id="middleside"></div>
</div>
<div id="footer"><a href="http://developer.yahoo.com/yui/grids/">参考网站：http://developer.yahoo.com/yui/grids/</a></div>
</div>
</body>
</html>
第四款：参考网站：http://bluetrip.org/
参考代码：
<head>
<title>经典框架四</title>
<style>
body{
font-family:"微软雅黑";
color:#000000;
}
#top{
background-color:#f0f0f0;
height:465px;
margin-top:-8px;
}
#top1{
border:solid 1px #666666;
height:33px;
}
#top2{
border:solid 1px #0066FF;
width:930px;
height:350px;
margin:35px auto;
}
#rightside1{
width:280px;
float:right;
height:350px;
border:solid 1px #00FF00;
}
#leftside1{
border:solid 1px #3399FF;
width:520px;
height:350px;
}
#content{
border:solid 1px #FF9900;
width:930px;
height:500px;
margin:40px auto;
}
#leftside2{
border:solid 1px #FF99FF;
width:277px;
height:500px;
float:left;
}
#rightside2{
border:solid 1px #FF0000;
width:277px;
height:500px;
float:right;
}
#middleside2{
border:solid 1px #6600FF;
width:277px;
height:500px;
margin-left:325px;
}
#footer{
background-color:#f0f0f0;
height:70px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="top1">该处放置导航栏</div>
<div id="top2">
<div id="rightside1"></div>
<div id="leftside1"></div>
</div>
</div>
<div id="content">
<div id="leftside2"></div>
<div id="rightside2"></div>
<div id="middleside2"></div>
</div>
<div id="footer"><a href="http://bluetrip.org/">参考网站：http://bluetrip.org/</a></div>
</div>
</body>
</html>
第五款：参考网站：http://elasticss.com/
参考代码：
<head>
<title>经典框架五</title>
<style>
body{
font-family:"微软雅黑";
color:#FF0000;
}
#top{
border:solid 1px #000000;
height:205px;
margin-top:-8px;
}
#top1{
background-color:#031f36;
height:40px;
}
#top2{
background-color:#012d52;
height:105px;
}
#top3{
background-color:#0f4f81;
height:30px;
}
#top4{
background-color:#f4f4f4;
height:30px;
}
#content{
border:solid 1px #0000FF;
width:920px;
height:600px;
margin:15px auto;
}
#rightside{
border:solid 1px #FFCC33;
width:300px;
height:600px;
float:right;
}
#leftside{
border:solid 1px #CC00FF;
width:600px;
height:600px;
}
#footer{
margin-top:50px;
}
#footer1{
background-color:#031f36;
height:65px;
}
#footer2{
background-color:#012d52;
height:530px;
}
#footer3{
background-color:#0f4f81;
height:35px;
}
#footer2_up{
border:solid 0px #FFFFFF;
width:950px;
height:220px;
margin:0px auto;
margin-left:185px;
}
.detail{
width:200px;
height:220px;
float:left;
border:solid 1px #00CCFF;
margin-right:35px;
}
#footer2_below{
border:solid 0px #00FFFF;
width:950px;
height:215px;
margin-left:185px;
margin-top:25px;
}
.detail1{
width:200px;
height:170px;
float:left;
border:solid 1px #00CCFF;
margin-right:35px;
}
#title{
width:911px;
height:42px;
border:solid 1px #FF9900;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="top1">该处可放置网页标题</div>
<div id="top2">该处可放置Logo</div>
<div id="top3">该处可放置导航栏</div>
<div id="top4">该处可放置其他快捷链接</div>
</div>
<div id="content">
<div id="rightside"></div>
<div id="leftside"></div>
</div>
<div id="footer">
<div id="footer1"></div>
<div id="footer2">
<div><br/><br/></div>
<div id="footer2_up">
<div class="detail"></div>
<div class="detail"></div>
<div class="detail"></div>
<div class="detail"></div>
</div>
<div id="footer2_below">
<div id="title">该处可放置标题</div>
<div class="detail1"></div>
<div class="detail1"></div>
<div class="detail1"></div>
<div class="detail1"></div>
</div>
</div>
<div id="footer3"><a href="http://elasticss.com/">参考网站：http://elasticss.com/</a></div>
</div>
</div>
</body>
</html>
第六款：参考网站：http://easyframework.com/
参考代码：
<head>
<title>经典框架六</title>
<style>
body{
font-family:"微软雅黑";
color:#FF0000;
}
#top{
border:solid 1px #0000FF;
height:365px;
margin-top:-8px;
}
#top1{
border:solid 1px #FF0033;
height:65px;
background-color:#000000;
}
#top2{
border:solid 1px #33CC00;
background-color:#6e8889;
height:210px;
}
#top3{
border:solid 1px #FF00FF;
background-color:#d6d7d3;
height:84px;
}
#content{
border:solid 1px #9900FF;
width:900px;
height:410px;
margin:33px auto;
}
#content_up{
border:solid 1px #FF0000;
width:900px;
height:210px;
}
#content_up_left{
border:solid 1px #FF9900;
width:425px;
height:210px;
float:left;
}
#content_up_right{
border:solid 1px #CC00FF;
width:425px;
height:210px;
margin-left:472px;
}
#content_below{
border:solid 1px #66CCFF;
width:900px;
height:170px;
margin-top:26px;
}
#content_below_upside{
border:solid 1px #0000FF;
width:899px;
height:35px;
}
#content_below_blowside{
border:solid 1px #FF3300;
width:899px;
height:107px;
margin-top:25px;
}
.detail{
border:solid 1px #CC00FF;
width:180px;
height:107px;
float:left;
margin-right:57px;
}
.detail1{
border:solid 1px #CC00FF;
width:180px;
height:107px;
float:left;
}
#footer{
border:solid 1px #00CC00;
height:392px;
margin-top:45px;
}
#footer_up{
border:solid 1px #6633CC;
height:131px;
background-color:#d6d7d3;
}
#footer_below{
border:solid 1px #FF0000;
height:258px;
background-color:#595a55;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="top1">该处可放置导航栏</div>
<div id="top2">该处可放置banner</div>
<div id="top3">该处可放置搜索等等</div>
</div>
<div id="content">
<div id="content_up">
<div id="content_up_left"></div>
<div id="content_up_right"></div>
</div>
<div id="content_below">
<div id="content_below_upside">该处可放置标题</div>
<div id="content_below_blowside">
<div class="detail"></div>
<div class="detail"></div>
<div class="detail"></div>
<div class="detail1"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_up">该处可放置一个特殊的超链接，如下载之类的</div>
<div id="footer_below"><a href="http://easyframework.com/">参考网站：http://easyframework.com/</a></div>
</div>
</div>
</body>
</html>
第七款：参考网站：http://www.ez-css.org/
参考代码：
<head>
<title>经典框架七</title>
<style>
body{
background-image:url(file:///E|/LXSX/无标题-1.jpg);
background-repeat:repeat-y;
background-attachment:fixed;
font-family:"微软雅黑";
color:#FF0000;
}
#main{
border:solid 1px #0000FF;
width:800px;
margin:0px auto;
}
#top{
border:solid 1px #FF0000;
width:800px;
height:180px;
}
#top1{
border:solid 1px #66CC33;
width:800px;
height:120px;
}
#top2{
border:solid 1px #6600FF;
width:800px;
height:35px;
margin-top:22px;
}
#content{
border:solid 1px #FF0000;
width:800px;
height:700px;
margin-top:40px;
}
#rightside{
border:solid 1px #0099FF;
width:260px;
height:700px;
float:right;
}
#leftside{
border:solid 1px #CC00FF;
width:520px;
height:700px;
}
#footer{
border:solid 1px #CC0099;
width:800px;
height:400px;
margin-top:40px;
}
#footer_up{
border:solid 1px #6633FF;
width:800px;
height:300px;
}
#footer_below{
border:solid 1px #CC00CC;
width:800px;
height:80px;
margin-top:18px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="top1">该处放置banner</div>
<div id="top2">该处放置导航栏</div>
</div>
<div id="content">
<div id="rightside"></div>
<div id="leftside"></div>
</div>
<div id="footer">
<div id="footer_up">该处放置游客评论之类的</div>
<div id="footer_below"><a href="http://www.ez-css.org/">该处放置footer的常规东西<br/>参考网站：http://www.ez-css.org/</a></div>
</div>
</div>
</body>
</html>
第八款：参考网站：http://sandbox.pocoo.org/clevercss/
参考代码：
<head>
<link rel="shortcut icon" href="file:///E|/LXSX/974b3a192c6342e21c20a50989b5739c.ico" type="image/x-icon">
<title>经典框架八</title>
<style>
body{
background-color:#5edfdf;
font-family:"微软雅黑";
color:#6600FF;
}
#main{
border:solid 1px #0000CC;
width:617px;
margin:32px auto;
}
#top{
border:solid 1px #00FF00;
width:617px;
height:95px;
}
#content{
border:solid 1px #FF0000;
width:617px;
height:800px;
margin-top:30px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">该处放置banner</div>
<div id="content">整个content全部用来放内容，并且采用最简单的顺序排列<br/><a href="http://sandbox.pocoo.org/clevercss/">参考网站：http://sandbox.pocoo.org/clevercss/</a></div>
<div id="footer"></div>
</div>
</body>
</html>
第九款：参考网站：http://galleria.aino.se/support/
参考代码：
<head>
<title>经典框架九</title>
<style>
body{
background-image:url(file:///E|/LXSX/11.jpg);
font-family:"微软雅黑";
color:#000000;
}
#main{
border:solid 1px #0099FF;
width:864px;
margin:-8px auto;
}
#top{
border:solid 1px #FF0000;
width:864px;
height:125px;
}
#top1{
border:solid 1px #FF6600;
width:863px;
height:111px;
}
#top2{
border:solid 1px #FF99FF;
width:863px;
height:11px;
background-color:#eeeeee;
}
#content{
border:solid 1px #339900;
width:863px;
height:600px;
margin-top:40px;
}
#rightside{
border:solid 1px #0099CC;
width:217px;
height:600px;
float:right;
}
#leftside{
border:solid 1px #FF0066;
width:615px;
height:600px;
}
#footer{
border:solid 1px #660099;
width:863px;
height:40px;
margin-top:35px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="top1">该处放置banner和导航栏</div>
<div id="top2"></div>
</div>
<div id="content">
<div id="rightside"></div>
<div id="leftside"></div>
</div>
<div id="footer">该处可放置导航栏的副本，<a href="http://galleria.aino.se/support/">参考网站：http://galleria.aino.se/support/</a></div>
</div>
</body>
</html>
第十款：参考网站：http://sencss.kilianvalkhof.com/
参考代码：
<head>
<title>经典框架十</title>
<style>
body{
font-family:"微软雅黑";
color:#000000;
background-image:url(file:///E|/LXSX/无标题-2.jpg);
background-repeat:repeat;
}
#main{
border:solid 1px #0000FF;
width:556px;
margin:20px auto;
}
#top{
border:solid 1px #FF00FF;
width:556px;
height:70px;
}
#content{
border:solid 1px #FF0000;
width:556px;
height:600px;
margin-top:22px;
}
#upside{
border:solid 1px #6699FF;
width:556px;
height:80px;
}
#middleside{
border:solid 1px #6600FF;
width:556px;
height:250px;
margin-top:25px;
}
#rightside{
border:solid 1px #00CC00;
width:250px;
height:250px;
float:right;
}
#leftside{
border:solid 1px #FF9900;
width:150px;
height:250px;
}
#belowside{
border:solid 1px #FF0099;
width:556px;
height:220px;
margin-top:20px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">该处放logo</div>
<div id="content">
<div id="upside">该处放简介</div>
<div id="middleside">
<div id="rightside"></div>
<div id="leftside">该处放置常用下载的链接</div>
</div>
<div id="belowside"><a href="http://sencss.kilianvalkhof.com/">参考网站：http://sencss.kilianvalkhof.com/</a></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
第十一款：参考网站：http://code.google.com/p/emastic/
参考代码：
<head>
<title>经典框架十一</title>
<style>
body{
font-family:"微软雅黑";
color:#000000;
}
#main{
border:solid 1px #0000CC;
}
#top{
border:solid 1px #33CCFF;
height:177px;
margin-top:15px;
}
#top1{
border:solid 1px #FF3300;
height:100px;
}
#top2{
border:solid 1px #3333CC;
height:58px;
margin-top:16px;
}
#content{
border:solid 1px #FF0000;
height:500px;
margin-top:10px;
}
#rightside{
border:solid 1px #33CCFF;
width:1040px;
height:500px;
margin-left:287px;
}
#leftside{
border:solid 1px #CC33FF;
width:270px;
height:500px;
float:left;
}
#footer{
border:solid 1px #0066FF;
height:50px;
margin-top:70px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="top1">该处放banner</div>
<div id="top2">该处放导航栏</div>
</div>
<div id="content">
<div id="leftside"></div>
<div id="rightside"></div>
</div>
<div id="footer"><a href="http://code.google.com/p/emastic/">参考网站：http://code.google.com/p/emastic/</a></div>
</div>
</body>
</html>
第十二款：参考网站：http://lessframework.com/
参考代码：
<head>
<title>经典框架十二</title>
<style>
body{
background-color:#e8e8e8;
font-family:"微软雅黑";
color:#000000;
}
#top{
border:solid 1px #3300FF;
width:900px;
height:423px;
margin:82px auto;
}
#line1{
margin-top:-60px;
}
#content{
border:solid 1px #66CC66;
margin:25px auto;
}
#upside{
border:solid 1px #FF9900;
width:900px;
height:806px;
margin:0px auto;
}
#upside_top{
border:solid 1px #FF0033;
width:900px;
height:233px;
}
#upside_top_leftside{
border:solid 1px #FF00CC;
width:588px;
height:231px;
float:left;
}
#upside_top_rightside{
border:solid 1px #3399FF;
width:255px;
height:231px;
margin-left:643px;
}
#upside_below{
border:solid 1px #663399;
width:900px;
height:536px;
margin-top:34px;
}
#upside_below_top{
border:solid 1px #99CC00;
width:900px;
height:251px;
}
#upside_below_down{
border:solid 1px #99CC00;
width:900px;
height:251px;
margin-top:30px;
}
.detail1{
border:solid 1px #3399FF;
width:160px;
height:251px;
float:left;
}
.detail2{
border:solid 1px #66CC00;
width:247px;
height:251px;
float:left;
margin-left:25px;
margin-right:27px;
}
.detail3{
border:solid 1px #66CC00;
width:247px;
height:251px;
float:left;
margin-left:25px;
}
#line2{
margin-top:25px;
}
#middleside{
border:solid 1px #FF0000;
width:900px;
height:700px;
margin:80px auto;
}
#middleside_right{
border:solid 1px #6666FF;
width:345px;
height:700px;
float:right;
}
#middleside_left{
border:solid 1px #66FF99;
width:515px;
height:700px;
}
#line3{
margin-top:-50px;
}
#belowside{
border:solid 1px #FFCC33;
width:900px;
height:800px;
margin:80px auto;
}
#belowside_top{
border:solid 1px #FF6699;
width:900px;
height:248px;
}
#belowside_down{
border:solid 1px #00CC00;
width:900px;
height:490px;
margin-top:58px;
}
#belowside_down_left{
border:solid 1px #6666CC;
width:257px;
height:490px;
float:left;
}
#belowside_down_right{
border:solid 1px #FF9966;
width:615px;
height:490px;
margin-left:283px;
}
#line4{
margin-top:-35px;
}
#footer{
border:solid 1px #FF0000;
width:900px;
height:150px;
margin:35px auto;
}
</style>
</head>
<body>
<div id="main">
<div id="top"></div>
<hr color="#c3c3c3" id="line1" />
<div id="content">
<div id="upside">
<div id="upside_top">
<div id="upside_top_leftside"></div>
<div id="upside_top_rightside"></div>
</div>
<div id="upside_below">
<div id="upside_below_top">
<div class="detail1"></div>
<div class="detail2"></div>
<div class="detail1"></div>
<div class="detail3"></div>
</div>
<div id="upside_below_down">
<div class="detail1"></div>
<div class="detail2"></div>
<div class="detail1"></div>
<div class="detail3"></div>
</div>
</div>
</div>
<hr color="#c3c3c3" id="line2"/>
<div id="middleside">
<div id="middleside_right"></div>
<div id="middleside_left"></div>
</div>
<hr color="#c3c3c3" id="line3" />
<div id="belowside">
<div id="belowside_top">该处放置标题和简介</div>
<div id="belowside_down">
<div id="belowside_down_left"></div>
<div id="belowside_down_right"></div>
</div>
</div>
<hr color="#c3c3c3" id="line4"/>
</div>
<div id="footer"><a href="http://lessframework.com/">参考网站：http://lessframework.com/</a></div>
</div>
</body>
</html>
第十三款：参考网站：http://elements.projectdesigns.org/
参考代码：
<head>
<title>经典框架十三</title>
<style>
body{
background-color:#b1da67;
font-family:"微软雅黑";
color:#FFFFFF;
}
#main{
border:solid 1px #FF3300;
margin:50px auto;
}
#top{
border:solid 1px #0099FF;
height:111px;
background-color:#72a226;
}
#content{
border:solid 1px #FF0099;
width:751px;
height:900px;
margin:0px auto;
background-color:#d8ecb3;
}
#rightside{
border:solid 1px #3399FF;
width:161px;
height:880px;
float:right;
margin-top:20px;
margin-right:37px;
}
#leftside{
border:solid 1px #FF3300;
width:469px;
height:880px;
margin-top:20px;
margin-left:45px;
}
#footer{
border:solid 1px #3366FF;
width:751px;
height:25px;
background-color:#6a9923;
margin:0px auto;
}
</style>
</head>
<body>
<div id="main">
<div id="top">该处可放logo和导航栏</div>
<div id="content">
<div id="rightside"></div>
<div id="leftside"></div>
</div>
<div id="footer"><a href="http://elements.projectdesigns.org/">参考网站：http://elements.projectdesigns.org/</a></div>
</div>
</body>
</html>
第十四款：参考网站：http://www.1kbgrid.com/
参考代码：
<head>
<title>经典框架十四</title>
<style>
body{
font-family:"微软雅黑";
color:#000000;
}
#main{
border:solid 1px #FF0000;
}
#top{
border:solid 1px #0066FF;
width:943px;
height:100px;
margin-top:100px;
margin-left:195px;
}
#content{
border:solid 1px #3333CC;
height:425px;
margin-top:30px;
}
#content_up{
border:solid 1px #FF3300;
background-color:#f0f0f0;
height:181px;
}
#content_up_detail{
border:solid 1px #33CC00;
width:943px;
height:143px;
margin-left:195px;
margin-top:18px;
}
#content_below{
border:solid 1px #FF3300;
width:943px;
height:200px;
margin-top:40px;
margin-left:195px;
}
#content_below_left{
border:solid 1px #FF0066;
width:300px;
height:200px;
float:left;
}
#content_below_right{
border:solid 1px #FF0066;
width:300px;
height:200px;
float:right;
}
#content_below_middle{
border:solid 1px #FF0066;
width:300px;
height:200px;
margin-left:320px;
}
#footer{
border:solid 1px #CC0099;
height:80px;
background-color:#fdfefd;
margin-top:35px;
}
#footer_detail{
border:solid 1px #CC66CC;
width:943px;
height:40px;
margin-left:195px;
margin-top:20px;
}
</style>
</head>
<body>
<div id="main">
<div id="top"></div>
<div id="content">
<div id="content_up">
<div id="content_up_detail">该处可放广告之类的</div>
</div>
<div id="content_below">
<div id="content_below_left"></div>
<div id="content_below_right"></div>
<div id="content_below_middle"></div>
</div>
</div>
<div id="footer">
<div id="footer_detail"><a href="http://www.1kbgrid.com/">参考网站：http://www.1kbgrid.com/</a></div>
</div>
</div>
</body>
</html>
第十五款：参考网站：http://www.contentwithstyle.co.uk/content/a-css-framework/
参考代码：
<head>
<title>经典框架十五</title>
<style>
body{
font-family:"微软雅黑";
color:#000000;
}
#top{
border:solid 1px #0066FF;
height:183px;
margin-top:-8px;
}
#top1{
border:solid 1px #FF6600;
height:61px;
background-color:#67af2f;
}
#top2{
border:solid 1px #CC0000;
height:122px;
background-color:#f2f2f2;
}
#detail1{
border:solid 1px #CC66CC;
width:863px;
height:30px;
margin-left:246px;
margin-top:13px;
}
#detail2{
border:solid 1px #FF9966;
width:863px;
height:122px;
margin-left:246px;
}
#content{
border:solid 1px #FF0000;
width:492px;
height:800px;
margin-left:248px;
margin-top:60px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="top1">
<div id="detail1">该处放导航栏</div>
</div>
<div id="top2">
<div id="detail2">该处放banner</div>
</div>
</div>
<div id="content"><a href="http://www.contentwithstyle.co.uk/content/a-css-framework/">参考网站：http://www.contentwithstyle.co.uk/content/a-css-framework/</a></div>
<div id="footer"></div>
</div>
</body>
</html>
第十六款：参考网站：http://www.yaml.de/en/
参考代码：
<head>
<title>经典框架十六</title>
<style>
body{
font-family:"微软雅黑";
color:#FF0000;
background-color:#404347;
}
#main{
border:solid 1px #FFFFFF;
width:1171px;
margin:-8px auto;
}
#top{
border:solid 1px #0099FF;
height:145px;
}
#top1{
border:solid 1px #FF0000;
height:81px;
background-color:#242424;
}
#top2{
border:solid 1px #6633FF;
height:33px;
background-color:#050505;
}
#top3{
border:solid 1px #FFFF00;
height:26px;
background-color:#4e5155;
}
#content{
height:733px;
background-color:#FFFFFF;
}
#rightside{
border:solid 1px #0033FF;
width:362px;
float:right;
margin-top:37px;
margin-right:22px;
height:662px;
}
#leftside{
border:solid 1px #33CC00;
width:731px;
float:left;
height:662px;
margin-top:37px;
margin-left:22px;
}
#footer{
border:solid 1px #FF9933;
height:365px;
}
#footer1{
border:solid 1px #FF0099;
height:289px;
background-color:#63686c;
}
#footer1_left{
border:solid 1px #FF0000;
width:350px;
float:left;
margin-left:22px;
margin-top:40px;
height:230px;
}
#footer1_right{
border:solid 1px #FF0000;
width:350px;
float:right;
margin-right:22px;
margin-top:40px;
height:230px;
}
#footer1_middle{
border:solid 1px #FF0000;
width:350px;
margin-top:40px;
height:230px;
margin-left:407px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="top1">该处放banner</div>
<div id="top2">该处放导航栏</div>
<div id="top3">该处放搜索栏</div>
</div>
<div id="content">
<div id="rightside"></div>
<div id="leftside"></div>
</div>
<div id="footer">
<div id="footer1">
<div id="footer1_left"></div>
<div id="footer1_right"></div>
<div id="footer1_middle"></div>
</div>
<div id="footer2"><a href="http://www.yaml.de/en/">参考网站：http://www.yaml.de/en/</a></div>
</div>
</div>
</body>
</html>
第十七款：参考网站：http://compass-style.org/
参考代码：
<head>
<title>经典框架十七</title>
<style>
body{
background-color:#2f2f2f;
font-family:"微软雅黑";
color:#FFFFFF;
}
#main{
border:solid 1px #FFFFFF;
width:773px;
margin:30px auto;
}
#top{
border:solid 1px #FFFF00;
height:243px;
}
#top1{
border:solid 1px #66FF00;
height:24px;
}
#top2{
border:solid 1px #FF3300;
height:191px;
margin-top:25px;
}
#content{
border:solid 1px #00CCFF;
margin-top:30px;
}
#upside{
border:solid 1px #FF33FF;
height:264px;
}
#upside_left{
border:solid 1px #CCFF00;
width:435px;
height:264px;
float:left;
}
#upside_right{
border:solid 1px #FF9999;
width:317px;
height:264px;
margin-left:450px;
}
#middleside{
border:solid 1px #33FFFF;
height:646px;
margin-top:35px;
}
#middleside_left{
border:solid 1px #9933FF;
width:249px;
height:646px;
float:left;
}
#middleside_right{
border:solid 1px #9933FF;
width:249px;
height:646px;
float:right;
}
#middleside_middle{
border:solid 1px #9933FF;
width:249px;
height:646px;
margin-left:259px;
}
#downside{
border:solid 1px #FFCC99;
height:324px;
margin-top:60px;
}
#downside_right{
border:solid 1px #FFFF00;
width:364px;
height:324px;
float:right;
}
#downside_left{
border:solid 1px #FFFF99;
width:364px;
height:324px;
}
#footer{
border:solid 1px #33FFCC;
height:60px;
margin-top:50px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<div id="top1">该处放导航栏</div>
<div id="top2">该处放banner</div>
</div>
<div id="content">
<div id="upside">
<div id="upside_left"></div>
<div id="upside_right"></div>
</div>
<div id="middleside">
<div id="middleside_left"></div>
<div id="middleside_right"></div>
<div id="middleside_middle"></div>
</div>
<div id="downside">
<div id="downside_right"></div>
<div id="downside_left"></div>
</div>
</div>
<div id="footer"><a href="http://compass-style.org/">参考网站：http://compass-style.org/</a></div>
</div>
</body>
</html>
