-
附上跟著敲的代碼（部分視頻上未出現的，已經自行修補）【（三）】
文件名（公共樣式部分）：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;
}
查看全部
舉報