S102计算机基础CSS样式表高级应用.pptxVIP

HTMLCSS 回顾 CSS样式表概念 CSS样式表的用法 课程知识拓扑图 本次课内容 认识DIV 盒模型 DIV+CSS设计思路和基本应用 本次课知识点的作用 本次课是CSS课程的高级应用。通过学习DIV盒模型，结合CSS相关知识，完成对DIV+CSS的初步理解和简单应用。 教学目标 了解DIV及盒模型。 掌握DIV+CSS的简单应用。 教学重难点 重点：盒模型、 DIV+CSS的应用 难点：盒模型 本次课教学目标与重难点 认识DIV 1. DIV是什么？ 是一个XHTML所支持的标签，是XHTML中指定的、专门用于布局设计的容器对象。 如何使用？ div id=“id名”[…]/div div class=“class名”[…]/div 理解DIV div是一个block对象—块对象（或者块级元素）。 盒模型详解（Box Model） 盒模型是CSS中的一个核心概念。由于浏览器设计的原因，在不同的浏览器下面，盒模型的实际表现不一样。 什么是盒模型 盒模型是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。无论任何布局，它们都是几个方块（盒状）互相贴近显示而已。 浏览器通过这些盒状物的大小和浮动方式来判断下一个盒状物是贴近显示，还是下一行显示，还是其他方式显示。任何一个CSS布局的网页，都是由许多不同大小的盒子所构成。 CSS盒子模式具备属性 在网页