学习完成CSS布局(左右浮动)

最新推荐文章于 2025-09-11 10:42:34 发布

转载最新推荐文章于 2025-09-11 10:42:34 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangchuanyang/p/6277570.html

文章标签：

#xhtml

本文介绍了一个使用HTML和CSS实现的基本网页布局案例。通过定义不同的区块如头部(header)、主体(main)、左侧(lside)、右侧(rside)及底部(footer)，并设置各自的宽高和背景颜色，展示了如何进行网页布局。同时利用CSS的浮动属性实现左右两侧内容的并排显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>学习完成布局</title>
        <style type="text/css">
            #kaishi{
                width: 980px;      /* width宽度*/
                background: gray;                
            }
            #header{
                height: 200px;      /*height高度*/
                background: red;
            }
            #main{
                height: 600px;
                background: chartreuse;
            }
            #lside{
                width: 700px;
                float: left;          /*浮动左*/
                height: 600px;
                background: blue;
            }
            #rside{
                width: 300px;
                float: right;       /*浮动右*/
                height: 600px;
                background: coral;
            }
            #footer{
                height: 100px;
                background: darkgoldenrod;
            }
        </style>
    </head>
    <body>
        <div id="kaishi">            
            <div id="header"></div>
            <div id="main">    
                <div id="lside"></div>
                <div id="rside "></div>
            </div>
            <div id="footer"></div>
        </div>
    </body>
</html>