-
因为main包含的块全都设置了浮动，而浮动和绝对定位会使块脱离标准文档流，但是head仍在文档流中 所以foot会忽略main的所有块而贴着head块 方法1： .main{ width:860px;height:600px;margin:0 auto;background:#9FC;} 方法2：.footer{ height:50px; background:#9F9; margin:600px 0 0 0;} 方法3：.footer{width:100%; height:50px; background:#9F9; position:absolute;top:700px;} 方法一：.footer{ width:100%;height:50px; background:#9F9; overflow:hidden;} 方法二：.footer{height:50px; background:#9F9; clear:both;}查看全部
-
清除浮动的方法： 一：clear:both(/left/right); 二：overflow:hidden;width:100%; 三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0; 因为main包含的块全都设置了浮动，而浮动和绝对定位会使块脱离标准文档流，但是head仍在文档流中 所以foot会忽略main的所有块而贴着head块 方法1： .main{width:860px;height:600px;margin:0 auto;background:#9FC;} 方法2：.footer{ height:50px; background:#9F9; margin:600px 0 0 0;} 方法3：.footer{width:100%; height:50px; background:#9F9; position:absolute;top:700px;}查看全部
-
3列布局-特殊案例 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定义去掉，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中间空一点出的话，增加margin属性值便可以实现） 左右两侧布局固定宽度，中间部分宽度自适应。则需要采用绝对定位来实现，把左右设置为绝对定位查看全部
-
float:left;左定位 float:right;右定位 margin:0 310px 0 210px;(使main水平居中在浏览器中央，并且与左右div有10px的间距) position:absolute;top:0;right:0px;(使right定位在右侧) position:absolute; left:0; top:0;(使left部分绝对定位)查看全部
-
margin:0 auto; 水平居中查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一列布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px; 【任务1】} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
-
三列： 1、左右两个设定固定宽度(width:...)/中间的不设置宽度这一项； 2、左右两侧都要利用：positon:absolute 3、左侧：left:0;top:0 / 右侧：right:0;top:0查看全部
-
网页布局清除固有格式--margin:0;padding:0 让网页居中--margin:0 auto;查看全部
-
div设置 width(宽度)、height(高度)、background(背景)、如果需要水平居中（margin:0 auto;）查看全部
-
div居中布局 div{margin:0 auto;}查看全部
-
div是一个容器，可以划分出一个区域 magin:0 padding:0 是重新刷新布局查看全部
-
关键语句： .main { width: 100%; height: 800px; background: red; position: relative; /*父元素设置为相对定位*/ /*或者可以有另外一种写法：去掉main元素中的相对定位 .main{width:100%;height:800px;background:red;} .left{widht:200px;height:800px;background:blue;position:absolute;left:0;top:200px;} 这里的位置是相对于浏览器的位置。*/ } .left { width: 200px; height: 800px; background: blue; position: absolute; left: 0; top: 0; /*子元素用绝对定位，用父元素的位置作为参照来定位子元素*/ } /*因为要求4.中“兼容ie6”，所以不能用浮动*/ .right { width: 100%; height: 800px; background: green; margin-left: 210px; /*离浏览器边界210px，即离left元素10px*/查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三列布局</title> <style> .main, .left, .right {height:200px;} .main {width:100%;background:red;float:left} .left {width:200px; background:green;float:left} .right{width:300px; background:blue;float:left} .center {margin: 0 310px 0 210px;height:200px; background:white;} .left {margin-left:-100%;} .right{margin-left:-300px;} </style> </head> <body> <div class="demo1"> <div class="left1">position left 0</div> <div class="center1">margin 0 rightpx 0 leftpx</div> <div class="right1">postion right 0</div> </div> <div class="demo2"> <div class="main"> <div class="center">中间的内容</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <h1>第二种写法可能更好一点</h1> </body> </html>查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
绝对定位并不占标准文档流位置，所以margin：0 310px 0 210px查看全部
举报
0/150
提交
取消