DIV+CSS

DIV+CSS补充讲解一、xhtmlcss基础知识•1）文档类型•当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN•这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多人在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。css样式•加载css样式有以下四种外部样式内部样式行内样式导入样式linkhref=layout.cssrel=stylesheettype=text/css/•这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。即外部样式。styleh2{color:#f00;}/style•这种形式是内部样式表，它是以style和/style结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。css样式•pstyle=font-size:18px;内部样式/p•这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。•@importurl(/css/global.css);•链接样式是以@importurl标记所链接的外部样式表即导入样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@importurl(/css/global.css)的形式链接全局样式，这样就使代码达到很好的重用性。css优先级•id优先级高于class•后面的样式覆盖前面的•指定的高于继承•行内样式高于内部或外部样式总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的DIV中的一列布局•一列固定宽度styletype=text/css#layout{height:300px;width:400px;background:#99FFcc;}/style•一列固定宽度居中#layout{height:300px;width:400px;background:#99FFcc;margin:auto;}•一列自适应宽度#layout{height:300px;background:#99FFcc;}•一列自适应宽度居中body{margin:0;}#layout{height:300px;width:80%;background:#99FFcc;margin:auto;}•一列二至多块布局一列二至多块布局•!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN•htmlxmlns=•head•metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/•styletype=text/cssbody{margin:0;padding:0;}#header{margin:5pxauto;width:500px;height:80px;background:#9F9;}#main{margin:5pxauto;width:500px;height:400px;background:#9FF;}#footer{margin:5pxauto;width:500px;height:80px;background:#9f9;}•/style•/head/p•pbodydivid=header此处显示idheader的内容/divdivid=main此处显示idmain的内容/divdivid=footer此处显示idfooter的内容/div•/body•/htmlDIV二列和三列布局•二列自适应宽度•二列固定宽度•二列固定宽度居中•xhtml的块级元素(div)和内联元素(span)•float属性•三列自适应宽度•三列固定宽度•三列固定宽度居中•IE6的3像素bug二列自适应宽度•!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN•htmlxmlns=•head•metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/•style#side{background:#99FF99;height:300px;width:120px;float:left;}#main{background:#99FFFF;height:300px;width:70%;margin-left:120px;}•/style•/head/p•pbodydivid=side此处显示idside的内容/divdivid=main此处显示idmain的内容/div•/body•/html二列固定宽度居中•!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN•htmlxmlns=•head•metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/•style#content{width:470px;margin:0auto;}#side{background:#99FF99;height:300px;width:120px;float:left;}#main{background:#99FFFF;height:300px;width:350px;margin-left:120px;}•/style•/head/p•pbodydivid=contentdivid=side此处显示idside的内容/divdivid=main此处显示idmain的内容/div/div•/body•/htmlxhtml的块级元素(div)和内联元素(span)•块级元素：就是一个方块，像段落一样，默认占据一行出现；•内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。•可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。float属性•float让元素浮动，在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。三列自适应宽度•!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN•htmlxmlns=•head•metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/•stylebody{margin:0;}#side{background:#99FF99;height:300px;width:120px;float:left;}#side1{background:#99FF99;height:300px;width:120px;float:right;}#main{background:#99FFFF;height:300px;margin:0120px;}•/style•/head/p•pbodydivid=side此处显示idside的内容/divdivid=side1此处显示idside1的内容/divdivid=main此处显示idmain的内容/div•/body•/html三列固定宽度•三列固定宽度可以在三列自适应基础上添加一个父div，并设置这个div的宽度即可，如下，添加一个id为content的父容器。•!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN•htmlxmlns=•head•metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/•stylebody{margin:0;}#content{width:470px;margin:0auto;}#side{background:#99FF99;height:300px;width:120px;float:left;}#side1{background:#99FF99;height:300px;width:120px;float:right;}#main{background:#99FFFF;height:300px;margin:0120px;}•/style•/head/p•pbodydivid=contentdivid=side此处显示idside的内容/divdivid=side1此处显示idside1的内容/divdivid=main此处显示idmain的内容/div/div•/body•/htmlIE6的3像素bug•3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。•IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。body{margin:0;}#side{float:left;background:#99FF99;height:300px;width:120px;_margin-right:-3px;}#main{background:#99FFFF;height:300px;}•但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。