HTML布局

HTML 布局元素

网站经常在多个栏目中显示内容（如杂志或报纸）。

HTML5 提供了新的语义元素定义一个Web页面的不同部分:

HTML5 语义元素

<header> - 定义文档或节的页眉
<nav> - 定义导航链接的容器
<section> - 定义文档中的一个部分
<article> - 定义单独的文章
<aside> - 定义内容边栏（如侧边栏）
<footer> - 定义文档或节的页脚
<details> - 定义了额外的细节
<summary> - 为<details>元素定义标题

HTML 布局技术

有四种不同的方法来创建多列布局。每一种方式都有它的优点和缺点：

HTML 表格
CSS float 属性
CSS 框架
CSS flexbox

选择哪一个呢？

HTML 表格 <table> 元素没有被设计成布局工具.! <table> 元素的设计目的是显示表格数据. 因此，不要为页面布局使用表格! 他们会给你的代码带来一个混乱。想象一下几个月后重新设计你的网站有多难。

提示：不要为页面布局使用表格！

CSS 框架

如果你想创建快速布局，你可以使用一个框架, 像Bootstrap。

CSS float 属性

使用CSS浮动属性做整个网站的布局是非常常见的. 浮动是很容易学习 - 您只需要记住如何浮动和清除属性的工作. 缺点：浮动元素绑定到文档流，这可能会损害灵活性。了解更多关于浮在我们的CSS浮动部分。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
  div.container {
      width: 100%;
      border: 1px solid gray;
  }

  header, footer {
      padding: 1em;
      color: white;
      background-color: black;
      clear: left;
      text-align: center;
  }

  nav {
      float: left;
      max-width: 160px;
      margin: 0;
      padding: 1em;
  }

  nav ul {
      list-style-type: none;
      padding: 0;
  }

  nav ul a {
      text-decoration: none;
  }

  article {
      margin-left: 170px;
      border-left: 1px solid gray;
      padding: 1em;
      overflow: hidden;
  }
  </style>
</head>
<body>

  <div class="container">

  <header>
     <h1>城市列表</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">北京</a></li>
      <li><a href="#">巴黎</a></li>
      <li><a href="#">东京</a></li>
    </ul>
  </nav>

  <article>
    <h1>北京</h1>

    <p>
      北京，简称“京”，中华人民共和国首都、直辖市、国家中心城市、超大城市，全国政治中心、文化中心、国际交往中心、科技创新中心，
      是中国共产党中央委员会、中华人民共和国中央人民政府和全国人民代表大会的办公所在地，中国中部战区司令部驻地。
    </p>
    <p>
      2015年末，北京全市常住人口2170.5万人，比2014年末增加18.9万人。其中，常住外来人口822.6万人，占常住人口的比重为37.9%。
      2015年北京市实现地区生产总值22968.6亿元，比2014年增长6.9%。
    </p>

  </article>

  <footer>Copyright &copy; CodingDict.com</footer>

  </div>



</body>
</html>

让我试试

CSS Flexbox

Flexbox 在CSS3新布局模式。

使用flexbox确保元件的行为可以预见当页面布局必须适应不同的屏幕尺寸和不同的显示设备。缺点：不能在IE10和早期的浏览器工作。
了解更多关于flexbox在我们的CSS flexbox章。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
  .flex-container {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      text-align: center;
  }

  .flex-container > * {
      padding: 15px;
      -webkit-flex: 1 100%;
      flex: 1 100%;
  }

  .article {
      text-align: left;
  }

  header {background: black;color:white;}
  footer {background: #aaa;color:white;}
  .nav {background:#eee;}

  .nav ul {
      list-style-type: none;
      padding: 0;
  }
  .nav ul a {
      text-decoration: none;
  }

  @media all and (min-width: 768px) {
      .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
      .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
      footer {-webkit-order:3;order:3;}
  }
  </style>
  </head>
  <body>

  <div class="flex-container">
  <header>
    <h1>城市列表</h1>
  </header>

  <nav class="nav">
  <ul>
    <li><a href="#">北京</a></li>
    <li><a href="#">巴黎</a></li>
    <li><a href="#">东京</a></li>
  </ul>
  </nav>

  <article class="article">
    <h1>北京</h1>
    <p>
      北京，简称“京”，中华人民共和国首都、直辖市、国家中心城市、超大城市，全国政治中心、文化中心、国际交往中心、科技创新中心，
      是中国共产党中央委员会、中华人民共和国中央人民政府和全国人民代表大会的办公所在地，中国中部战区司令部驻地。
    </p>
    <p>
      2015年末，北京全市常住人口2170.5万人，比2014年末增加18.9万人。其中，常住外来人口822.6万人，占常住人口的比重为37.9%。
      2015年北京市实现地区生产总值22968.6亿元，比2014年增长6.9%。
    </p>
  </article>

  <footer>Copyright &copy; CodingDict.com</footer>
  </div>

</body>
</html>

让我试试