实验2：DIV+CSS布局实验 - 副本.pdfVIP

实验2 DIV+CSS 布局 1 实验目的 1) 了解页面常用布局结构； 2) 掌握DIV 的使用方法； 3) 掌握DIV+CSS 布局的基本方法； 2 实验内容 1) 制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标 出区域即可； 导航区 列 内容区 表 区 页脚区 3 实验要求 1) 了解页面常用布局结构； 2) 掌握DIV 的使用方法； 3) 掌握CSS 布局的基本方法； 1 4 实验步骤 4.1 CSS 布局入门 CSS 布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格， 通过表格的间距或者用无色透明的GIF 图片来控制文布局版块的间距；而现在则 采用层(div)来定位，通过层的margin 、padding 、border 等属性来控制版块的间距。 定义DIV ，分析一个典型的定义div 例子： #sample{ margin: 10px 10px 10px 10px; padding:20px 10px 10px 20px; border-top: #ccc 2px solid; border-right: #ccc 2px solid; border-bottom: #ccc 2px solid; border-left: #ccc 2px solid; background: url(./images/templatemo_ads.jpg) #FEFEFE no-repeat right bottom; color: #666; text-align: center; line-height: 150%; width:60%; } 说明如下： 1) 层的名称为sample，在页面中用就可以调用这个样式； 2) margin 是指层的边框以外留的空白，用于页边距或者与其它层制造一个 间距。10px 10px 10px 10px分别代表上右下左(顺时针方向) 四个边距， 如果都一样，可以缩写成margin: 10px;。如果边距为零，要写成margin: 0px; ； 3) 注意：当值是零时，除了rgb 颜色值0%必须跟百分号，其他情况后面可 以不跟单位px。margin 是透明元素，不能定义颜色； 4) padding 是指层的边框到层的内容之间的空白。和margin 一样，分别指定 上右下左边框到内容的距离。如果都一样，可以缩写成padding:0px。单 独指定左边可以写成padding-left: 0px; 。padding 是透明元素，不能定义 颜色； 5) border 是指层的边框，border-right: #ccc 2px solid;是定义层的右边框颜 2 色为#ccc，宽度为2px，样式为solid直线。如果要虚线样式可以用 dotted； 6) background 是定义层的背景。分2 级定义，先定义图片背景，采用 url(../images/bg_logo.gif)来指定背景图片路径；其次定义背景色 #fefefe。no-repeat指背景图片不需要重复，如果需要横向重复用 repeat-x,纵向重复用repeat-y,重复铺满整个背景用repeat。后面的 right bottom;是指背景图片从右下角开始。如果没有背景图片可以只定 义背景色background: #fefefe ； 7) color 用