亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

同級的元素最好都統一是塊狀元素或內聯元素

每一個模塊都需要一個居中容器，用來讓網頁內容居中（根據需求而定）

先把頁面結構規劃出來

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;}