CSS实践01：盒子模型

应用CSS颜色和盒子模型，对egg.html的标题，列表等设置样式。

1、美食页效果

设置前

设置后

2、参考CSS

参照网页效果，使用取色软件，设置h1,h2,h3标题的颜色

/* h1{
 		color:#79B1A3;
 	}
 	
 	h2{
 		color:#79B1A3;
 	}
 	h3{
 		color:#79B1A3;
 	} */
 	/* 上述三个样式是一样的,等价如下: */
 	h1,h2,h3{
 		color:#79B1A3;
 	}

重置浏览器样式

 html,body,h1,h2,h3,p,ol,ul,li,a{
	 padding: 0; /* 0可以省略px */
	 border: 0;
	 margin: 0;
 }

设置所有标签和body之间的距离

body{
 	padding: 20px;
 }

设置标题的样式

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

设置菜单水平显示

 ul li{
 	display:inline;
 }

设置列表的左边距

ul{
 	padding: 0 0 0 50px;
 }
 	
 ol{
 	padding: 0 0 0 50px;
 }