課程
/前端開發
/HTML/CSS
/從 psd 到 html
老師,你的源碼css ,html能否也共享一下,我想對照看一下
2016-06-17
源自:從 psd 到 html 2-1
正在回答
唔,剛剛有兩行代碼寫做了,
<p>??All?Rights?Reserved?2014.<br>Find??More?at?Pixelhint.com</p></div>(這一行沒有div) 正確的:<p>??All?Rights?Reserved?2014.<br>Find??More?at?Pixelhint.com</p> <p></p>France?Restaurant<br>68,?rue??de?la?Couronne<br>75002?PARIS<br>02.94.23.69.56</div>(這一行也有問題) 正確的:<p>France?Restaurant<br>68,?rue??de?la?Couronne<br>75002?PARIS<br>02.94.23.69.56</p>
慕絲6703952 提問者
慕容7847281 回復 慕絲6703952 提問者
這是我弄的html,我也跟著老師在寫
<!doctype?html> <html> <head> <meta?charset="utf-8"> <title>i我的第一個頁面</title> <link?rel="stylesheet"?href="css/index.css"/> <link?rel="stylesheet"?href="css/common.css"/> <link?rel="stylesheet"?href="css/reset.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="itme"><a?href="">Our?Story</a></li> ????????????<li?class="itme"><a?href="">Menu</a></li> ????????????<li?class="itme"><a?href=""></a>Reservations</li> ????????????<li?class="itme"><a?href=""></a>News</li> ????????????<li?class="itme"><a?href=""></a>Rviews</li> ????????</ul> ???? ????</div> ??</div> ??<!--公共頭結束--> ?? ??<div?class="index-banner"></div> ??<!--Banner結束--> ?? ??<div?class="public-container?index-list"></div> ??<!--推薦列表結束--> ?? ??<div?class="public-container?index-panel"> ?? <div?class="index-panel-heder">Featured?Dishes</div> ??</div> ??<!--輪播面板結束--> ?? ??<div?class="public-container?index-panel"> ?? <div?class="index-panel-heder">Featured?Dishes</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?href="tel:718-749-1714">718-749-1714</a></p> ????</div> ????????<div?class="footer-col"> ????????????<p></p>France?Restaurant<br>68,?rue??de?la?Couronne<br>75002?PARIS<br>02.94.23.69.56</div> ????????</div> ????????<div?class="footer-col"> ???????? <a?href="">Blog</a> ????????????<a?href="">Careers</a> ????????????<a?href="">Privacy?Policy</a> ????????????<a?href="">Contact</a> ????????</div> ????????<div?class="footer-col"> ????????????<div?class="footer-logo"></div> ????????????<p>??All?Rights?Reserved?2014.<br>Find??More?at?Pixelhint.com</p></div> ????????</div> ????</div>?? ??</div> ??<!--公共底結束--> ?? </body> </html>
這部分是reset.css的代碼
@charset?"utf-8"; /*?CSS?Document?*/ body,div,dl,dt,dd,dt,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{ margin:0; padding:0; font-family:Gotham,?"Helvetica?Neue",?Helvetica,?Arial,?sans-serif; } ol,ul,li{ list-style:none; } a{ text-decoration:none; display:block; color:#FFFFFF; } img{ border:none; display:block; } .clearfloat{ zoom:1; } .clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0; }
現在這部分是common.css的代碼
@charset?"utf-8"; /*?CSS?Document?*/ .public-header{ height:110px; } .public-header?.header-logo{ float:left; margin-top:40px; } .public-header?.header-logo?a{ width:182px; height:54px; background:url(../imges/index-hader-logo.png); } .public-header?.header-nav{ float:right; font-size:14px; } .public-header?.header-nav?.itme{ float:left; margin-top:44px; color:#3b3b3b; margin-left:50px; } .public-header?.header-nav?a{ color:#3d3d3d; } .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-color:#3b3b3b; } .public-footer?.footer-col{ width:230px; float:left; margin-right:60px; font-size:16px; color:#fff; line-height:35px; } .public-footer?.footer-col:last-child{ margin-right:0; } .public-footer?.footer-logo{ width:182px; height:55px; margin-top:-10px; margin-bottom:12px; background-image:url(../imges/indx-footer-logo.png); }
我們可以互相參照一下,對比著看看
舉報
教你把PSD設計稿轉化成HTML,用案例來講解基本流程
1 回答老師你好,有代碼文件嗎?我想對照一下。
2 回答老師能不能分享一下代碼???
2 回答老師能不能將完整的代碼也分享一份出來啊?
2 回答老師寫的源碼能不能下載?
2 回答有寫好的沒?共享一份
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-06-18
唔,剛剛有兩行代碼寫做了,
2016-06-18
這是我弄的html,我也跟著老師在寫
這部分是reset.css的代碼
現在這部分是common.css的代碼
我們可以互相參照一下,對比著看看