网页设计与制作 课件 11 制作卡片式图文盒子（圆角与阴影）.pptxVIP

;入门测

作业分析

知识回顾

盒模型属性：border、margin、padding、width、height

border:1pxdashed#ddd;

border-top:1pxsolid#ddd;

margin:20px;

margin-top:20px;

padding:20px10px;;卡片式图文列表是网页中常见的目录表现形式，比纯文本目录更具有吸引力，一个卡片式图文盒子通常由图片、标题、小部分内容等组成，便于引导用户迅速定位到自己感兴趣的内容。

本任务学习对盒子添加投影、圆角、横线等常用修饰，在合理空间布局的基础之上，使盒子更显生动。;学习内容;border-radius;;box-shadow;;;;;;文本溢出处理;制作卡片式图文盒子

结构分析

卡片式图文列表可使用ul进行组织。本任务是实现卡片式图文列表中的一个图文内容，作为一个列表项。

图文结构分为上图和下文两部分，下文内部又可以分成标题、段落、了解详情三个部分。;制作卡片式图文盒子

样式分析

为方便后面进行项目整合，对盒子的大小进行了精确控制，设定每一个图文的宽度为370px，左右外边距之和为30px，以便今后在1200px的页面宽度中一行放下3个卡片式图文内容。

下文具有相同内边距，外部有投影效果，标题有下边框线，“了解详情”有圆角。

注意通过字体大小、加粗、留白等方式体现不