08.页面布局的简单尝试

最新推荐文章于 2024-10-29 14:54:04 发布

Edshine

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量74

点赞数

分类专栏： HTML&&CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/Edshine/article/details/120338813

版权

HTML CSS 布局样式网页设计

关键词由CSDN通过智能技术生成

HTML&&CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header,main,footer{
            width:1000px;
            margin:0 auto;
        }
        header{
            height:150px;
            background-color:silver; 
        }

        main{        
            height:500px;
            background-color:#bfa;
            margin:10px auto;         
        }
        nav{
            float: left;
            width:200px;
            height:100%;
            background-color:orange;
        }
        article{
            margin:0 10px;
            float: left;
            width:580px;
            height:100%;
            background-color:yellow;
        }
        aside{
            float:left;
            width:200px;
            height:100%;
            background-color:pink;
        }

        footer{          
            height: 150px;
            background-color:red;
        }
    </style>
</head>
<body>
    <header></header>
    <main>
        <nav></nav>
        <article></article>
        <aside></aside>
    </main>
    <footer></footer>
</body>
</html>