在網上看到某仁兄關於這個問題討論了下，所以 利用業餘時間寫寫這個，用來學習下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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
