HTML 布局



  • HTML布局

    layout
  • HTML布局元素

    网站通常以像杂志报纸那样的排版来设计行列之间的显示。 HTML5提供了定义网页不同部分的新语义元素:
    • <header> - 定义文档或小节的标题
    • <nav> - 定义导航链接的容器
    • <section> - 定义文档中的部分
    • <article> - 定义一个独立的自包含文章
    • <aside> - 定义除内容之外的内容(如侧边栏)
    • <footer> - 为文档或部分定义页脚
    • <details> - 定义其他详细信息
    • <summary> - 定义<details>元素的标题
  • HTML布局技术

    创建多列布局有四种不同的方法。每种方式都有其优点和缺点:
    • HTML表格(不推荐)
    • CSS浮动属性
    • CSS flexbox
    • CSS框架
    我们要选哪一个呢?

    HTML表格

    <table>元素不是设计为布局工具!<table>元素的目的是显示表格数据。所以,不要使用表格进行页面布局!它们会给你的代码带来麻烦。想象一下几个月后重新设计网站会有多难。
    提示:请勿使用表格进行页面布局!

    CSS框架

    如果要快速创建布局,可以使用Bootstrap等框架。

    CSS浮动

    使用CSS浮动属性执行整个Web布局是很常见的。浮动易于学习,您只需要记住浮动和清除属性的工作原理。 缺点:浮动元素与文档流相关联,这可能会损害灵活性。你可以在CSS教程的相关章节学习。 本章开始那个例子就用了CSS浮动来实现。

    CSS Flexbox

    Flexbox是CSS3中的一种新布局模式。当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,使用flexbox可确保元素的行为可预测。 缺点:在IE10及更早版本中不起作用。可以在我们的CSS教程的相关章节学习。