DIV+CSS义二.doc

第二讲 DIV+CSS教学（二）课次授课学期授课班级授课地点授课时间2010-2011-210341、28517、5043-2、5-2课程目标备注本节课主要讲解DIV与CSS结合布局的基础知识，DIV的定义与定位，盒子模型，利用CSS进行页面控制课程导语授课素材摄影师网页制作使用案例拟留讨论 第二讲 使用DIV+CSS布局页面2.1 DIV概述1.定义DIV DIV是HTML中指定的专门用于布局设计的容器对象。 DIV对象除了可以直接放入文本和其他标签之外，还可以多个DIV标签进行嵌套使用，其最终目的是合理地标识出页面的区域。 DIV的常用形式： 内容 内容2DIV的嵌套和固定格式顶部 左 右底Div自身并不能实行排版功能，CSS才是真正的排版方式。2.2 CSS布局定位首先将页面在整体上进行标签的分块，然后对各个块进行CSS定位，最后在各个块中添加相应的内容。1.浮动定位浮动定位是CSS排版中非常重要的手段。浮动的框可以左右移动，直到其外边缘碰到包含框或另一个浮动框的边缘。float的参数包括：none;left;right#box width:650 #left background-color:#fff; height:150px; width:150px; margin:10px; #main background-color:#fff; height:150px; width:150px; margin:10px; #right background-color:#fff; height:150px; width:150px; margin:10px; 我们先做一个简单的网页：my css 123 123 123 2.position定位static(静态，是一个默认定位方式，无特殊定位)relative（相对，对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置）absolute（绝对，将对象从文档流中拖出，通过width、height、right、top、bottom等属性与margin、padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性来定义）。 #main position:relative;background-color:#fff; left:150px; top:150px; float:left; height:200px; width:200px （1）相对定位（相对这个原素的起点） （2）绝对定位（相对于父元素的定位）2.3 可视化盒模型 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说，这些被占据的空间往往都比单纯的内容要大。 一个盒模型是由content（内容）、border（边框）、padding（填充）和margin（间隔）的4个部分组成的。如果需要精确地排版，有的时候一个像素都不能差。实际使用CSS的用法：padding:1px 上下左右padding都是1像素宽margin:1px 2px 上下margin是1像素，左右是2像素padding:1px 2px 3px 上padding是1像素，左右padding是2像素，下padding是3像素margin:1px 2px 3px 4px 上右下左margin的宽度依次是1、2、3、4像素一个元素的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+左边界2.3 使用CSS控制网页背景1.背景颜色：background-color2.背景图片：属性参数注释backgroundURLNONEinherit图片地址无继承background-repeatrepeatrepeat-xrepeat-yno-repeat平铺横向平铺纵向平铺不重复CSS应用body margin:0; padding:0; background-color:#cc9; background-image:url(background.gif); background-repeat:repeat-x;#containermargin:60px auto 0;width:700px;position:absolute; left:150px;#profiles margin:0; padding:0; list-style-type:none; #profiles li float:left; padding:4px; h1 background-image:url(logo.png); background-repeat:no-repeat; width:137px; height:191px; position:absolute; top:120px; left:270px;h2display:none;h1 spandisplay:none;.clearbothclear:both;li.last position:relative; left:200px; #introwidth:180px;position:absolute;left:420px;top:30px;font:14px arial; #intro ullist-style-type:none;margin:0 0 0 20px;padding:0;font-size:12px; #intro acolor:#fff;font-weight:bold;text-decoration:none;#intro a:hovercolor:black; Chance Wen your eye on the world For more than 20 years, Chance Wens photographs have brought incredible images of landscape to people around the world. United States Canada China Austril