15、HTML与CSS：网页布局设计教程

HTML与CSS：网页布局设计教程

1. 项目背景与目标

为Pandaisia Chocolates巧克力店重新设计网站，Anne Ambrose已提供部分网页内容、图片和部分样式，需要运用CSS布局属性完成页面布局设计。本教程目标包括创建重置样式表、探索页面布局设计、居中块元素、创建浮动元素、清除浮动布局、防止容器塌陷等。

2. 页面布局基础概念

• 浮动元素布局 ：左列和右列部分分别浮动，宽度为33%和67%。垂直导航列表和联系信息部分也作为单独列浮动。所有水平列表项向左浮动以创建列。
• 防止容器塌陷 ：使用 after 伪元素和 content 属性生成占位元素，防止仅包含浮动元素的元素塌陷。
• 元素属性 ：
  • display 属性定义元素的布局方式。
  • width 属性定义元素宽度， max-width 设置最大可能宽度， min-width 设置最小宽度。
  • clear 属性用于在左、右或两侧浮动对象清除后显示元素。
  • 要水平居中块元素，将左右边距设置为 auto 。
  • float 属性将对象从正常文档流