HTML5-03 页面布局

时间 2019-12-09

标签 html5 html 页面布局栏目 HTML5 繁體版

原文原文链接

概述

HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的先后加上拆行，是一种流水布局。可是，咱们所见到的 Web 页面按照必定的规则布局排版的（一般是多列的），因此就要借助必定的方法来实现这种布局，一般的解决方案是：使用区块元素 <div> 或 表格（<table>）来布局 Web 页面的内容。

表格实现布局

概述css

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

示例

HTML 文档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> 元素实现布局

概述spa

<div> 元素是一个块级元素，一个 HTML 元素容器，其自己并无任何意义。一般与 CSS 协做来实现 Web 页面布局方案。是一种较 表格布局 更新的布局解决方案。

示例（实现表格布局实现的效果）

内容
- 使用 <div> 元素来布局一个简单的点餐系统界面

代码

HTML 文档code

<!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 文件htm

/*整个点餐系统的界面*/
#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 分离的一点见解

写在前面blog

不知道同窗们，是如何看待编程的，也不知道你们是否喜欢当前从事的这个职业。我的以为，编程不只仅是个人工做，它是个人生活，更是个人人生。我习惯用生活中的一些思惟去面对编程中遇到的一些东西，去体会它的发展。我喜欢跟着本身的思惟去创造和谐优雅的东西，一点点变换和固化本身的思惟，并全身心的享受这个过程。下面谈谈我对 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 文档中分离出来，放到单独的文件中。这就是咱们目前一般采用的方式。

关于ci

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