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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS 网页布局 - css 实例 - 自学教程(runoops.com)</title>
  <style>
    * {
      box-sizing: border-box;
    }

body {
      font-family: Arial;
      padding: 10px;
      background: #f1f1f1;
    }

/* 头部标题 */
    .header {
      padding: 30px;
      text-align: center;
      background: white;
    }

.header h1 {
      font-size: 50px;
    }

/* 导航条 */
    .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;
    }

/* 创建两列 */
    /* Left column */
    .leftcolumn {
      float: left;
      width: 75%;
    }

/* 右侧栏 */
    .rightcolumn {
      float: left;
      width: 25%;
      background-color: #f1f1f1;
      padding-left: 20px;
    }

/* 图像部分 */
    .fakeimg {
      background-color: #aaa;
      width: 100%;
      padding: 20px;
    }

/* 文章卡片效果 */
    .card {
      background-color: white;
      padding: 20px;
      margin-top: 20px;
    }

/* 列后面清除浮动 */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

/* 底部 */
    .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
      margin-top: 20px;
    }

/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
    @media screen and (max-width: 800px) {

.leftcolumn,
      .rightcolumn {
        width: 100%;
        padding: 0;
      }
    }

/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }
  </style>
</head>

<body>

<div class="header">
    <h1>我的网页</h1>
    <p>重置浏览器大小查看效果。</p>
  </div>

<div class="row">
    <div class="leftcolumn">
      <div class="card">
        <h2>文章标题</h2>
        <h5>2019 年 4 月 17日</h5>
        <div class="fakeimg" style="height:200px;">图片</div>
        <p>一些文本...</p>
        <p>runoops编程基础教程，runoops编程基础教程，runoops编程基础教程</p>
      </div>
      <div class="card">
        <h2>文章标题</h2>
        <h5>2019 年 4 月 17日</h5>
        <div class="fakeimg" style="height:200px;">图片</div>
        <p>一些文本...</p>
        <p>runoops编程基础教程，runoops编程基础教程，runoops编程基础教程</p>
      </div>
    </div>
    <div class="rightcolumn">
      <div class="card">
        <h2>关于我</h2>
        <div class="fakeimg" style="height:100px;">图片</div>
        <p>关于我的一些信息..</p>
      </div>
      <div class="card">
        <h3>热门文章</h3>
        <div class="fakeimg">
          <p>图片</p>
        </div>
        <div class="fakeimg">
          <p>图片</p>
        </div>
        <div class="fakeimg">
          <p>图片</p>
        </div>
      </div>
      <div class="card">
        <h3>关注我</h3>
        <p>一些文本...</p>
      </div>
    </div>
  </div>

</body>

</html>