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

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

这里虽然是教切图psd还原入门，不过建议先把css基础弄懂，因为其中涉及的知识点有：

①【块级元素、内联（行内）元素、行内块级元素】；

②【（原理）BFC（其中一点）：两margin（上与下）相遇取最大值】；

③【（原理）高度塌陷：overflow: hidden;去浮动，以及万能清除浮动样式（clearfloat）】；

④【display: inline-block布局，之间存在4px默认间距，使用font-size: 0px;来清除】；

⑤【元素默认样式清除，（也就是重置样式"reset.css"）例如body默认有边距，则 body{ padding:0; margin:0; 去除}】；

⑥【ol/ul-li无序列（如去除序号点：list-style: none;）】

⑦【行内块inline-block之间的对齐垂直居中（原理）：verticle-align:middle】

等等等等，还没接触过就看或跟着敲的话，是很难理解的。

还有，跟着敲时，最好检测自己的拼写。一般bug最多的地方就是单词拼错了，用浏览器查看，未出效果或者样式的，然后找到该段代码，检测是否拼写错误，或着标点符号，注意英文符和中文符的区分。

另，如果出现高度丢失（未达到期望值），或许不是自己的错误，先看看是否是高度塌陷的原因。虽然同样是高度塌陷（BFC），但是这个是缺点的同时，也是非常好的优点。

比如：（BFC块级格式化上下文）同级子元素A的margin-bottom: 100px; 和同级子元素B的margin-top: 100px;在同一列（放在上下方向）相遇，它们之间的距离，并不是100+100=200px；而是正数跟正数相遇，取最大值（相同值只取一个），所以实际的间隔还是只有100px；但是，如果加了overflow: hidden; （消除边距高度塌陷现象），那么它们之间的间距，就是200px了。

还有，老师说的：最好行内元素和块级元素不要同级出现（被同一个父级包裹）理论上是要遵守这个规则的，但在这里，老师说了为了避免浪费标签（造成多余无意义标签），所以也就一两处出现这样的情况，而且<a>是已经块级化（display: block; ）了的所以不影响。

.title{

    width:230px;

    overflow:hidden;    

    white-space:nowrap;

    text-overflow:ellipsis;

}

overflow：hidden

超出隐藏

{
    position: absolute;
    left: 50%;
}

水平居中

verticel-align:middle

水平居中

盒子模型东西写在CSS样式的前面

初始化样式部分代码

三种css样式：重置样式（reset.css)，公共样式(comment.css)（一系列页面共用如：头部底部样式），独立样式（本页单独使用index.css）

重置样式：

1.body,div,dl,dt,ul,ol,li,h1,h2,h3,h4,h5,input,form,a,p,textarea{padding：0；margin=0；font-family：""）这些元素都要建议重新初始化。

2、li、ul、ol{list-style:none}

3、a{text-decoration=none;display:block;}去掉底部横线，把a设置成块级元素，

4、img{border：0；display：block}

img标签要清除border以及display设为block设置为块级元素，默认为display：inline，存在下边线多出4px状况。

清除浮动破坏带来的塌陷问题：

.fix{*zoom:1;}

.fix:after{display:block; content:"clear"; height:0; clear:both; /*overflow:hidden*/; visibility:hidden;}

reset.css

背景图片，为了防止页面缩放出现滚动条，需要加height，和overflow:hidden

img标签要清除border以及display设为block设置为块级元素，因为它下面有4px的hack。

一：三种css样式：重置样式，公共样式（一系列页面共用），独立样式（本页单独使用） 二：1.body,div,dl,dt,ul,ol,li,h1,h2,h3,h4,h5,input,form,a,p,textarea的padding、margin、font-family初始化。 2、li、ul、ol的list-style。 3、a的text-decoration、display 4、img的border、display

清除浮动破坏带来的塌陷问题：

.fix{*zoom:1;}.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}