如何实现这个的代码怎么写啊

img

有帮助，望采纳。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            #body{
                position: relative;
                margin: 20px auto;
                height: 350px;
                width: 700px;
            }
            div,p{
                margin: 5px;
                padding: 5px;
                border: 2px solid #00FFFF;
            }
            #section {
                position: absolute;
                left: 5px;
                width: 65%;
                height: 150px;
            }
            #aside{
                position: absolute;
                right: 5px;
                width: 25%;
                height: 150px;
            }
            #footer{
                position: absolute;
                width: 675px;
                bottom: 0px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div id="body" align="center">
            Body
            <div id="header">
                &lt;div id="header"&gt;&lt;/div&gt;
                <div id="nav">&lt;div id="nav"&gt;&lt;/div&gt;</div>
            </div>
            
            <div id="section">
                &lt;div id="section"&gt;&lt;/div&gt;
                <div id="article">
                    &lt;div id="article"&gt;&lt;/div&gt;
                </div>
                <p>&lt;p&gt;&lt;/p&gt;</p>
                <div class="footer">
                    &lt;div class="footer"&gt;&lt;/div&gt;
                </div>
            </div>
            <div id="aside">
                &lt;div id="aside"&gt;&lt;/div&gt;
            </div>
            <div id="footer">
                &lt;div id="footer"&gt;&lt;/div&gt;
            </div>
        </div>
    </body>
</html>

img

按照顺㡰把设定div还有各种css样式这些就行了