Html5---div布局方式

这篇文章距离上次修改已过433天，其中的内容可能已经有所变动。

在HTML5中，可以使用多种方式来进行div布局。以下是一些常用的方法：

使用传统的CSS进行布局：




<!DOCTYPE html>
<html>
<head>
<style>
  .header {
    background-color: #DDDDDD;
    padding: 20px;
    text-align: center;
  }
  
  .nav {
    float: left;
    width: 20%;
    background-color: #DDDDDD;
  }
  
  .section {
    float: left;
    width: 80%;
    padding: 20px;
  }
 
  .footer {
    clear: both;
    text-align: center;
    background-color: #DDDDDD;
    padding: 20px;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>我的网站</h1>
  <p>一个简单的响应式布局示例</p>
</div>
 
<div class="nav">
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">联系</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</div>
 
<div class="section">
  <h2>主要部分</h2>
  <p>这里是主要的内容...</p>
</div>
 
<div class="footer">
  <p>版权 &copy; 2023</p>
</div>
 
</body>
</html>

使用CSS Flexbox布局：




<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    background-color: #DDDDDD;
  }
  
  .flex-header {
    flex: 1;
    text-align: center;
    padding: 20px;
  }
  
  .flex-nav {
    flex: 1;
    text-align: center;
    padding: 20px;
  }
  
  .flex-section {
    flex: 3;
    padding: 20px;
  }
 
  .flex-footer {
    flex: 1;
    text-align: center;
    padding: 20px;
  }
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-header">
    <h1>我的网站</h1>
    <p>一个简单的Flexbox布局示例</p>
  </div>
  
  <div class="flex-nav">
    <ul>
      <li><a href="#">主页</a></li>
      <li><a href="#">联系</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </div>
 
  <div class="flex-section">
    <h2>主要部分</h2>
    <p>这里是主要的内容...</p>
  </div>
 
  <div class="flex-footer">
    <p>版权 &copy; 2023</p>
  </div>
</div>
 
</body>
</html>

使用CSS Grid布局：




<!DOCTYPE html>
<html>
<head>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    background-color: #DDDDDD;
  }
  
  .grid-header {
    text-align: center;
    padding: 20px;
  }
  
  .grid-nav {
    text-align: center;
    padding: 20px;
  }
  
  .grid-section {
    padding: 20px;

Html5---div布局方式

评论已关闭

推荐阅读