CSSDIV网页布局-limengfa.ppt

CSS+DIV网页布局,主讲人：21433 李梦凡,HTML 标签,HTML 标签,定义和用法 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。,HTML 标签,用法 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。 可以对同一个 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。,CSS内容介绍,CSS设置方式 CSS语法 样式规则注释和样式规则优先级 CSS的属性分类介绍,CSS概述,CSS概念 CSS是Cascading Style Sheets 的缩写，中文的意思是层 叠样式表或级联样式表。,CSS功能简介 CSS可以用来精确的控制页面里 每一个元素的字体样式、 背景、排列方式、区域尺寸、边框等。使用CSS能够简 化网页的格式代码，加快下载显示的速度，外部链接样 式可以同时定义多个页面，大大减少了重复劳动的工作 量。,CSS设置方式,1、内联样式 这里是h1 特点：灵活，简单方便。,CSS设置方式,2、嵌入样式 h1 font-family:宋体;font-size:12pt;color:blue 在这里使用了H1标记 特点：一个样式可以在一个页面多次应用。,CSS设置方式,3、外部样式 在这里使用了H1标记 h1.css: h1 font-family:宋体;font-size:12pt;color:blue 特点：需要有一个外部的样式表文件(.css)，可以为多个网页所共同引用，即减少代码，又可以做到统一页面风格。,CSS语句格式,css语句格式如下: selector property: value (选择符 属性：值) 选择符的作用：限制样式作用的范围 p font-size:15 当属性的值是多个单词组成时，必须在值上加引号 h1 font-family: “Courier New“ 如果需要对一个选择符指定多个属性时，使用分号隔开。 p font-size:15;color:red,如何理解CSS盒子模型,12 / 12,CSS盒子模型,什么是CSS的盒子模式呢？为什么叫它是盒子？ 先说说我们在网页设计中常听的属性名： 内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。,13 / 12,CSS盒子模型,不用CSS排版,14 / 12,CSS盒子模型,使用CSS排版, #photoList imgheight:80;width:100;margin:5px auto; ,CSS+DIV网页设计与制作,16 / 12,CSS+DIV网页设计与制作,17 / 12,CSS+DIV网页设计与制作,第一步：规划网站，将网站分为五个div 第二步：网页布局与div浮动等 第三步：页面内的基本文