CSS实践03：div布局应用盒模式

1、美食页效果

使用div布局，对网站头部添加背景，设置导航居中，修改导航颜色，效果如下：

2、CSS设置

使用div为头部、内容区域进行布局，设置类名header、main-content

使用div布局，一般情况下，盒模式属性直接写在div上，使网页更灵活，所以边距，边框等一般不写在body上，删除

body{
	padding: 20px;
}

添加如下样式：

.header{
	padding: 10px;
	background-color: #B56663;
}
.main-content{
	padding: 20px;
	border: 1px solid #dddddd;
	margin: 30px 0 0 0;
}

修改导航和h1标题的颜色，并居中，整理CSS代码如下：

h2,h3{
	color:#79B1A3;
}
h1{
	margin: 10px 0 15px 0;
	color:#ffffff;
	text-align: center;
}
.nav a{
	color: #ffffff;/* #00B2C5; */
	text-decoration: none;
}
.nav{
	padding-left: 0;
	text-align: center;
}

整理h2,h3并居中

h2{
	margin: 10px 0 20px 0;
	color:#79B1A3;
	text-align: center;
}
h3{
	margin: 15px 0;
	border-bottom: 1px solid #cccccc; /* 三部分相等,不是00和ff都是灰色,越接近0越深 */
	padding-bottom: 3px;
	color:#79B1A3;
}

将内容块居中，需要先设置div的宽度，再设置左右margin为auto

.main-content{
	width: 500px;
	padding: 20px;
	border: 1px solid #dddddd;
	margin: 30px auto 0 auto/* 30px 0 0 0; */
}

注意width写在margin的前面。