Html 使用div标记进行布局_Html_Css

Html 使用div标记进行布局

html css

Html 使用div标记进行布局,html,css,Html,Css,我不擅长为页面制作布局和设计，但我已经花了大约2个小时研究如何使用div标签制作这种布局。看起来页眉和正文一分为二，而页脚只是底部的一个小条。有人能给出我的想法吗？下面的html代码是两列简单布局。我想这就是你要找的 <!doctype html> <html> <head> <title>This is simple css layout us

我不擅长为页面制作布局和设计，但我已经花了大约2个小时研究如何使用div标签制作这种布局。看起来页眉和正文一分为二，而页脚只是底部的一个小条。有人能给出我的想法吗？

下面的html代码是两列简单布局。我想这就是你要找的

            <!doctype html>
            <html>
            <head>
                <title>This is simple css layout using divs.</title>
                <style>
                    *{
                        margin: 0;
                        padding: 0;
                    }

                    .header{
                        width: 100%;
                        height: 40px;
                        background-color: #aaaaaa;
                        padding: 10px;
                    }

                    .contain{
                        padding: 15px;
                    }

                    .leftContain{
                        width: 49%;
                        height: 300px;
                        background-color: green;
                        float: left;
                    }

                    .rightContain{
                        width: 49%;
                        height: 300px;
                        background-color: blue;
                        float: right;
                    }

                    p{
                        padding: 10px;
                    }

                    .footer{
                        width: 100%;
                        height: 40px;
                        background-color: #aaaaaa;
                        padding: 10px;
                    }

                    .clear{
                        clear: both;
                    }

                </style>
            </head>
            <body>
                <div class="container">

                    <div class="header">
                        <h4>Menu</h4>
                    </div>  <!-- end of header-->

                    <div class="contain">

                        <div class="leftContain">
                            <p>division 1</p>
                        </div>  <!-- end of leftContain -->

                        <div class="rightContain">
                            <p>division 2</p>
                        </div>  <!-- end of rightContain -->

                        <div class="clear"></div>

                    </div>  <!-- end of contain -->


                    <div class="footer">
                        <h4>footer</h4>
                    </div>  <!-- end of footer -->

                </div>  <!-- end of container -->
            </body>
            </html>

你想要达到什么样的布局？你能分享你的html，让我们看看你到目前为止做了什么吗？签出框架，如或Bootstraphow，使这种布局可能需要提供更多的信息，如果你能分享一些你尝试过的代码会更好。