[经济学]第4讲 HTML、HTML DOM、CSS讲义.pptVIP

元素的定位 position定位（absolute 绝对定位） 元素的定位 position定位运行效果 元素的定位 position定位（relative相对定位） 元素的定位 position定位运行效果 元素的定位 z-index空间位置 元素的定位 z-index空间位置运行效果 CSS排版观念 将页面用div分块 CSS排版观念 将页面用div分块的代码如下 CSS排版观念 设计各个块的位置 CSS排版观念 CSS定位，如float定位、position定位等。 CSS排版实例 目录 HTML HTML DOM CSS(Cascading Style Sheets)层叠样式表 实例设计 课后作业 实例设计 利用CSS美化项目MessManageSys的前台页面 目录 HTML HTML DOM CSS(Cascading Style Sheets)层叠样式表 实例设计 课后作业 课后作业 复习本节课所讲的HTML、HTML DOM、CSS等相关知识点 练习使用CSS对上节课讲的整合项目的前台页面做美化 结束 谢谢大家！ * * * * * * * * * HTML DOM简介 DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使得你可以访问页面其他的标准组件。 简单理解，DOM解决了Netscape的Javascript和 Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。 HTML DOM简介 DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的。 HTML DOM简介 HTML文档对象模型（HTML Document Object Model） 定义了访问和操作HTML文档的标准方法。 HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 HTML DOM节点树 目录 HTML HTML DOM CSS(Cascading Style Sheets)层叠样式表 实例设计 课后作业 CSS CSS基础 CSS进阶 CSS基础 CSS概念 样式表分类 CSS选择器 CSS概念 CSS（Cascading Style Sheets），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，是实现页面表现（Presentation）的核心元素。 样式表分类 行内样式 内嵌式 链接式 导入样式 样式表分类 行内样式 样式表分类 内嵌式 样式表分类 链接式 1.css文件 样式表分类 导入样式 1.css文件 CSS选择器 标记选择器 类别选择器 ID选择器 选择器的集体声明 选择器的嵌套 子选择器 CSS选择器 标记选择器 CSS选择器 类别选择器 CSS选择器 类别选择器 CSS选择器 ID选择器 CSS选择器 ID选择器 CSS选择器 选择器的集体声明 CSS选择器 选择器的嵌套 CSS选择器 子选择器 CSS进阶 div与span标记 盒子模型 元素的定位 CSS排版观念 div与span标记 在使用CSS排版的页面中，div与span是两个常用的标记。div（division）简单而言是一个区块容器标记，即div…/div之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。 div与span标记 div标记 div与span标记 div标记运行效果 div与span标记 div与span的区别 div与span标记 div与span的区别运行效果 盒子模型 一个盒子由content、border、padding、margin这四部分组成； 元素的定位 float定位 position定位 z-index空间位置 元素的定位 float定位 元素的定位 float定位运行效果 HTML、HTML DOM、CSS 主讲人：孙宏旭 哈尔滨工程大学 计算机科学与技术学院 目录 HTML HTML DOM CSS(Cascading Style Sheets)层叠样式表 实例设计 课后作业 目录 HTML HTML DOM CSS(Cascading Style Sheets)层叠样式表 实例设计 课后作业 HTML HTML简介 HTML表单 实例设计--表单元素综合应用 HTML简介 HTML（HyperText Mark-up Language