<!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>
</head>
<style>
    header{
        width: 120px;
        margin: 0 auto;
    }
    header omg{
        display: inline-block;
        width: 200px;
        vertical-align: middle;
    }
    header nav{
        display: inline-block;
        margin-left: 140px;
        
    }
    article{
        border: 1px solid black;
        width: 200px;
        float: left;

    }
    aside{
        /* display: inline-block; */
        float: right;
         border: 1px solid black;
        width: 200px;


    }
    main{
        overflow: auto;
        /* position: static; */
    }
    footer{
        text-align: center;
    }
</style>
<body>
    <header>
        <img src="../assets/cd.png" alt="logo">
        <nav>
          <a href="">html5</a>
          <a href="">css3</a>
          <a href="">js</a>
        </nav>
      </header>
      <main>
        <article>
          <h1>html5+css3</h1>
          <p>html5+css3讲解</p>
          <section>
            <h4>html5</h4>
            <p>html5是html的最新版本........</p>
          </section>
          <section>
            <h4>css3</h4>
            <p>css3新特性...........</p>
          </section>
        </article>
        <aside>
          <h1>html5结构元素</h1>
          <p>header、footer、section.....</p>
          <nav>
            <ul>
              <li><a href="">html5</a></li>
              <li><a href="">css3</a></li>
              <li><a href="">js</a></li>
            </ul>
          </nav>
        </aside>
        
      </main>
      <footer>
        <p>Copyright ©️2022</p>
      </footer> 
</body>
</html>

 

 

 

 https://blog.csdn.net/always_die0/article/details/108296195

版权声明：本文为weakup原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/yyy1234/p/16433609.html