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   钢钢  阅读(1323)  评论(1)  编辑  收藏  举报

编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
历史上的今天：
2007-08-07 国内八家域名注册商优缺点比较(转)

导航

统计

点击右上角即可分享
微信分享提示
SQL AI 助手