css圣杯模式的HTML代码

CSS圣杯布局模式是一种常用于网页设计的布局方式。它通常会使用浮动来实现三列布局，其中中间列为主要内容，左右两列为辅助内容。

下面是一个使用CSS圣杯布局模式的HTML代码。其中，我们使用了CSS的flex布局来实现左右两侧辅助内容的位置固定，而中间的主要内容则可以自适应宽度。

<div class="container">
  <div class="content">
    <p>这里是主要内容</p>
  </div>
  <div class="left">
    <p>这里是左侧辅助内容</p>
  </div>
  <div class="right">
    <p>这里是右侧辅助内容</p>
  </div>
</div>

<style>
.container {
  display: flex; /* 使用flex布局 */
  flex-wrap: Nowrap; /* 不换行 */
  margin: 0 auto; /* 水平居中 */
  max-width: 960px; /* 最大宽度 */
}
.content {
  flex: 1; /* 自适应宽度 */
}
.left,.right {
  flex-basis: 200px; /* 固定宽度 */
  height: 100px; /* 高度，可以根据实际情况改变 */
}
.left {
  order: -1; /* 左侧内容在前 */
  margin-right: -200px; /* 偏移量 */
}
.right {
  margin-left: -200px; /* 偏移量 */
}
</style>

使用CSS圣杯布局模式可以让网页的布局更加灵活，同时也可以提高网页的兼容性。希望能对大家的网页设计有所帮助。