布局练习 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            
            .w{
                width: 1000px;
                margin:auto;
            }
            
            header{
                height: 150px;
                background-color: #bfa;
            }
            
            main.w{
                height: 500px;
                background-color: #ff0;
                margin: 10px auto;
            }
            
            main nav{
                width: 190px;
                height: 100%;
                background-color: #00FFFF;
                float: left;
            }
            
            main section{
                width: 600px;
                height: 100%;
                background-color: #FF0000;
                float: left;
                margin: 0 10px;
            }
            
            main aside{
                width: 190px;
                height: 100%;
                background-color: green;
                float: left;
            }
            
            footer{
                
                height: 150px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <header class="w"></header>
        <main class="w">
            <nav></nav>
            <section></section>
            <aside></aside>
        </main>
        <footer class="w"></footer>
    </body>
</html>

 

posted @ 2022-05-17 17:00  氯丙嗪  阅读(12)  评论(0)  编辑  收藏  举报