在网上看到某仁兄关于这个问题讨论了下，所以 利用业余时间写写这个，用来学习下CSS.很简单的运用例子。
<html>
<head>
<title>用CSS设计的三列式布局--喜喜设计</title>
<style type="text/css">
*{margin:0;padding:0;font-size:1em;}
#header{width:1002px;height:100px;margin:0 auto; background:#06f;}
#divall {width:1002px;height:400px; margin:0 auto; background:#fff;}
#sider_a {width:220px;height:400px; float:left; background:#f93;}
#main {width:580px; height:400px; float:left; margin-left:6px; background:#dceafc;}
#sider_b {width:190px; height:400px; float:right; background:#ccc;}
#footer {clear:bothl; width:1002px; height:60px; margin:0 auto; background:#999;}
#header h1{color:#fff;font-size:2em;font-family:Arial;position:relative;top:20px;left:20px;}
#header h2{color:#fff;font-size:1em;position:relative;top:30px;left:80px;}
#divall p{color:#000;font-size:1em;text-indent:2em;line-height:2em;margin:10px 5px;}
#fonter p{color:#fff;font-size:2em;line-height:60px;text-align:center;}
#fonter p a{color:#fff;}
</style>
</head>
<body>
<div id="header">
<h1>喜喜工作室-----</h1>
<h2>希望自己能学更多的东西然后为我们西部做点贡献~~</h2>
</div>
<div id="divall">
<div id="sider_a">
<font size=6>A版面</font>
</div>
<div id="main">
<p>
<font size=6>B版面</font>
喜喜工作室 关于CSS设计三列式布局。
<br>
学习之余 关于学习。
</p>
</div>
<div id="sider_b">
<font size=6>C版面</font>
</div>
<br style="clear:both;"/>
</div>
<div id="footer" align="center">
<p>
<a href="http://happyprince.cnblogs.com/">喜喜工作blog 版权所有</a>
<br>
希望可以多多交流！QQ:313315714
</br>
</p>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
