divcss布局经典实例代码-css教程-PHP中文网

divcss布局经典实例代码

下次还敢

发布： 2024-07-30 02:28:22

原创

886人浏览过

DIV+CSS 布局是通过使用 HTML 的 DIV 元素和 CSS 样式表控制网页布局的。经典实例代码：HTML 代码：定义容器、标题、侧栏、正文和页脚等元素。CSS 代码：设置布局样式，包括宽度、高度、背景颜色和对齐方式等。效果：创建具有标题、侧栏、正文内容和页脚的网页布局。

divcss布局经典实例代码

DIV+CSS 布局经典实例代码

DIV+CSS 布局是 Web 开发中广泛使用的一种布局技术，它通过使用 HTML 的 DIV 元素和 CSS 样式表来控制网页的布局。以下是 DIV+CSS 布局的经典实例代码：

HTML 代码：

<code class="html"><div class="container">
  <div class="header">
    <h1>标题</h1>
  </div>
  <div class="content">
    <div class="sidebar">
      <ul>
        <li>菜单项 1</li>
        <li>菜单项 2</li>
      </ul>
    </div>
    <div class="main">
      <p>正文内容</p>
    </div>
  </div>
  <div class="footer">
    <p>页脚</p>
  </div>
</div></code>

登录后复制

CSS 代码：

立即学习“前端免费学习笔记（深入）”；

<code class="css">.container {
  width: 100%;
  height: 100%;
}

.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

.content {
  display: flex;
  flex-direction: row;
}

.sidebar {
  width: 20%;
  background-color: #dddddd;
}

.main {
  width: 80%;
}

.footer {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}</code>

登录后复制

效果：