12、HTML 页面布局与表单创建全解析

HTML 页面布局与表单创建全解析

1. 用 div 元素进行页面布局

在网页设计中，div 元素是页面布局的基础，它就像一个容器，可以将页面划分为不同的区域，并且能够独立地对每个区域进行格式化和操作。

1.1 div 元素的格式化

• 绝对定位 ：当使用 position: absolute 时，div 元素会出现在由 top 和 right 属性指定的特定位置。例如：

div#sidebar { position: absolute; top: 50px; right: 40px; }

不过，使用绝对定位后，文档主体不再环绕 div 元素，所以除了用于放置在背景中的图形内容外，绝对定位对于大多数设计师来说实用性不是很强。
- 添加边框 ：可以使用 border 属性（或其相关属性 border-style 、 border-width 和 border-color ）为 div 添加 CSS 边框。比如，要为侧边栏添加 1 像素的黑色边框，可以这样设置：

div#sidebar { float: right; width: 220px; margin-left: 20px