概述

HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局。但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法来实现这种布局,通常的解决方案是:使用区块元素 <div> 或 表格(<table>)来布局 Web 页面的内容。

表格实现布局

  • 概述

      使用表格进行布局,是一种较老的布局解决方案。并不推荐使用,我们应该总是使用表格来显示表格化的数据。
  • 示例

    • HTML 文档

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <!-- 链接到外部样式表 -->
      <link rel="stylesheet" href="css/mystyle.css">
      <title>Island estaurant</title>
      </head>
      <body>
      <table id="container">
      <!-- 头部 -->
      <tr>
      <td id="header" colspan="2">
      <h1>点菜系统</h1>
      </td>
      </tr>
      <!-- 主体 -->
      <tr>
      <!-- 菜单 -->
      <td id="menu">
      <b>菜品</b><br>
      <div id="dishes">
      小鸡炖蘑菇<br>
      家常豆腐<br>
      酸辣土豆丝<br>
      </div>
      </td>
      <!-- 内容 -->
      <td id="content">
      小鸡炖蘑菇:<br>
      幼鸡一只
      </td>
      </tr>
      <!-- 尾部 -->
      <tr>
      <td id="footer" colspan="2">世俗孤岛的餐厅</td>
      </tr>
      </table>
      </body>
      </html>
    • CSS 文件

      /*整个点餐系统的界面*/
      #container
      {
      width: 600px;
      margin: 100px;
      /*取消单元格边框之间的边距*/
      border-spacing: 0;
      }
      /*点餐系统界面的头部*/
      #header
      {
      background-color: red;
      text-align: center;
      }
      h1
      {
      margin-bottom: 0px;
      }
      /*点餐系统界面的菜单*/
      #menu
      {
      background-color: #FFD700;
      height: 200px;
      width: 150px;
      }
      #dishes
      {
      padding-top: 10px;
      padding-left: 10px;
      line-height: 20px;
      }
      /*点餐系统界面的菜品详情*/
      #content
      {
      background-color: gray;
      height: 200px;
      width: 450px;
      }
      /*点餐系统界面的尾部*/
      #footer
      {
      background-color: blue;
      height: 25px;
      text-align: center;
      }
    • 效果图

<div> 元素实现布局

  • 概述

      <div> 元素是一个块级元素,一个 HTML 元素容器,其本身并没有任何意义。通常与 CSS 协作来实现 Web 页面布局方案。是一种较 表格布局 更新的布局解决方案。
  • 示例(实现 表格布局 实现的效果)

    • 内容

      • 使用 <div> 元素来布局一个简单的点餐系统界面
    • 代码
      • HTML 文档

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <!-- 链接到外部样式表 -->
        <link rel="stylesheet" href="css/mystyle.css">
        <title>Island estaurant</title>
        </head>
        <body>
        <!-- 基于 div 的布局 -->
        <div id="container">
        <!-- 头部 -->
        <div id="header">
        <h1>点菜系统</h1>
        </div>
        <!-- 菜单 -->
        <div id="menu">
        <b>菜品</b><br>
        <div id="dishes">
        小鸡炖蘑菇<br>
        家常豆腐<br>
        酸辣土豆丝<br>
        </div>
        </div>
        <!-- 内容 -->
        <div id="content">
        小鸡炖蘑菇:<br>
        幼鸡一只
        </div>
        <!-- 尾部 -->
        <div id="footer">
        世俗孤岛的餐厅
        </div>
        </div>
        </body>
        </html>
      • CSS 文件

        /*整个点餐系统的界面*/
        #container
        {
        width: 600px;
        margin: 100px;
        }
        /*点餐系统界面的头部*/
        #header
        {
        background-color: red;
        text-align: center;
        }
        h1
        {
        margin-bottom: 0px;
        }
        /*点餐系统界面的菜单*/
        #menu
        {
        background-color: #FFD700;
        height: 200px;
        width: 150px;
        float: left;
        }
        #dishes
        {
        padding-top: 10px;
        padding-left: 10px;
        line-height: 20px;
        }
        /*点餐系统界面的菜品详情*/
        #content
        {
        background-color: gray;
        height: 200px;
        width: 450px;
        float: left;
        }
        /*点餐系统界面的尾部*/
        #footer
        {
        background-color: blue;
        height: 25px;
        text-align: center;
        clear: both;
        }

领悟

由上述的两个示例,我们可以看到,尽管使用不同的方案实现相同的布局效果,但是其 CSS 文件几乎是没有变化的。这是为什么呢?显然,我们会发现,两个示例中的元素的标示 id 是没有变化的,这已足以解释原因。希望同学们都能体会到这一点。

关于 CSS 与 HTML 分离的一点看法

  • 写在前面

      不知道同学们,是如何看待编程的,也不知道大家是否喜欢当前从事的这个职业。个人觉得,编程不仅仅是我的工作,它是我的生活,更是我的人生。我习惯用生活中的一些思维去面对编程中遇到的一些东西,去体会它的发展。我喜欢跟着自己的思维去创造和谐优雅的东西,一点点变换和固化自己的思维,并全身心的享受这个过程。下面谈谈我对 CSS 与 HTML 分离的理解。
  • CSS 与 HTML 协作的前世今生

    • 阶段一

      • 最开始的 Web 页面是没有花哨的样式的,只有简单的文本。也就不用通过 CSS 来设置元素的样式。
    • 阶段二
      • 后来逐渐出现了具备简单样式的 Web 页面。但是我们知道 HTML 元素,只具备语意,不会指定元素的内容显示的样式。在这种情况下,就要使用 CSS 来指定元素的样式。
      • 由于此时的 Web 页面通常是比较简单的,顺应时势,元素样式的定义以元素的属性(style)的形式出现在了元素的开标签中。
    • 阶段三
      • 但是人们逐渐地发现,将元素样式放到元素的开标签中,HTML 文档会变得杂乱无章,且难以维护。此时就诞生了一种解决方案,即将这些定义元素样式的代码统一的放在 HTML 文档的头部。这只是一张过渡的解决方案。
      • 大家都知道,新事物的产生,必然会引发一系列的问题。此时我们面临的问题是:如何去找到我们要设置样式的元素呢?以下是该问题的解决方案,即使用 CSS 选择器。
        • 使用元素标签来选择元素,只是用于简单的页面。
        • 我们会发现元素标签无法去区分所有的元素,比如说:一个 HTML 文档中通常会有很多 <p> 元素。这就产生了 id 和 class 连个属性。顾名思义,class 用来标示一类元素,这类元素具有相同的样式;而 id 用来标示一个元素,id 意味着是唯一的。
        • 随着 Web 页面复杂度的增加,也逐渐出现了一些更加复杂的选择器(组合选择符)。比如说:后代选取器、子元素选择器、相邻兄弟选择器、普通相邻兄弟选择器
    • 当前阶段
      • 随着 Web 项目的功能越来越复杂,为了缩短开发周期,缩减维护成本,逐渐地将 CSS 从 HTML 文档中分离出来,放到单独的文件中。这就是我们目前通常采用的方式。
  • 关于

      关于其中涉及到的知识,会在后面的博客中逐渐涉及到。

HTML5-03 页面布局的更多相关文章

  1. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  2. html5 移动端单页面布局

    序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...

  3. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

  4. HTML5入门教程:响应式页面布局

    摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...

  5. HTML5/CSS3 第三章页面布局

    页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...

  6. web前端学习(二)html学习笔记部分(10)-- HTML5构建应用布局和页面

    1.2.25  HTML5构建应用布局和页面 1.2.25.1  HTML5在移动开发中的准则 1.尽量使用单页面开发 2.慎重选择前端UI框架 3.动画.特效使用准则(60fps) 浏览器消耗最小的 ...

  7. IT兄弟连 HTML5教程 和页面布局有关的CSS属性

    使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式.一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过 ...

  8. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  9. 【App FrameWork】框架的页面布局

    之前主要用JqueryMobile+PhoneGap的模式开发移动应用,但JQueryMobile自身存在的硬伤太多,如加载速度缓慢,页面转场白屏.闪烁,头尾部导航浮动问题,页面滚动等等,用户体验效果 ...

  10. Redesign Your App for iOS 7 之 页面布局【转】

    前言 iOS7是目前iOS史上最颠覆的一次改版. 它的出现令人兴奋,因为它将会带我们进入一个全新的时代: 它的到来也让我们忧心,因为它颠覆了一切,包括我们过去做过的很多努力. 但是,相信大家乐意为这个 ...

随机推荐

  1. Objective-C中把数组中字典中的数据转换成URL

    可能上面的标题有些拗口,学过PHP的小伙伴们都知道,PHP中的数组的下标是允许我们自定义的,PHP中的数组确切的说就是键值对.而在OC我们要用字典(Dictionary)来存储,当然了Java用的是M ...

  2. JSON学习

    1.JSON 语法是 JavaScript 对象表示语法的子集. l  数据在名称/值对中 l  数据由逗号分隔 l  花括号保存对象 l  方括号保存数组 JSON 值可以是: l  数字(整数或浮 ...

  3. 【集合框架】Java集合框架综述

    一.前言 现笔者打算做关于Java集合框架的教程,具体是打算分析Java源码,因为平时在写程序的过程中用Java集合特别频繁,但是对于里面一些具体的原理还没有进行很好的梳理,所以拟从源码的角度去熟悉梳 ...

  4. SQL Server基础之索引

     索引用于快速找出在某个列中有某一特定值的行,不使用索引,数据库必须从第一条记录开始读完整个表,直到找出相关的行.表越大,查询数据所花费的时间越多,如果表中查询的列有一个索引,数据库能快速到达一个位置 ...

  5. 数据结构Java实现01----算法概述

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  6. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

  7. js的touch事件的实际引用

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  8. ABP 初探 之基于EasyUI的CURD

    结束了天天加班的项目,项目虽然结束,但还是有点小问题,只能在后期优化当中完成了,本次做项目采用了,MVC.Webapi.Entityframework,在园了里看到了有关ABP的介绍,同样ABP也是最 ...

  9. Javaweb学习笔记——EL表达式

    一.前言 EL表达式是什么? 简而言之,可以这样理解,EL表达式全名为:Exprexxsion Language,原先是JSTL 1.0为了方便存取数据而定义的语言,到了JSTL 2.0便正式成为标准 ...

  10. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(24)-权限组的设计和实现(附源码)(终结)

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...