HTML5新增标签

最新推荐文章于 2024-11-11 09:43:10 发布

原创最新推荐文章于 2024-11-11 09:43:10 发布 · 267 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS进行网页布局的方法，包括header、nav、aside、article和footer等元素的应用，以及如何通过CSS设置宽度、高度、背景颜色和浮动属性来实现响应式设计。

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        * {margin: 0;padding: 0;}
        header {width: 1100px;height: 100px;background: #f00;margin: 0 auto;}
        nav {height: 60px;background: #000;}
        .layout {width: 960px;background: #eee;margin: 0 auto;overflow: hidden;}
        aside {width:250px;background: #0f0;min-height: 300px;float: left;}
        article {background: #00f;overflow: hidden;}
        section {width: 300px;height: 300px;background: #0ff;float: left;margin-right: 20px;margin-bottom: 20px;}
        footer {width: 1100px;height: 80px;background: #000;margin: 0 auto;}
        </style>
    </head>
    <body>
        <header></header>
        <nav></nav>
        <div class="layout">
            <aside>左栏</aside>
            <article>
                <section>
                    <figure>
                        <img src="xiyou.png"/>
                      
                        <figcaption>西安邮电大学</figcaption>
                    </figure>
                </section>
                <section></section>
            </article>
        </div>
        <footer></footer>
    </body>
</html>

在这里插入图片描述