简单布局演示

2023年01月13日 23:45:48阅读数:64博客 / 追梦赤子

简单布局演示

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>简单布局演示</title>
  6. </head>
  7. <body>
  8. <!--1. div+id布局-->
  9. <div id="header">页眉</div>
  10. <div id="main">主体</div>
  11. <div id="footer">页脚</div>
  12. <!--2. div+class布局-->
  13. <div class="header">页眉</div>
  14. <div class="main">主体</div>
  15. <div class="footer">页脚</div>
  16. <!--3. 语义化布局-->
  17. <header>页眉</header>
  18. <main>主体</main>
  19. <footer>页脚</footer>
  20. <!--4. 优化div+class布局-->
  21. <div class="article header">文章页眉</div>
  22. <div class="article main">文章主体</div>
  23. <div class="article footer">文章页脚</div>
  24. </body>
  25. </html>
批改状态:合格

老师批语:一篇文章只需要一个作业博客就可以了

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    追梦赤子
    博文
    7
    粉丝
    0
    评论
    0
    访问量
    742
    积分:0
    P豆:14