Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      *{
        box-sizing:border-box;
      }
      body{
        margin:0;
      }
      .header{
        background-color:#2196F3;
        color:white;
        text-align:center;
        padding:15px;
      }
      .footer{
        background-color:#444;
        color:white;
        padding:15px;

      }
      .topmenu{
        list-style-type:none;
        margin:0;
        padding:0;
        overflow:hidden;
        background-color:#777;
      }
      .topmenu li{
        float:left;
      }
      .topmenu li a{
        display:inline-block;
        color:white;
        text-align:center;
        padding:16px;
        text-decoration:none;
      }
      .topmenu li a:hover{
        background-color:#222
      }
      .topmenu li a.active{
        color:white;
        background-color:#4caf50;
      }
      .column{
        float:left;
        padding:15px;
      }
      .clearfix::after{
        content:both;
        clear:both;
        display:table;
      }
      .sidemenu{
        width:25%;

      }
      .content{
        width:75%;
      }
      .sidemenu ul{
        list-style-type:none;
        margin:0;
        padding:0;
      }
      .sidemenu li a{
        margin-bottom:4px;
        display:block;
        padding:8px;
        background-color:#eee;
        text-decoration:none;
        color:#666;

      }
      .sidemenu li a:hover{
        background-color:#555;
        color:white;
      }
      .sidemenu li a.active{
        background-color:#008cba;
        color:white;
      }
      .sidemenu li a.active1{
        background-color:#c423ee;
        color:red;
      }

    </style>
  </head>
  <body>
    <ul class="topmenu">
      <li><a href="#home" class="active">主页</a</li>
      <li><a href="#news" >新闻</a></li>
      <li><a href="#contact">联系我们</a></li>
      <li><a href="#about">关于我们</a></li>
    </ul>
    <div class="clearfix">
      <div class="column sidemenu">
        <ul>
          <li><a href="#flight">The Flight</a></li>
          <li><a href="#2">Second</a></li>
          <li><a href="#3" class="active">Third</a></li>
          <li><a href="#4">Fourth</a></li>
          <li><a href="final" class="active1">Final</a></li>
        </ul>
    </div>
    <div class="column content">
      <div class="header">
        <h1>Content</h1>
      </div>
      <h1>Chania</h1>
      <p>Chania is the capital of the Chania region on the    island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
      <p>You will learn more about responsive web pages in a later chapter.</p>
    </div>
    <div>
      <p class="footer">Bottom</p>
    </div>

  </body>
</html>