div+css布局之固定浮动布局

最新推荐文章于 2025-05-26 17:55:13 发布

alex_zuo

最新推荐文章于 2025-05-26 17:55:13 发布

阅读量453

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/sisyphus_z/article/details/84232573

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的固定浮动布局方案，包括顶部标题、左侧导航、主要内容区域及右侧导航，底部版权等部分，并详细说明了各部分的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定浮动布局-三列</title>
<link rel="stylesheet" style="text/css" href="style2.css">
</head>

<body>
    <div id="header"><h1>上标题</h1></div>
    <div id="body">
        <div id="navl">左导航</div>
        <div id="main">中内容</div>
        <div id="navr">右导航</div>
    </div>
    <div id="footer"><p>下版权</p></div>
</body>
</html>

/* CSS Document */
*{
    margin:0;
    padding:0;
}
body{
    margin:10px;
}
#header{
    border:1px solid black;
    width:600px;
    height:60px;
    margin:0 auto;
    margin-bottom:10px;
}
#header h1{
    height:60px;
    line-height:60px;
    font-size:16px;
    text-align:center;
}
#body{
    width:600px;
    margin:0 auto;
}
#navl{
    border:1px solid black;
    width:150px;
    height:500px;
    float:left;
    margin-bottom:10px;
    background:lightcyan;
}
#main{
    border:1px solid black;
    width:294px;/*边框也算一个像素*/
    height:500px;
    float:left;
    margin-bottom:10px;
    background:lightblue;
}
#navr{
    border:1px solid black;
    width:150px;
    height:500px;
    float:right;
    margin-bottom:10px;
    background:lightyellow;
}
#footer{
    border:1px solid black;
    width:600px;
    height:60px;
    line-height:60px;
    margin:0 auto;
    text-align:center;
    clear:both;
}

效果如下：