网页中Html布局分解,DIV+CSS布局经典分解.ppt

《DIV+CSS布局基础经典》 什么是DIV DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用

标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，

aa

bb

cc的结果是不确定的。 DIV+CSS布局这个布局中，div承载的是内容，而css承载的是样式 这些都是用div 做出来的 SPAN标签 SPAN的用法与DIV一样

这是DIV标记

这是SPAN标记 DIV与SPAN的区别 DIV是块元素，使用会产生分行 SPAN是一个行内元素，使用不会产生分行 盒子模型 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度(width)和高度(height)，盒子里面的内容到盒子的边框之间的距离叫做填充(padding)，盒子本身有边框(border)，而盒子边框外和其他盒子之间，还有边界(margin)。 CSS(Cascading Style Sheet)，中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！ 这样做的好处： 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本；加快网页解析速度 更良好的用户体验 2.2.1 CSS语法基础 何为CSS(Cascading Style Sheet)？ CSS中文译为层叠样式表。是用于控制网页样式并允许 将样式信息与网页内容分离的一种标记性语言。 即:告诉浏览器，这段样式将应用到哪个对象.. 2.2.2 CSS选择器(符) 2.2.3 选择器的声明 2.2.4 如何应用CSS到网页中 行内样式表 内部(内嵌)样式表 外部(链接)样式表 导入式样式表 2.2.5 实例代码:CSS按位置的分类 4.0 一个简单的CSS布局实例 网页制作流程： 设计出效果图—切图——布局(DIV+CSS、table— 嵌入动态程序或模板标签——测试——发布 边缘 margin(margin-top、margin-right、margin-bottom、margin-left)：外边距顺序依次是上、右、下、左 例如，{margin:2em 4em}、{margin-left:-200px} padding(padding-top、padding-right、padding-bottom、padding-left)：内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左 布局 display 设置值：block、inline、list-item、none float 设置值：left、right、none clear 设置值：left、right、none、both overflow 设置值：visible、hidden、scroll、auto 位置 位置属性就是指定元素的位置，网页元素在游览器文档窗口中的位置。 position 设置值：absolute、relative、static CSS排版-DIV分块 设计DIV块位置 5.2 使用CSS样式表 5.2.1 CSS样式表概述 1、样式表的使用 CSS样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在HTML标签的head区。 外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面和之间用以下代码调用。 5.2 使用CSS样式表 2、CSS样式表语法选择符 { 属性1：值1；属性2：值2…… } 参数说明： 属性和属性值之间用冒号(:)隔开，如color:red;定义多个属性时，属性之间用分号(;)隔开。 3.定义页面属性和定义特定 Id 属性的DIV标签的CSS样式