Pro023-从零开始HTML[#023]——5分钟- layout 布局

标签

#023_Lay_layout

    我们经常看见的网页，经常都是一个四分结构：header、nav、content、footer。

常见的网页结构

    那么今天，我们来学习，使用元素 div 来对 HTML 进行布局，div 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

---

文档基础

    首先当然是要编写一些基础的 HTML 内容，来构成一个框架。

基础文档

    用 id 属性，对 div 进行分类，构建出：header、nav、section、footer，4个不同的 块。

    此时效果是这样的。

白板效果图

    那么剩下的环节，我们就要到 css 文件中进行编辑。

---

样式构造

    像之前的课程所教的一样，我们对header、nav、section、footer进行样式设置和定义。

旧内容复习：

    background-color    背景颜色

    color                        字体颜色

    text-align                 文字对齐方式

    height                      块元素高度

    width                       块元素宽度

样式构造

新内容学习：

    布局的核心内容就是 float 和 padding

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。当然，最好还是给予这个浮动块属性一个固定的宽度，以避免浮动块过度收窄导致布局难看。

    padding 属性是一个声明中设置所有内边距的属性。这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

    行内非替换元素上设置的内边距不会影响行高计算。因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。

    注意：不允许指定负边距值。

---

最终效果

最终效果图