3-2 井井有条——页面布局与视觉层次设计.pptxVIP

二号任务井井有条——页面布局与视觉层次设计汇报人：xxx时间：2026

任务说明01

优化志愿服务队招新页面的布局结构与视觉层次，完成后利用AI助手快速应用于社团管理网页，具体要求如下。 （1）为页面设计三层视觉层次：页面背景（底层）、容器背景（中间层）和内容区背景（顶层），确保各层次间有适当的视觉区分。 （2）为所有容器设置圆角边框，为主要容器添加适当的阴影效果，保持容器样式的一致性。 （3）调整图片元素的间距及其填充方式。 （4）调整元素（列表元素、水平分割线元素等）的间距。 （5）实现全宽的页脚，固定在页面底部。二号任务任务说明

知识准备02

01CSS盒模型目录元素类型04单位使用03display属性02

1.CSS盒模型知识准备CSS盒模型（BoxModel）：是Web设计中的一个核心概念，它定义HTML元素如何在文档流中占据空间以及元素间的位置关系。内容区域用于显示元素的实际内容（文本、图像等）。可通过width和height属性设置大小。内边距?位于内容区域与边框之间的透明区域，会继承父元素的背景色或背景图片。?用于控制内容与边框的间距。?可单独设置上、右、下、左（padding-top、padding-right、padding-bottom、padding-left）4个方向的值。?影响元素的实际尺寸，不支持负值。边框?围绕内边距和内容的线条。?可设置宽