html中div排版布局

最新推荐文章于 2024-07-28 08:03:31 发布

水星灭绝

最新推荐文章于 2024-07-28 08:03:31 发布

阅读量2.5k

点赞数 3

分类专栏： h5

本文链接：https://blog.csdn.net/wulong710/article/details/108562210

版权

h5 专栏收录该内容

121 篇文章 3 订阅

订阅专栏

html布局

参考：https://www.runoob.com/html/html-layouts.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>布局</title>
</head>

<body>
  <div id="container" style="width: 450px;">
    <div id="header" style="background-color: #ffa500;">
      <h1 style="margin-bottom: 0; color: blue;">主要课程</h1>
    </div>

    <div id="menu" style="background-color: #ffd700; height: 200px; width: 100px; float:left">
      <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
      </ul>
    </div>

    <div id="content" style="background-color: #EEEEEE; height: 200px; width: 350px; float:left; text-align: center;">
      在这里显示内容</div>
    <div id="footer" style="background-color: #FFA500;width:450px;text-align: center;">
      版权@yy</div>
  </div>

</body>

</html>

结果：