同级的元素最好都统一是块状元素或内联元素

每一个模块都需要一个居中容器，用来让网页内容居中（根据需求而定）

先把页面结构规划出来

css文件规则

1. 重置样式：重置标签的默认样式，让它们风格统一
   

2. 公共样式：项目中可重用的样式

3. 独立样式：页面中单独的样式
   

审视PSD图片，打开PSD文件，对其结构进行分析，找出头部、底部、主体，看看哪些是可以重用的。

总结及思考

更换IE版本

有背景……

包含psd文件+源码+图片资源，可以看我的博客

https://blog.csdn.net/sinat_38368658/article/details/106441801

附上跟着敲的代码（部分视频上未出现的，已经自行修补）【（四）】

文件名（主体页面内容部分）：index.css

.index-banner {	position: relative;	background: #b3b3b3;}.index-banner-bg {	height: 570px;	overflow: hidden;	/*防止图片溢出出现滚动条*/}.index-banner-bg img {	margin: 0 auto;}.index-banner-text {	position: absolute;	top: 200px;	left: 50%;	margin-left: -388px;}.index-banner-text .text-logo {	width: 776px;	height: 117px;	background: url("../images/index-banner-textlogo.png") no-repeat;	/*图片不平铺*/}.index-banner-text .text-info {	margin-top: 17px;	text-align: center;	color: #fff;}.index-banner-text .text-info .line {	display: inline-block;	width: 40px;	border-top: 1px solid #fff;	vertical-align: middle;}.index-banner-text .text-info .txt {	margin: 0 26px;}/*菜单*/.index-menu {	position: relative;	border-top: 4px solid #f34949;}.index-menu .menu-tips {	position: absolute;	left: 50%;	top: 0;	margin-left: -78px;	width: 156px;	height: 75px;	text-align: center;	line-height: 65px;	color: #fff;	font-size: 20px;	background: #f34949;}.index-menu .menu-tips:after {	position: absolute;	content: '';	left: 0;	bottom: 0;		width: 0;	height: 0;	border-left: 78px solid transparent;	border-right: 78px solid transparent;	border-bottom: 10px solid #fff;}.index-menu .menu-list {	margin-top: 150px;		overflow: hidden;		/*超出部分隐藏*/}.index-menu .menu-list ul {	width: 1160px;}.index-menu .menu-item {	float: left;	width: 520px;	margin-right: 60px;	margin-bottom: 56px;}.index-menu .menu-item .title, .index-menu .menu-item .line {	float: left;}.index-menu .menu-item .price {	float: right;}.index-menu .menu-item .title {	width: 230px;	color: #555;	overflow: hidden;	white-space: nowrap;		/*规定文本不换行*/	text-overflow: ellipsis;		/*规定文本溢出用省略号*/}.index-menu .menu-item .commet {	margin-top: 4px;	color: #b7b7b7;	font-size: 12px;}.index-menu .menu-item .line {	margin-top: 10px;	width: 192px;	border-top: 1px solid #e3e1e1;}.index-menu .menu-more-btn {	margin: 0 auto;	margin-top: 32px;	width: 114px;	height: 32px;	padding-left: 16px;	border: 1px solid #d7d5d5;	font-size: 14px;	line-height: 32px;	color: #b7b7b7;}.index-menu .menu-more-btn .icon {	display: inline-block;	width: 11px;	height: 7px;	margin-left: 10px;	background: url("../images/index-btn-icon.gif") no-repeat;}.index-panel {	margin-top: 200px;			/*BFC模式，margin-top与margin-bottom正正相遇，取最大值*/	margin-bottom: 200px;}.index-panel-header h3 {	float: left;	font-size: 20px;	color: #3b3b3b;	font-weight: normal;	margin-right: 48px;}.index-panel-header .line {	float: left;	width: 200px;	margin-top: 9px;	border-top: 1px solid #e5e3e3;}.index-panel-header .btn-group {	float: right;	font-size: 0;		/*清除相邻行内块级像素之间的4px间距*/}.index-panel-header .btn {	display: inline-block;	margin-left: 11px;	width: 9px;		/*制作9px直径的圆点*/	height: 9px;	background: #dedede;	border-radius: 50%;}.index-panel-header .active{	background: #9b9b9b;}.index-panel-body {	margin-top: 75px;}.index-food-list {	overflow: hidden;}.index-food-list ul {	width: 1160px;}.index-food-list .food-item {	float: left;	width: 230px;	margin-right: 60px;}.index-food-list .food-item .banner {	margin-bottom: 30px;	height: 202px;}.index-food-list .food-item .name {	color: #555;	margin-bottom: 10px;}.index-food-list .food-item .price {	float: right;}.index-food-list .food-item .star-bar {	font-size: 0;}.index-food-list .food-item .star {	display: inline-block;	width: 12px;	height: 13px;	margin-right: 5px;	background: url("../images/index-star.png") no-repeat;}.index-food-list .food-item .nostar {	background-position: 0 -13px;		/*定位图片（集）中的位置，显示某部分*/}.index-pics {	height: 380px;	overflow: hidden;}.index-pics .pic-col {	float: left;}.index-pics .pic-col-m {	width: 353px;}.index-pics .pic-col-s {	width: 287px;}.index-pics .pic-col-l {	width: 460px;}