更换IE版本

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

文件名（主体页面内容部分）：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;}

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

文件名（公共样式部分）：reset.css

.public-header {	height: 110px;}.public-header .header-logo {	float: left;	margin-top: 40px;	background: url("../images/index-header-logo.png");	/* .. 上级目录*/}.public-header .header-logo a {	width: 181px;	height: 54px;}.public-header .header-nav {	float: right;	font-size: 14px;}.public-header .header-nav .item {	float: left;	margin-top: 44px;	margin-left: 50px;}.public-header .header-nav a {	color: #3b3b3b;}.public-header .header-nav a:hover {	text-decoration: underline;}.public-container {	position: relative;	margin: 0 auto;	width: 1100px;}.public-footer {	height: 218px;	padding-top: 100px;	background: #3b3b3b;}.public-footer .footer-col {	width: 230px;	float: left;	margin-right: 60px;	font-size: 16px;	color: #fff;	line-height: 1.8;}.public-footer .footer-col:last-child {	margin-right: 0;}.public-footer .footer-logo {	width: 182px;	height: 55px;	margin-top: -10px;	margin-bottom: 12px;	background: url("../images/index-footer-logo.png");}

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

文件名（重置默认样式部分）：reset.css

body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, input, form, a, p, textarea {	padding: 0;	margin: 0;	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}ol, ul, li {	list-style: none;			/*序号去默认，点*/}a {	text-decoration: none;		/*去链接下划线*/	display: block;			/*块级化*/	color: #fff;}img {	border: none;			/*默认自带4px间距*/	display: block;}.clearfloat {				/*清除浮动样式*/	zoom: 1;}.clearfloat:after {				/*万能清除浮动样式，伪元素*/	display: block;	clear: both;	content: "";	visibility: hidden;	height: 0;}

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

文件名（主页部分）：index.html

代码：（格式自己调【注意图片img】）

<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>psd练习</title><link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/common.css" /><link rel="stylesheet" href="css/index.css" /></head><body>	<div class="public-header">		<div class="public-container clearfloat">			<div class="header-logo"><a href=""></a></div>			<ul class="header-nav clearfloat">				<li class="item"><a href="">Our Story</a></li>				<li class="item"><a href="">Menu</a></li>				<li class="item"><a href="">Reservations</a></li>				<li class="item"><a href="">News</a></li>				<li class="item"><a href="">Rviews</a></li>			</ul>		</div>	</div>	<div class="index-banner">		<div class="index-banner-bg"><img src="images/demo1.jpg" alt="这里是大图 demo1.jpg" /></div>		<div class="index-banner-text">			<div class="text-logo"></div>			<p class="text-info">				<i class="line line-l"></i>				<span class="txt">resto restaurant home page website template</span>				<i class="line line-r"></i>			</p>		</div>	</div>	<div class="index-menu">		<div class="menu-tips">The Menu</div>		<div class="public-container menu-list">			<ul class="clearfloat">				<li class="menu-item clearfloat">					<a class="title" href="">						<h4>Voluptate cillum fugiat.</h4>						<p class="commet">Cheese, tomato, mushrooms, onions.</p>					</a>					<div class="line"></div>					<div class="price">$50</div>				</li>				<li class="menu-item clearfloat">					<a class="title" href="">						<h4>Voluptate cillum fugiat.</h4>						<p class="commet">Cheese, tomato, mushrooms, onions.</p>					</a>					<div class="line"></div>					<div class="price">$50</div>				</li>				<li class="menu-item clearfloat">					<a class="title" href="">						<h4>Voluptate cillum fugiat.</h4>						<p class="commet">Cheese, tomato, mushrooms, onions.</p>					</a>					<div class="line"></div>					<div class="price">$50</div>				</li>				<li class="menu-item clearfloat">					<a class="title" href="">						<h4>Voluptate cillum fugiat.</h4>						<p class="commet">Cheese, tomato, mushrooms, onions.</p>					</a>					<div class="line"></div>					<div class="price">$50</div>				</li>				<li class="menu-item clearfloat">					<a class="title" href="">						<h4>Voluptate cillum fugiat.</h4>						<p class="commet">Cheese, tomato, mushrooms, onions.</p>					</a>					<div class="line"></div>					<div class="price">$50</div>				</li>				<li class="menu-item clearfloat">					<a class="title" href="">						<h4>Voluptate cillum fugiat.</h4>						<p class="commet">Cheese, tomato, mushrooms, onions.</p>					</a>					<div class="line"></div>					<div class="price">$50</div>				</li>				<li class="menu-item clearfloat">					<a class="title" href="">						<h4>Voluptate cillum fugiat.</h4>						<p class="commet">Cheese, tomato, mushrooms, onions.</p>					</a>					<div class="line"></div>					<div class="price">$50</div>				</li>				<li class="menu-item clearfloat">					<a class="title" href="">						<h4>Voluptate cillum fugiat.</h4>						<p class="commet">Cheese, tomato, mushrooms, onions.</p>					</a>					<div class="line"></div>					<div class="price">$50</div>				</li>			</ul>		</div>		<a href="" class="menu-more-btn">load more <span>|</span><span class="icon"></span></a>	</div>	<div class="public-container index-panel">		<div class="index-panel-header clearfloat">			<h3>Featured Dishes</h3>			<div class="line"></div>			<div class="btn-group">				<a href="" class="btn active"></a>				<a href="" class="btn"></a>				<a href="" class="btn"></a>				<a href="" class="btn"></a>			</div>		</div>		<div class="index-panel-body index-food-list">			<ul class="clearfloat">				<li class="food-item"><a href="">					<img class="banner" src="images/demo2.jpg" alt="这里是中间的菜，寿司 demo2.jpg" />					<div class="name">Fugiat nulla sint<span class="price">$30</span></div>					<div class="star-bar">						<span class="star"></span>						<span class="star"></span>						<span class="star"></span>						<span class="star"></span>						<span class="star nostar"></span>					</div>				</a></li>				<li class="food-item"><a href="">					<img class="banner" src="images/demo2.jpg" alt="这里是中间的菜，寿司 demo2.jpg" />					<div class="name">Fugiat nulla sint<span class="price">$30</span></div>					<div class="star-bar">						<span class="star"></span>						<span class="star"></span>						<span class="star"></span>						<span class="star"></span>						<span class="star nostar"></span>					</div>				</a></li>				<li class="food-item"><a href="">					<img class="banner" src="images/demo2.jpg" alt="这里是中间的菜，寿司 demo2.jpg" />					<div class="name">Fugiat nulla sint<span class="price">$30</span></div>					<div class="star-bar">						<span class="star"></span>						<span class="star"></span>						<span class="star"></span>						<span class="star"></span>						<span class="star nostar"></span>					</div>				</a></li>				<li class="food-item"><a href="">					<img class="banner" src="images/demo2.jpg" alt="这里是中间的菜，寿司 demo2.jpg" />					<div class="name">Fugiat nulla sint<span class="price">$30</span></div>					<div class="star-bar">						<span class="star"></span>						<span class="star"></span>						<span class="star"></span>						<span class="star"></span>						<span class="star nostar"></span>					</div>				</a></li>			</ul>		</div>	</div>	<div class="public-container index-panel">		<div class="index-panel-header clearfloat">			<h3>The Gallery</h3>			<div class="line"></div>		</div>		<div class="index-panel-body index-pics">			<a class="pic-col pic-col-m"><img src="images/demo3.jpg" alt="这里是组合图m demo3.jpg" /></a>			<div class="pic-col pic-col-s">				<a class="pic-row"><img src="images/demo4.jpg" alt="这里是组合图s demo4.jpg" /></a>				<a class="pic-row"><img src="images/demo5.jpg" alt="这里是组合图s demo5.jpg" /></a>			</div>			<a class="pic-col pic-col-l"><img src="images/demo6.jpg" alt="这里是组合图l demo6.jpg" /></a>		</div>	</div>	<div class="public-footer">		<div class="public-container">			<div class="footer-col">				<p>New York Restaurant<br />3926 Anmoore Road<br />New York, NY 10014<br /><a class="footer-tel" href="tel:718-749-1714">718-749-1714</a></p>			</div>			<div class="footer-col">				<p>France Restaurant<br />68, rue  de la Couronne<br />75002 PARIS<br />02.94.23.69.56</p>			</div>			<div class="footer-col">				<a href="">Blog</a>				<a href="">Careers</a>				<a href="">Privacy Policy</a>				<a>Contact</a>			</div>			<div class="footer-col">				<div class="footer-logo"></div>				<div class="footer-info">© All Rights Reserved 2014.<br />Find  More at Pixelhint.com</div>			</div>		</div>	</div></body></html>