CSS 网页布局 - css 实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS 网页布局 - css 实例 - 自学教程(runoops.com)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
    }
    
    /* 头部样式 */
    .header {
      background-color: #f1f1f1;
      padding: 20px;
      text-align: center;
    }
    
    /* 导航条 */
    .topnav {
      overflow: hidden;
      background-color: #333;
    }
    
    /* 导航链接 */
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    /* 链接 - 修改颜色 */
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
    /* 创建三个相等的列 */
    .column {
      float: left;
      padding: 10px;
    }
    
    /* 左右两侧宽度 */
    .column.side {
      width: 25%;
    }
    
    /* 中间区域宽度 */
    .column.middle {
      width: 50%;
    }
    
    /* 列后面清除浮动 */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* 响应式布局 - 宽度小于600px时设置上下布局 */
    @media screen and (max-width: 600px) {
      .column.side, .column.middle {
        width: 100%;
      }
    }
    
    /* 底部样式 */
    .footer {
      background-color: #f1f1f1;
      padding: 10px;
      text-align: center;
    }
    </style>
    </head>
    <body>
    
    <div class="header">
      <h1>头部区域</h1>
      <p>重置浏览器大小查看效果。</p>
    </div>
    
    <div class="topnav">
      <a href="#">链接</a>
      <a href="#">链接</a>
      <a href="#">链接</a>
    </div>
    
    <div class="row">
      <div class="column side">
        <h2>左侧栏</h2>
        <p>runoops编程基础教程</p>
      </div>
      
      <div class="column middle">
        <h2>主区域内容</h2>
        <p>runoops编程基础教程，runoops编程基础教程，runoops编程基础教程，runoops编程基础教程</p>
        <p>runoops编程基础教程，runoops编程基础教程，runoops编程基础教程，runoops编程基础教程</p>
      </div>
      
      <div class="column side">
        <h2>右侧栏</h2>
        <p>runoops编程基础教程</p>
      </div>
    </div>
    
    <div class="footer">
      <p>底部区域</p>
    </div>
      
    </body>
    </html>