计算机基础16 css样式表高级应用.pptVIP

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盒子模式具备属性 在网页设计中常听的属性名： 内容(content) 填充(padding) 边框(border) 边界(margin) CSS盒子模式都具备这些属性。 网页设计中的盒子 内容：常指文字、图片等元素，也可以是小盒子（DIV嵌套） 填充：只有宽度属性； 边框：有大小和颜色分别； 边界：该盒子与其它东西要保留多大距离。 盒模型的细节 在CSS的盒模型设计中，它的宽度和高度不仅仅由width和height来控制，而是由一组属性值组合而成，对于盒模型而言，CSS还提供了内边距（padding）、外边距（margin）、边框（border）三个属性，用于控制一个对象的显示细节。 理解结构和表现相分离 不用CSS排版： img src=01.jpg width=225 height=225/ img src=02.jpg width=225 height=225/ 用CSS排版： style type=text/css#photolist img{　　height:225; width:225;}/style div id=photolistimg src=01.jpg /img src=02.jpg //div DIV+CSS设计思路 用div来定义语义结构； 用CSS来美化网页，如加入背景、线条边框、对齐属性等； 在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签）。 本次课课程总结 1 认识DIV 2 理解盒模型 3 DIV+CSS简单应用 作业布置与要求 1、练习本次课学习的内容 2、完成一个DIV+CSS页面的制作 下次课内容 无 3 1