网页设计-DIV CSS网页布局培训.pptx

DIV+CSS网页布局Div+css布局Div+css是什么我们可以简单的这样理解：打个比方，现在北京发展非常快，各个地方都在盖高楼大厦，大楼盖好了就要搞装修，这样整体看上去才会非常漂亮。div装修之前是一个红砖白墙的整体布局Css就是负责给大楼进行精装修专业术语讲div是用于存放内容(文字,图片,元素)的容器。css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观Div+css布局页面布局的三个发展阶段table网页设计 内容和样式(外观和布局)混合table+css网页设计 table布局,css指定外观div+css网页设计 div放内容,css指定样式(外观和布局),内容和样式彻底分离Div+css布局Div+css优势符合W3C标准。微软等公司均为W3C支持者。更有利于搜索引擎的搜取工作样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在主流门户网站均使用div+css布局，像sohu，163，sina等CSS代码非常简洁，极大节省带宽表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。学习目标了解布局标签DIV和SPAN的含义及使用掌握使用DIV布局的原理——盒子模型盒子margin、padding和border属性熟练使用浮动属性内联元素与块状元素熟练使用清除属性掌握网页简单布局学习重点 盒模型外边距、边框、内边距float属性的应用clear属性的应用学习难点理解margin、padding和border属性clear属性的使用浮动属性float布局实现的思路1、在“当前版面”分出几个相对独立的区块（分区只有两种方法：纵向与横向）；2、如果分出的是纵向区块，则每一个区块写出一个div就可以了（因为div本身就是自占一行的，则自然每个div就是一个纵向的区块了）；3、如果分成的是横向区块，则： a)同样每个区块首先写出一个div，且每个div都进行浮动（通常是一左一右，或两左一右，或都靠左，或都靠右）； b)设置各个div需要的宽度，但总和不超过当前区块（也就是这些浮动对象的父盒子）的总宽； c)有必要也设置各自高度，以及颜色背景或边框，以出现明显的视觉效果，这样有助于排错； d)如果父盒子没有设置高度，则在最后位置设置一个用于清除浮动的div（这样父盒子才具有正常高度）4、在上述每个分出的区块中，又当做“当前版面”做同样的分析与设计（重复1-3步）核心技术点边距、边框MarginPaddingBorder块级元素div应用到的属性：width/height float/clearbackground/核心技术点讲解CSS布局和尺寸属性外边距：margin内边距：padding边框：border尺寸属性：width和height浮动属性：float清除浮动属性：clear盒模型课堂案例如下图所示，我们假设整体上是一个一行两列的table。左边td中有一个img，img有一个灰色边框，边框离图片边缘有1px的间距，边框外部有5px的间距。右边td可以简单处理为一个标题和多个列表项，每个列表项没有列表符号，但有一个下边线。尺寸属性widthheightWidth width:像素值 P?{? width :?100px?} width:百分比 P?{? width :?50%?} height height:像素值 P?{? height :?100px?} height:百分比 P?{? height :?50%?} 盒模型盒模型展示盒模型盒模型拆分盒模型一个盒子实际占据的宽度和高度由内容+内边距+边框+外边距组成 即 width+padding+border+margin边框属性下面效果图的实现主要用到了边框、边距和填充属性边框属性边框样式border-style的值可以为：solid 实线dashed 虚线dotted 点线边框none 无边框语法：border-style：样式值 border-top-style：样式值border-bottom-style：样式值border-left-style：样式值border-right-style：样式值边框属性边框宽度border-width的值可以为：thin 细medium 中thick 粗数值，如 2px语法：border-width：宽度值border-top-width：宽度值border-bottom-width：宽度值border-left-width：宽度值border-right-width：宽度值边框属性边框颜色border-colorborder-color属性用来设置边框的颜色，可以用16进制颜色的关键字或RGB值来设置。语法： border-top-color：颜色值border-rig