25
2008
03

CSS代码之三栏布局一

最近对CSS三栏比较感兴趣,可能是实施过程中碰到的奇怪问题太多的缘故吧.虽然他用的不是很多.对这非主流的东西还是比较喜欢

写了一些三栏布局CSS代码,今天又在一国外网站上看了10来种CSS三栏布局的文章,决定把这些文章总结下来.和大家分享下。

今天学习的是一个非常有趣的三栏.下面是他的代码,和一些解析.详细明了的可以点击这里查看,这中布局很特别,非常有意思,思路应该就是一个字"撑"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS代码|CSS三栏布局一</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}/*左边部分*/
div#extra{background:#FF8539}  /*右边部分*/
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%}
div#content{margin: 0 25%}   /*中间部分*/
div#navigation{float:left;width:25%;margin-left:-100%}/*左边部分*/
div#extra{float:left;width:25%;margin-left:-25%}
div#footer{clear:left;width:100%}
.red{
color:red
}
.white{
color:#FFFFFF}
</style>
</head>
<body>
<div id="container">
 <div id="header"><h1>CSS代码之CSS三栏布局一</h1></div>
 <div id="wrapper">
  <div id="content">
  <p><strong>1)这是主要部分.</strong>中间这一列是属于自动适应的一列,它向左右两边都自适应缩进25%的宽度</p>
  <p>中间部分样式为<font color="#FF0000">div#content{margin: 0 25%}</font>  </p>
  <p><font color="#FF0000">这里比较重要的一个就是中间div#content是嵌套在div#wrapper里面的。这样才能让左右两边的样式margin产生效果。</font> </p>
  <p>这个三栏布局非常有意思啊。 </p>
  <p>这个三栏布局非常有意思啊。 </p>
  <p>这个三栏布局非常有意思啊。 </p>
  <p>这个三栏布局非常有意思啊。 </p>
  <p>这个三栏CSS代码还是全屏的哦。 </p>
  </div>
 </div>
 <div id="navigation">
  <p><strong>2) 左边部分在这里.</strong> 这里是左边。 </p>
  <p class="red">这里的代码是div#navigation{float:left;width:25%;margin-left:-100%},这里的-100%导致div#navigation永远会占这左边的位置。</p>
  <p>全屏是我的功劳,嘎嘎。。</p>
 </div>
 <div id="extra">
  <p><strong>3)这里是右边部分.</strong> 这里是右边部分</p>
  <p class="white">这里的代码div#extra{float:left;width:25%;margin-left:-25%},这里的-25%是在div#navigation的基础上显示的,所以有种被推到右边的感觉。</p> 
  <p>右边。。。。</p>
  <p>右边。。。。</p>
  <p>右边。。。。</p>
  <p>右边。。。。</p>
  </div>
 <div id="footer"><p><a href="
http://www.monring.com">Two Man</a>,CSS代码,CSS三栏布局,这里放个站长统计看下<script src='http://s87.cnzz.com/stat.php?id=790806&web_id=790806&show=pic' language='JavaScript' charset='gb2312'></script></p></div>
</div>
</body>
</html>

我只是做了些小小的解析,初学不深,有朋友找出错误,希望能留言告知我.让我们一起学习。

« 上一篇下一篇 »

相关文章:

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。