                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /如何用CSS進行網頁布局

為什么middle上面有空白？

<<!DOCTYPE?html>
<html>
<meta?charset="utf-8">
<head>
	<title>lianxi</title>
	<style?type="text/css">
	body{margin:?0;padding:0;}
	.left{
		position:?absolute;
		width:?200px;
		top:0;left:?0;
		background:?#ccc;
		height:?500px;
	}
	.mid{
		height:?500px;
margin:?0?310px?0?210px;
		background:?black;
		top:0;
	}
	.right{		
		height:?500px;
		position:?absolute;
		width:?300px;top:0;
		right:?0;
		background:?#ccc;
	}
	</style>
</head>
<body>
		<div?class="left">left</div>
		<div?class="mid"></div>
		<div?class="right">right</div>
	
</body>
</html>

如圖

rabbitter

2016-03-10

源自：如何用CSS進行網頁布局 4-1

關注問題我要回答

599

操作

收起

3 回答

ZJD_UESTC
2016-03-27

沒有清楚默認樣式。

body{margin: 0;padding: 0}

0 回復有任何疑惑可以回復我~

收起回答

big_person
2016-03-11

沒有發現太明顯錯誤，不過你的思路有些混亂。

下課之后再給你研究研究

下面我自己寫的一段

? <!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
??? <title>lianxi</title>
??? <style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
.outer{ width:800px; height:500px; background-color:red; margin:auto}
.left{ width:300px; height:500px; background-color:blue; float:left}
.right{ width:300px;height:500px; background-color:green; float:right}
.mid{height:500px; background-color:yellow; margin-left:305px; margin-right:305px}
??? </style>
</head>
<body>
?? ?<div class="outer">//將左中右看成一個整體
??????? <div class="left">left</div>
??????? <div class="right">right</div>
??????? <div class="mid">騷年加油！</div>
???? </div>? ?
??? ?
</body>
</html>