网页制作教学幻灯片讲义.pptVIP

在上述代码中，width:100px;height:100px;实际代表的是填充内容的范围，因此一个元素的实际宽度=左边边界+左边框+左填充+内容宽度+右填充+右边框+右边界 只有在普通的文档流中块的垂直空白边才会发生空白边叠加；行内框，浮动框或定位框之间的空白边是不会叠加的。 居中布局设计：运用非常广泛 有两种方式: 使用自动空白边让设计居中 使用定位和负值空白边让设计居中 使用定位和负值空白边让设计居中 将容器position属性设置为relative（相对），将left设置为50%，可以得到容器左居中，再给容器加一个负值的空白边，宽度等于容器宽度的一半，即可让容器居中。 例如： #box1{ width:720px; position:relative; left:50%; margin-left:-360px; } 一个对象的宽度，不只由width来决定的，它的真实宽度是由本身的宽+左右外边距+左右边框+左右内边距这些属性而得出来的。 1.ID和类的规则及使用方法 （1）定义ID #名称 ｛属性：值;｝ （2）定义类 .名称 {属性:值;} 它们跟以前的选择符格式上差不多，ID前面加一个#号，类名前面加一个点（半角）。 ID和类的区别 可能会觉得ID和类除了书写上的区别之外，功能上好像没有区别。 的确，它们在功能上也没有区别，它们的区别就是ID在页面上必须是唯一的, 而用类定义的样式可以被多次使用。 例如我们定义一个ID，一个类。 #first {color:red;} .second {color:green;} first因为前面有个#号所以属于ID，Second则属于类。则： P id=first段落一/P P class=second段落二/P P class=second段落三/P 上面的代码中“Second”这个类被使用了两次，说明类可以被多次使用，但ID在页面中只能被使用一次。 我们一般用ID来标识持久的结构性元素。使用更多的是类。 样式表的三类应用方式 分为三种方式: 1.行内样式表－－在标签中直接使用style属性来定义 2.内部样式表－－写在所在网页的head/head之间，只对所在网页起作用。 3.在独立的文件中声明css样式,在需要的页面中调入此文件，可在多个网页中重复使用. 使用CSS制作网页 在css.css文件中输入 @charsetutf-8; /*css document*/ *{ margin:0px; border:0px; padding:0px; } body{ font-family:宋体; font-size:12px; color:#969696; } *号是通配选择符,*号的使用表示所有对象,包括不同的ID,不同的class的HTML的所有标签 使用CSS制作网页 插入选：在插入点 ID命名为BOX 插入点：将Div插入到光标所在位置 在开始标签之后：将Div插入所选标签开始标签之后 在结束标签之前：将Div插入所选标签开始标签之前 在标签之后：将Div插入到所选标签的后面 DIV 设计 Div是一个容器，是HTML所支持的标签。在使用表格时，table/table一样,Div同样以div/div出现的 Div是HTML中指定的专门用于布局设计的容器对象,在传统表格式的布局当中之所以能够进行页面的排版布局设计,完全依赖于表格对象table.在页面中绘制一个由多个单元格组成的表格,然后再相应的表格中放置内容,并通过对表格单元格的位置控制实现布局的目的,是表格式布局的核心对象,使用CSS布局的页面排版,不需要依赖表格,仅从Div的使用上说，做一个简单的布局只需要依赖Div和CSS。 代码中应用div/div这样的标签样式 只是一个标识，其作用是把内容标识成一个区域，并不负责其它的事情，是用CSS布局工作的第一步。 需要通过Div将页面中的元素标识出来，而为内容添加样式则由CSS来完成。 Div对象可以直接放入： 文本 其它标签 多个 最终目的：合理地标识出页面的区域 使用CSS布局，为的是？？ 实现内容与表现的分离 HTML页面的 中，Div代码只能有两种表现形式： div id=“id 名称”内容/div div class=“class 名称”内容/div 使用ID属性，可以为当前的DIV指定一个ID名称，在CSS中使用ID选择符进行样式编写 使用class属性，在CSS中使用class选择符进行样式编写。