DIV+CSS制作技巧.pptVIP

DIV+CSS 为什么要学DIV+CSS？ 学习目标 从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面。 课程项目： 基础 css优先级 ■id优先级高于class ■后面的样式覆盖前面的 ■指定的高于继承 ■行内样式高于内部或外部样式 ■总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的 css盒模型组成 css盒模型是重点。盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。 层：div……/div div 可定义文档中的分区或节。 div 标签可以把文档分割为独立的、不同的部分，相当于一个个“容器”。对于布局十分有效。 如果用 id 或 class 来标记 ，那么div标签的作用会变得更加有效。 层的表现 基本布局一：一列 ■一列固定宽度 1列.html ■一列固定宽度居中 margin:auto; ■一列自适应宽度 ■一列自适应宽度居中 ■一列二至多块布局 2上中下.html 自适应宽度 自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时，它默认是相对于浏览器显示的.为什么还有那么宽的白边呢？这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时，body，h1－h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉。 注意： 为什么两个相邻的层中间的间距不是10px，而是5px呢？按照我们正常的理解，认为应该是两个值相加，其实这里是两个合并后取最大值。用css手册中的话说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。 基本布局二：两列 ■二列自适应宽度 左边120px，右边不限 3两行.html ■二列固定宽度 左边120px，右边500px ■二列固定宽度居中 添加父层 4两行居中.html ■xhtml的块级元素(div)和内联元素(span) 块级元素：就是一个方块，像段落一样，默认占据一行出现； 内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。 一般的块级元素诸如段落p、标题h1h2...、列表,ulolli 、表格table、表单form、DIVdiv和BODYbody等元素。而内联元素则如: 表单元素input、超级链接a、图像img、span ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。 ■float属性 float让元素向左浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间. 菜单的制作 利用列表纵向和横向菜单。 基本布局三：三列以上 ■三列自适应宽度 5三列－左右固定.html ■三列固定宽度 6三列－固定－居中.html ■三列固定宽度居中 可恶的IE6 ■IE6的3像素bug body { margin:0;} #side { float: left; background:#99FF99; height: 300px; width: 120px;} #main { background: #99FFFF; height: 300px;} body { margin:0;} #side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;} #main { background: #99FFFF; height: 300px; } * *