第五章CSS盒模型

@-Seven

于 2024-10-11 10:50:58 发布

阅读量699

点赞数 23

文章标签： css 前端

本文链接：https://blog.csdn.net/jinjin77/article/details/142773692

版权

5.1盒模型的定义

Web页面上大部分的元素(特别是块状元素)都可以看作是一个盒子，W3C组织建议把所有网页上的对象都放在一个盒子(box)中，设计者可以通过创建定义来控制这个盒子的各种属性，这些对象包括段落、列表、标题、图片及层。
盒子的结构可以看作一个矩形框，包括边框(border)、外边距(margin)、内边距(padding)，以及元素内容(content)，元素会在指定的高度和宽度范围内在页面上显示出来。

5.2CSS元素的高度和宽度

指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。而浏览器实际大小的元素，还必须添加内边距、外边距和边框。而增加或减少内边距、外边距和边框，不会影响内容区域的尺寸，只会增加盒模型的总尺寸。

例5.1元素 CSS 的宽度是100 像素。

<! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>示例5.1</title>
		<style type="text/css">
		*{
			margin :0;
			padding:0;
		}
		div{
			width:100px;
			border:10px solid red;
			padding:30px;
			margin:10px;
			float:left;
		}
		</style>
	</head>
	<body>
		<h1>盒模型示例</hl>
		<p>CSS 盒模型本质上是一个盒子,外边距10px;内边距30px;边框10px 的红色实线;盒子左浮动在同一行处。</p >
		<div><img src="img/c8eb0df040819bf2dc09a3f57fb3935.jpg"/></div>
		<div><img src="img/21b7ac4a018b5e69ab093280df08dcf.png"/></div>
	</body>
</html>

1.盒模型的宽度

盒模型的宽度=左外边距(margin-left)+左边框(border-lef)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-night)+右边框(border-right)+右外边距(margin-right)。

2.盒模型的高度

盒模型的高度=上外边距(margin-top)+上边框(border-top) +上内边距(padding- top)+内容高度(height)+下内边距(padding-bottom)+下边框(border-bottom)+下外边
距(margin-bottom)。

块级元素和行级元素的高度与宽度

<! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>示例5.2</title>
		<style type="text/css">
		.ap{
			width:200px;
			height:100px;
			border:2px solid red;
			margin:10px;
			background-color:lightblue;
		}
		</style>
	</head>
	<body>
		<div class="ap">这是div块级元素,可设置宽度和高度</div>
		<span class=" ap">这是 span行级元素,不能设置宽度和高度</span>
	</body>
</html>

例5.2设置行级元素高度和宽度

<! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>示例5.2</title>
		<style type="text/css">
		.ap{
			width:200px;
			height:100px;
			border:2px solid red;
			margin:10px;
			background-color:lightblue;
		}
		</style>
		<style type="text/css">
			.ap{
				width: 200px;
				height: 100px;
				border: 2px solid red;
				margin: 10px;
				background-color: #00ff00;
				display: block;                  /块级显示*/
			}
		</style>
	</head>
	<body>
		<div class="ap">这是div块级元素,可设置宽度和高度</div>
		<span class=" ap">这是 span行级元素,不能设置宽度和高度</span>
	</body>
</html>

5.3边距设置和边框设置

5.3.1外边距设置

1.上外边距

语法：margin-top: length | percent | auto

参数: length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度。auto值为自动提取边距值，是默认值。

说明:设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元素的 height 属性或width属性，或者设定position属性为absolute。

2.右外边距

语法:margin-right: length | percent I auto

参数:同margin-top

说明:同margin-top。

3.下外边距

语法:margin-bottom: length | percent I auto

参数:同margin-top。说明:同margin-top。

4.左外边距

语法:margin-left: length | percent I auto

参数:同margin-top

说明:同margin-top。

例5.3四边外边距设置

<! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>示例5.3</title>
		<style type="text/css">
		#big{
			width:450px;
			height: 200px;
			margin: 0;
			background-color:#ff0;
		}
		#small1,#small2,#small3,#small4{
			width: 200px;
			height: 50px;
			text-align: center;
			background-color: #0ff;
		}
		#small1{
			margin-left: 20px;
			margin-bottom: 30px;
		}
		#small2{
			margin-right: 20px;
			margin-top: 10px;
			float: right;
		}
		#small3{
			margin-bottom: 5px;
		}
		#small4{
		margin-left: 10px;
		margin-top: 15px;
		}
		</style>
	</head>
	<body>
		<div id="big">
		<div id="small1">A:左外边距20像素,下外边距30像素</div>
		<div id="small2">B:右外边距20像素,上外边距10像素,右浮动</div>
		<div id="small3">C:下外边距5像素</div>
		<div id="small4">D:左外边距10像素,上外边距15像素</div>
		</div>
	</body>
</html>

5.外边距

语法:margin:length | percent | auto
参数:length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度，左右外边距允许使用负数。auto值为自动提取边距值，是默认值。
说明:设置对象四边的外边距，包括margin-top(上外边距)、margin-right(右外边距)、margin-bottom 下外边距)、margin-lef(左外边距)，外边距始终是透明的。

例5.4外边距设置

<! DOCTYPE html>
<html>
<head>
	<meta charset=" utf-8"/>
	<title>示例 5.4</title>
	<style type="text/css"> 
	div{
		border:solid #0000FF 1px; 
		width:auto; 
		margin :5px; 
		float :left;
	}
	.margin1{
			background-color:#9F6; 
			border:none;/*无边框*/ 
			width:200px; 
			height:80px;
			margin:0px 15px 5px 30px;
	}
	.margin2{
		background-color:yellow ; 
		border:none; width:200px; 
		height:80px;
		margin:5px 30px 15px;
	}
		.margin3{
			background-color:lightgreen ;
			border:none;
			width:200px; 
			height:80px;
			margin:10px 30px;
	}
	.margin4{
				background-color:#FC0; 
				border:none; width:200px; 
				height:80px; 
				margin:15px;
	}
	    </style>
	</head>
	<body>
		<div>
			<div class =" margin1">上、右、下、左外边距分别为:0px、15px、5px、30px</div>
			</div>
			<div>
			<div class=" margin2">上外边距为:5px,下外边距为:15px,左右外边距为:30px</div>
			</div>
			<div>
			<div class=" margin3">上、下外边距为10px,左、右外边距为:30px</div>
			</div>
			<div>
			<div class=" margin4">上、下、左、右外边距均为:15px</div>
			</div>
		</body>
	</html>

5.3.2 外边框合并

1.行级元素外边距合并

行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和。

例5.5行级元素之间的外边距设置。

<! DOCTYPE html>
<html>
	<head>
		<meta charset =" utf-8"/>
		<title>示例5.5</title>
		<style type="text/css">
		*{
			margin:50px;	
		}
		.hb1{
			background-color:yellow; 
			margin-right:20px; 
			padding:30px;
		}
		.hb2{
			background-color:lightpink; 
			margin-left:30px; 
			padding:30px;
		}
		</style>
		</head>
		<body>
			<span class=" hb1" >黄色 span</span><span class="hb2">粉红色span</span>
	</body>
</html>

2.块级元素外边框合并

块级元素的盒子相遇，盒子与盒子之间的距离等于两盒子中外边距的较大者。

例5.6垂直相遇块级元素之间的外边距设置。

<! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>示例5.6</title>
		<style type="text/css">
			*{
				margin :50px;
			}
			.div1{
				background-color:yellow; 
				margin-bottom:30px; 
				padding:30px;
			}
			.div2{
				background-color:lightpink; 
				margin-top:30px;
				padding:30px;
			}
			</style>
		</head>
		<body>
			<div class="div1">黄色div</div>
			<div class="div2">粉红色div</div>
	</body>
</html>

5.3.3内边距设置

元素的内边距用来控制边框和内容区之间的空白距离，并非实体，用padding属性表示，类似于HTML中表格单元格的填充属性。内边距(padding)和外边距(margin)很相似，都是透明不可见的，只是内边距和外边距之间还有边框。从语法和用法上来说，内边距的属性与外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性，padding属性接受length 值或percent值，区别于外边距，内边距不可以使用负值。

例5.7内边距的设置。

<!DOCTYPE html>
<html>
	<head>
		<meta chanset=" utf-8" />
		<title>示例5.7</title>
		<style type="text/css"> 
		span{
			background-color:#FFFF99;
		}		
		div{
			border:solid #000000 1px;
			width:auto; 
			height:auto;
			margin:15px; 
			float:left;
		}
		.padding1{
			padding-top:30px; 
			padding-left:15px;
		}
		.padding2{
			padding-bottom:30px; 
			padding-right:30px;
        }
		.padding3{
			padding:5px 30px;
		}
		.padding4{
			padding:20px;
		}
		</style>
	</head>
	<body>
		<div class =" padding1">
		<span>文字元素的上内边距为30px,左内边距为15px</span>
		</div>
		<div class =" padding2">
		<span>文字元素的下内边距为30px,右内边距为30px</span>
		</div>
		<div class=" padding3" >
		<span>文字元素的上、下内边距为5px,左、右内边距为:30px</span>
		</div>
		<div class=" padding4" >
		<span>文字元素的上、右、下、左内边距均为:20px</span>
		</div>
	</body>
</html>

5.3.4边框设置

1.上边框

语法:border-top:border-style | border-width | border-color

参数:该属性是复合属性。需要通过参数设置来实现。

2.右边框

语法:border-right: border-style | border-width | border-color

参数:该属性是复合属性。需要通过参数设置来实现。

3.下边框

语法:border-bottom: border-style | border-width | border-color

参数:该属性是复合属性。需要通过参数设置来实现。

4.左边框

语法:border-left: border-style | border-width | border-color

参数:该属性是复合属性。需要通过参数设置来实现。

5.边框样式

在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在Web页面中边框就不会显示。

border-style 是一个复合属性，可以同时取1~4个值，取值方法与外边距相似。边框属性有12个值可选，包括默认(initial)和无边框(none)。

6.边框宽度

在CSS 中，宽度是通过border-width属性来设置边框粗细的。
与border-style属性相同，border-width也是一个复合属性。设置边框宽度时，可以直接输入 length 确定长度值，如5px或2cm，但不可以为负值;或者选择系统预设属性值。

7.边框颜色

在CSS中，边框颜色是通过border-color属性来设置的，该属性可以使用任何类型的颜色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的border-style设置为 none 或者border-width设置为0，本属性将失去作用。

例5.8边框的设置。

<! DOCTYPE html>
<html>
	<head>
		<meta charset=" utf-8" />
		<title>示例5.8</title>
		<style type="text/css"> 
		h2{
			text-align:center;
			barder-bottom:dashed 5px red ;
		}
		p{
			font-family:"楷体";
			border-top:solid thin purple;
			border-right:dashed 5px #99FF66; /*水绿色*/ 
			border-bottom:double thick purple;
			border-left :dashed 5px #FF9999:/*粉红色*/
		}
		div{
			border-style:solid dashed double; 
			border-width:10px;
			border-color:deepskyblue ;
		}
		</style>
	</head>
	<body>
		<h2>边框的实现</h2>
		<p>这个页面主要显示边框的不同样式、宽度和颜色,以实现对象的美观化。</p >
		<div>1.h2处所用边框 CSS是5像素红色虚线的下边框;<br>
		2.p处所用边框CSS是细的紫色实线上边框、5像素水绿色虚线右边框、粗的紫色双实线下边框、5像素粉红色虚线左边框;<br> 
		3.div处所用边枢 CSS是10像素蓝色实线、虚线、双实线。
		<div>	
	</body>
</html>

5.3.5新增边框的属性

1.圆角边框

例5.9圆角边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>示例5.9</title>
		<style type="text/css"> 
		div{
		border:2px solid red; 
		border-radius:25px;
		}
		</style>
	</head>
	<body>
		<center>
		<div>利用border-radius属性设置四个圆角边框。</div>
		</center>
	</body>
</html>

2.阴影边框

box-shadow:向四个边框添加一到多个阴影，需要设置相关参数。

例5.10阴影边框的设置

<! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>示例 5.10</title>
		<style type="text/css"> 
		div{
			margin:100px;
			border:2px solid blue;
			box-shadow:-15px -10px 50px red;
		}
		</style>
	</head>
	<body>
		<div>利用box-shadow属性设置边框的红色阴影。其中阴影向左偏移15像素,向上偏移20像素,模糊距离为50像素。
		</div>
	</body>
</html>

3.图片绘制边框

border-image:设置所有边框用图片显示，需要嵌入相关图片，但是部分浏览器不支持此属性。

例5.11图片边框的设置。

<! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>示例5.11</title>
		<style type="text/css"> 
		div{
			margin:100px;
			border:50px solid blue;
			border-image:url(img/border.jpg)5 10 round;
		}
		</style>
		</head>
		<body>
			<div>利用border-image属性设置图片边框铺满效果。上下向内偏移5像素,左右向内偏移10像素。</div>
	</body>
</html>

5.4CSS元素的定位

前面所讲的盒模型都是标准流情况下可用的，但是盒模型仅有的几种排版对布局有很大的限制，导致元素无法在页面中随意地摆放，因此，我们需要使用盒子的定位(position)来增加排版的灵活性和适应性。
定位(position)的思想是，它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
语法:position: static | relative | absolute | fixed
参数:static是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认，又称静态定位。relatives是相对定位，生成相对定位的元素，相对于其正常位置进行定位。ab- solute 是绝对定位，相对于父元素或者浏览器窗口进行定位，需要top、right、bottom和left属性辅助完成。fixed是固定定位，相对于浏览器窗口进行定位，需要top、right、boitom 和 left属性辅助完成。

5.4.1static定位

statie是HTML元素的默认值，不受top、right、bottom和 left属性影响，元素出现在正常的文档流中。

例5.12 静态定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>示例5.12</title>
		<style type="text/css" >
			.father{
				border:2px solid red; width:300px; height:250px;
				}
			.sonl{
				border:2px double red; background-color:yellow; width:200px; height:80px;
				}
			.son2{
					border:2px double red; width:200px; height:25px; margin-top:50px;
					}
		</style>
	<head>
	<body>
		<div class=" father" >父盒子:无定位
		<div class=" sonl">子盒子1:无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
		<div class=" son2">子盒子2:无定位的盒子</div>
		</div>
	</body>
</html>

5.4.3absolute定位

absolute 脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子，如果父盒子没有定位，那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置。

1.相对浏览器绝对定位

利用position、top和left的参数相对浏览器绝对定位，独立开了原来位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS元素的定位</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 200px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: absolute;		/*相对浏览器绝对定位*/
				top: 10px;
				left: 30px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：无定位的盒子
			<h2>静态定位的盒子</h2>
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
	</body>
</html>

2.相对父盒子绝对定位

父盒子设置了相对定位，所以子盒子以最近的已定位的父盒子为基准，进行偏移，独立开了原来位置，其原来位置被填充

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS元素的定位</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 200px;
				position: relative;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: absolute;
				top: 10px;
				left: 30px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：相对定位
		<div class="son1">子盒子1：独立上浮，相对父盒子右边水平偏离10像素，相对父盒子上边垂直偏离30像素
			
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
	</body>
</html>

5.4.4fixed定位

hxed 类似于 absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置。
相对于浏览器窗口是固定不变的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS元素的定位</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 200px;
				/* position: relative; */
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: fixed;
				top: 10px;
				right: 30px;
			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：固定定位，相对浏览器右边水平偏离10像素，相对浏览器上边垂直偏离30像素
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>

5.5 CSS元素的浮动

5.5.1 盒子的浮动添加

float 属性: 用于控制元素的浮动方向。可以取值：
left: 元素向左浮动，允许文本和内联元素在其右侧环绕。
right: 元素向右浮动，允许文本和内联元素在其左侧环绕。
none: 默认值，元素不浮动。
inherit: 继承父元素的 float 属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS元素的浮动</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				background-color: #ffCCff;
				padding: 5px;
			}
			.father div{
				border: 2px dashed blue;
				background-color: #CCFFFF;
				width: 100px;
				height: 20px;
				margin: 10px;
				padding: 10px;
				
			}
			.father p{
				border: 2px dotted green;
				background-color: #FFFF99;
			}
		</style>
	</head>
	<body>
		<div class="father">
		<h2>父盒子</h2>
		<div style="float: right;">右浮动盒子1</div>
		<div>标准流盒子2</div>
		<div>标准流盒子3</div>
		<p>css 中,有一个 foat 属性,默认为 none,也就是标准流通常的情况。若果将 foat 属性的值设
		置为let 或 nght,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,
		而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>
</html>

5.5.2 盒子的浮动清除

浮动会导致父元素的高度塌陷，因为浮动的元素不占据空间。为了解决这个问题，可以使用以下几种方式清除浮动：

设置父容器的 overflow 属性为 auto 或 hidden：css.container { overflow: auto; /* 或者 overflow: hidden; */ }

语法： clear：left | right | both | none

参数：left清除左边浮动，right清除右边浮动，both清除左右边浮动。

1.未清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS元素的浮动</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				background-color: #ffCCff;
				padding: 5px;
			}
			.father div{
				border: 2px dashed blue;
				background-color: #CCFFFF;
				width: 100px;
				height: 20px;
				margin: 10px;
				padding: 10px;
				
			}
			.father p{
				border: 2px dotted green;
				background-color: #FFFF99;
			}
		</style>
	</head>
	<body>
		<div class="father">
		<h2>父盒子</h2>
		<div style="float: right;">右浮动盒子1</div>
		<div style="float: right;">右浮动盒子2</div>
		<div style="float: right;">右浮动盒子3</div>
		<p>css 中,有一个 foat 属性,默认为 none,也就是标准流通常的情况。若果将 foat 属性的值设
		置为let 或 nght,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,
		而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>
</html>

2.清除浮动后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS元素的浮动</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				background-color: #ffCCff;
				padding: 5px;
			}
			.father div{
				border: 2px dashed blue;
				background-color: #CCFFFF;
				width: 100px;
				height: 20px;
				margin: 10px;
				padding: 10px;
				
			}
			.father p{
				border: 2px dotted green;
				background-color: #FFFF99;
			}
		</style>
	</head>
	<body>
		<div class="father">
		<h2>父盒子</h2>
		<div style="float: right;">右浮动盒子1</div>
		<div style="float: right;">右浮动盒子2</div>
		<div style="float: right;">右浮动盒子3</div>
		<p style="clear: both;">css 中,有一个 foat 属性,默认为 none,也就是标准流通常的情况。若果将 foat 属性的值设
		置为let 或 nght,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,
		而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>
</html>

5.6 综合案例——昵心美食空间

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>昵心美食空间</title>
    <style type="text/css">
        * {
            background-color: #ffff99;
            margin: 0;
            padding: 0;
        }
        a {
            color: red;
        }
        .all {
            width: 700px;
            height: 650px;
            margin: 10px auto;
            padding: 5px;
            background-image: url(img/bg1.JPG);
        }
        .banner {
            width: 700px;
            height: 70px;
        }
        .menu {
            width: 690px;
            height: 40px;
            padding: 5px;
        }
        .main {
            width: 700px;
            height: 450px;
            margin: 5px 0;
            position: relative;
        }
        .left, .right {
            width: 150px;
            height: 440px;
            border: 1px solid #999; 
            float: left;
        }
        .middle {
            width: 384px;
            height: 450px;
            margin: 0 5px;
            float: left;
            font-size: 20px;
            font-family: "楷体";
            font-weight: 700;
            color: #0000ff;
        }
        .one {
            width: 380px;
			height: 155px;
            border: 1px solid #999;
        }
        
        .two {
            width: 255px;
            height: 100px;
            border: 5px double red;
			margin-top: 20px;
            margin-bottom: 20px;
            border-radius: 25px;
        }
		.three{
			width: 380px;
			height: 155px;
			border: 1px solid #999;
		}
        .bottom {
            width: 700px;
            height: 70px;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="banner">
            <img src="img/banner.jpg" width="700" height="70"  />
        </div>
        <div class="menu">
            <img src="img/menu.jpg" width="690" height="40"  />
        </div>
        <div class="main">
            <div class="left">
                <marquee direction="up">
                    <img src="img/mm_1.jpg" width="150" height="140"  />
                    <img src="img/mm_2.jpg" width="150" height="140"  />
                    <img src="img/mm_3.jpg" width="150" height="140" " />
                </marquee>
            </div>
            <div class="middle">
                <div class="one">
                    <img src="img/font.jpg" width="25" height="25"  />为您推荐
                    <br><br>
                    <img src="img/x_1.jpg" width="80" height="40"  />
                    <img src="img/x_2.jpg" width="80" height="40"  />
                    <img src="img/x_3.jpg" width="80" height="40"  />
                    <img src="img/x_4.jpg" width="80" height="40"  />
                    <img src="img/x_5.jpg" width="80" height="40"  />
                    <img src="img/x_6.jpg" width="80" height="40"  />
                </div>
                <div class="two">
                    <h1>昵心美食空间</h1>
                </div>
                <div class="three">
                    <img src="img/font.jpg" width="25" height="25"  />团购信息
                    <br>
                    <a href="#">1.火锅团购</a><br>
                    <a href="#">2.烧烤团购</a><br>
                    <a href="#">3.自助餐团购</a><br>
                    <a href="#">4.新春特惠</a><br>
                </div>
            </div>
            <div class="right">
                <marquee direction="up">
                    <img src="img/good_1.jpg" width="150" height="140"  />
                    <img src="img/good_2.jpg" width="148" height="140"  />
                    <img src="img/good_3.jpg" width="148" height="140"  />
                </marquee>
            </div>
        </div>
        <div class="bottom">
            <hr color="#0000FF">
            <center style="font-family:'楷体';">版权所有 &copy; 昵心美食空间<br />
			地址:江门市大学路XXX号，邮编:500000，电话:0750-9999999</center>
        </div>
    </div>
</body>
</html>