divcss布局经典实例代码

<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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>    </div>  </div>  <div class="footer">    <p>页脚</p>  </div></div>

.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;}