XuGang

记录一个程序员的成长

 

使用CSS 排版网页布局

 

代码如下：

 

<html>
<head>
<style type="text/css">
<!--
body {
    margin:0px;
    font-size:13px;
    font-family:Arial;
} 
#container{
    position:relative;
    width:100%;
}
#banner{
    height:80px;
    border:1px solid #000000;
    text-align:center;
    background-color:#a2d9ff;
    padding:10px;
    margin-bottom:2px;
}
#content{
    float:left;
    text-align:center;
    padding-right:200px;    /* 内容往回挤200px */
}
#links{
    float:right;
    width:200px;
    border:1px solid #000000;
    margin-left:-200px;        /* 强行往左拉回200px */
    text-align:center;
}
#footer{
    clear:both;                /* 不受float影响 */
    text-align:center;
    height:30px;
    border:1px solid #000000;
}
-->
</style>
<title>CSS排版</title><body>
<div id="container">
    <div id="banner">banner</div>
    <div id="content">
        <div class="blog">
            <div class="date">date</div>
            <div class="blogcontent">
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
            </div>
        </div>
        <div class="others">others</div>
    </div>
    <div id="links">
        <div class="calendarhead">links<br>links<br>links<br>links</div>
        <div class="calendartable">links<br>links<br>links<br>links</div>
        <div class="side">links<br>links<br>links<br>links</div>
        <div class="syndicate">links<br>links<br>links<br>links</div>
        <div class="friends">links<br>links<br>links<br>links</div>
    </div>
    <div id="footer">footer</div>
</div>
</body>
</html>

 

运行效果如下：


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 

posted on 2010-08-07 15:20  钢钢  阅读(1328)  评论(1)    收藏  举报

导航