DIV+CSS三种页面布局

三种常用的CSS页面布局是：固定宽度布局、流体布局和响应式布局。以下是每种布局的简单示例：

固定宽度布局：




<div style="width: 960px; margin: 0 auto;">
  页面内容
</div>

流体布局：




<div style="width: 100%;">
  页面内容
</div>

响应式布局（使用媒体查询实现）：




<div class="container">
  页面内容
</div>
 
<style>
  .container {
    width: 100%;
  }
 
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
 
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
 
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
</style>

这些布局方式可以根据页面内容和设计需求灵活选择和组合使用。固定宽度布局适合静态或简单页面，流体布局适合响应式设计，而响应式布局可以在多种屏幕尺寸下保持良好的用户体验。

DIV+CSS三种页面布局

评论已关闭

推荐阅读