CSSDIV网页布局-limengfan.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浮动等第三步：页面内的基本文本的样式(css)设置第四步：页脚信息(版权等)的表现设置第五步：导航条的制作,18/12,CSS+DIV网页设计与制作,感谢观看！,