-
附上跟着敲的代码（部分视频上未出现的，已经自行修补）【（三）】
文件名（公共样式部分）：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;}
查看全部 -
三角形
:after{
position:absolute;
content:'';
left:0;
bottom:0;
width:0;
height:0;
border-left:70px solid transparent;
border-right:70px solid transparent;
border-bottom:10px solid transparent;
}
查看全部
举报