-
唯天道酬勤
- 文字像素在哪看到的
首先看你拿到的要求是不是psd，是的话，进去点击你获取尺寸的文字，ps上面工具栏会显示像素大小
- 2020-04-28 1回答·874浏览
-
唯天道酬勤
- 自来下载无法解压啊
我也下载了，好像是文件损坏了
- 2020-04-28 1回答·715浏览
-
啊珠阁
- 请问为什么就尾部的图片显示不出来？明明都在一个文件夹，其他都显示了
如果你是在css里面用的背景图片，那这个图片的div要设置高度宽度
- 2020-04-18 2回答·809浏览
-
啊珠阁
- 请问怎么截LOGO,我截出来的都是白色，这是为什么
- 已采纳 小三是篮球 的回答
在ps里找到图层1，点在图层1里面截，你可能截在了矩形上了，这个矩形是logo下面的背景，使用矩形选择工具框选，ctrl+c复制，再ctrl+n新建，新建好了之后再ctrl+v粘贴就可以了
- 2020-03-14 2回答·826浏览
-
欧阳萧杰
- 有源代码给我学习吗？
可以截屏下来
- 2019-11-08 1回答·847浏览
-
慕无忌4498641
- 图片从哪里可以下载到？老师
在资料里下载压缩包，解压
- 2019-08-21 2回答·711浏览
-
chan218
- 底部informantion那部分无法在右边显示
- 2019-05-09 2回答·961浏览
-
weixin_慕函数2081456
- 资料下载的文件确实损坏了
两个文件分别重命名为a.part01.zip和a.part02.zip，放同一个文件夹里就能解压
- 2019-04-07 3回答·1049浏览
-
爱拍照的宋小健
-
精慕门1533310
- 大意了
自查，a标签没内容造成的
- 2018-11-17 1回答·1011浏览
-
烤肉飞熊
- 为什么 item类的 float：left 不生效？
最后的
.header-nav li.item{
clear: both;
background: #006dcc;
}
这部分的问题
去掉就可以了，之前加过浮动后又直接清除掉了，所以没生效
- 2018-10-02 1回答·1923浏览
-
jjccjwdlh
- 谁有全套代码，跟着敲太痛苦了
课程代码
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>从PSD转化为HTML</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="box"> <!--头部区--> <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 public-container"> <img src="img/demo1.png" alt="banner" /> </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> <!--menu区--> <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 href="#" class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese,Tomato,Mushrooms,Onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a href="#" class="title"> <h4>Arcu pede enim justo.</h4> <p class="comment">Tuna, Sweetcorn, Cheese.</p> </a> <div class="line"></div> <div class="price">$45</div> </li> <li class="menu-item clearfloat"> <a href="#" class="title"> <h4>Metus varius laoreet.</h4> <p class="comment">Chicken, mozzarella cheese, onions.</p> </a> <div class="line"></div> <div class="price">$62</div> </li> <li class="menu-item clearfloat"> <a href="#" class="title"> <h4>Cras dapibussemper nisi.</h4> <p class="comment">Pineapple, Minced Beef, Cheese.</p> </a> <div class="line"></div> <div class="price">$32</div> </li> <li class="menu-item clearfloat"> <a href="#" class="title"> <h4>Donec sodales magna.</h4> <p class="comment">Tuna, Sweetcorn, Cheese.</p> </a> <div class="line"></div> <div class="price">$25</div> </li> <li class="menu-item clearfloat"> <a href="#" class="title"> <h4>Quam semper libero.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$15</div> </li> <li class="menu-item clearfloat"> <a href="#" class="title"> <h4>Saugue velit cursus.</h4> <p class="comment">Pineapple, Minced Beef, Cheese.</p> </a> <div class="line"></div> <div class="price">$30</div> </li> <li class="menu-item clearfloat"> <a href="#" class="title"> <h4>Nam eget dui Etiam.</h4> <p class="comment">Chicken, mozzarella cheese, onions.</p> </a> <div class="line"></div> <div class="price">$35</div> </li> </ul> </div> <a href="#" class="menu-more-btn"> <span>load more</span> <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="img/demo2.png" /> <div class="name"> <span>Fugiat nulla sint</span> <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="img/demo22.png" /> <div class="name"> <span>Daute irure dolor</span> <span class="price">$24</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="img/demo23.png" /> <div class="name"> <span>Officia deserunt mollit</span> <span class="price">$60</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="img/demo24.png" /> <div class="name"> <span>Pim minim veniam</span> <span class="price">$17</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 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-pics clearfloat"> <a href="#" class="pic-col pic-col-m"> <img src="img/demo3.png" alt="美食" /> </a> <div class="pic-col pic-col-s"> <a class="pic-row"><img src="img/demo4.png" alt="" /></a> <a class="pic-row"><img src="img/demo5.png" alt="" /></a> </div> <a href="#" class="pic-col pic-col-l"> <img src="img/demo6.png" alt="" /> </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 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 href="#">Contact</a> </div> <div class="footer-col"> <div class="footer-logo"></div> <div class="footer-info">©All Rights Reserved 2018.<br>Find More at PixelHint.com</div> </div> </div> </div> </div> </body> </html>
reset.css
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, input, form, a, p, textarea { margin: 0; padding: 0; font-family: helvetica; } ul, ol, li { list-style: none; } a { text-decoration: none; color: #fff; display: block; } img { border: none; display: block; } .clearfloat { zoom: 1; } .clearfloat:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; }common.css
.box { min-width: 1160px; } .public-header { height: 110px; } .public-header .header-logo { float: left; margin-top: 40px; } .public-header .header-logo a { height: 54px; width: 182px; background: url("../img/index-header-logo.png") no-repeat; } .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; margin-top: 200px; padding-top: 100px; background: #3b3b3b; } .public-footer .footer-col { width: 230px; float: left; margin-right: 60px; font-size: 16px; color: #FFFFFF; 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: 10px; background: url("../img/index-footer-logo.png") no-repeat; }index.css
/*广告区*/ .index-banner { position: relative; background: rgba(0, 0, 0, .1); } .index-banner-bg { height: 565px; 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("../img/index-banner-text-logo.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; } /*menu区*/ .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; 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; color: #555; overflow: hidden; } .index-menu .menu-list ul { width: 1160px; } .index-menu .menu-item { float: left; width: 520px; margin-right: 60px; margin-bottom: 56px; position: relative; } .index-menu .menu-item .title, .index-menu .menu-item .line, { float: left; } .index-menu .menu-item .price { position: absolute; top: 10px; right: 5px; } .index-menu .menu-item .title { width: 230px; color: #555; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .index-menu .menu-item .comment { 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; 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("../img/index-btn-icon.png") no-repeat; } /*菜单区*/ .index-panel { margin-top: 200px; } .index-panel-header h3 { float: left; margin-right: 48px; font-size: 20px; color: #3b3b3b; font-weight: normal; } .index-panel-header .line { float: left; margin-top: 10px; width: 200px; border-top: 1px solid #e5e3e3; } .index-panel-header .btn-group { font-size: 0; float: right; } .index-panel-header .btn { display: inline-block; margin-left: 11px; width: 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-image: url("../img/index-star.png"); background-repeat: no-repeat; } .index-food-list .food-item .nostar { background-position: 0 -12px; } .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; }- 2018-09-14 3回答·1812浏览
-
夏目目
- a标签的设置
是设置 了a的，好吧。
- 2018-07-31 1回答·1253浏览
-
qq_aat_0
- 尾部的图片显示不出来，是什么问题。
0-0 地址链接问题？还是什么 如果是地址链接 要看你图片切了过后放在那里的 两个。 ../ 表示往上一级目录，如果你HTML设置在一个文件夹里 图片在一个image里 那么格式就是 ../image/图片.jpg/png/gif
- 2018-07-17 2回答·1179浏览
-
慕斯3339248
- 没事了hhhhh
百度了一下已解开
- 2018-07-13 1回答·749浏览
-
whe
- psd文件下载问题
居然点了一下添加就可以了。。。
- 2018-07-04 2回答·681浏览
-
慕先生0109084
- 什么软件
webstorm
- 2018-06-01 1回答·1129浏览
-
森夏777
- 行高是怎么计算的呢？
- 已采纳 慕神7884363 的回答
这个1.8和字体的大小有关，简单来说就是行高为字体高度的1.8倍。line-height:1.8 = line-height:1.8em;
- 2018-05-23 1回答·3235浏览
-
慕斯3339248
- 文件下载解压问题
575e7d4d0001e00a00000000重命名为1
575e7d100001719300000000重命名为2
解压即可
- 2018-04-12 1回答·853浏览
-
qq_暖流_5
- ps切图为甚么不显示logo，只显示背景色
在你新建的logo文件中，有两个图层，一个是背景，一个是logo，你把背景图层隐藏就行了（把图层的眼睛符号点一下）
- 2018-03-06 3回答·1690浏览
-
Yatee
- 图片显示不完整
可以把CSS的代码都发出来吗
- 2018-02-23 1回答·1323浏览
-
慕哥103891
- 上部啊
- 2017-11-18 2回答·828浏览
-
慕哥103891
- 背景图片
width
- 2017-11-18 1回答·1429浏览
-
盼盼Ivy_lu
- 从Psd到html 10:06老师打#后面颜色自动提示 是哪个快捷键？或者要安装什么插件？
用webstorm这个编辑器打出#和前面几个字母它会自动提示的不需要装什么插件！
- 2017-11-16 1回答·1335浏览
-
慕哥103891
- 显示啊
请附上截图
- 2017-11-12 1回答·1063浏览
-
qq_MrS_3
- 课程资料下载
下载地址http://pixelhint.com/resto-free-beautiful-restaurant-psd-home-page-website-template/
打不开换新版本的ps试试
- 2017-11-08 1回答·1233浏览
-
葙濡姒沫
- 老师用的工具是什么？写代码的和抠图
- 已采纳 慕妹5016704 的回答
webstorm,和ps
- 2017-10-31 1回答·904浏览
-
qq_晨曦_78
- 老师能不能分享一下代码？？？
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/common.css" >
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/index.css" >
<title>Title</title>
</head>
<body>
<div>
<div>
<div><a href=""></a></div>
<ul class="header-nav clearfloat">
<li><a href="">Our Story</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Reseractions</a></li>
<li><a href="">News</a></li>
<li><a href="">Rviews</a></li>
</ul>
</div>
</div>
<div>
<div><img src="images/demo1.jpg" alt="banner"/></div>
<div>
<div></div>
<p>
<i></i>
<span>resto restaurant home page website template</span>
<i></i>
</p>
</div>
</div>
<div>
<div>The Menu</div>
<div class="public-container menu-list">
<ul>
<li class="menu-item clearfloat">
<a class="title" href="#">
<h4>Voluptate cillum fugiat.</h4>
<p>Cheese,tomato,mushrooms,onions.</p>
</a>
<div></div>
<div>$50</div>
</li>
<li class="menu-item clearfloat">
<a href="#">
<h4>Voluptate cillum fugiat.</h4>
<p>Cheese,tomato,mushrooms,onions.</p>
</a>
<div></div>
<div>$50</div>
</li>
<li class="menu-item clearfloat">
<a href="#">
<h4>Voluptate cillum fugiat.</h4>
<p>Cheese,tomato,mushrooms,onions.</p>
</a>
<div></div>
<div>$50</div>
</li>
<li class="menu-item clearfloat">
<a class="title" href="#">
<h4>Voluptate cillum fugiat.</h4>
<p>Cheese,tomato,mushrooms,onions.</p>
</a>
<div></div>
<div>$50</div>
</li>
<li class="menu-item clearfloat">
<a href="#">
<h4>Voluptate cillum fugiat.</h4>
<p>Cheese,tomato,mushrooms,onions.</p>
</a>
<div></div>
<div>$50</div>
</li>
<li class="menu-item clearfloat">
<a href="#">
<h4>Voluptate cillum fugiat.</h4>
<p>Cheese,tomato,mushrooms,onions.</p>
</a>
<div></div>
<div>$50</div>
</li>
<li class="menu-item clearfloat">
<a href="#">
<h4>Voluptate cillum fugiat.</h4>
<p>Cheese,tomato,mushrooms,onions.</p>
</a>
<div></div>
<div>$50</div>
</li>
<li class="menu-item clearfloat">
<a href="#">
<h4>Voluptate cillum fugiat.</h4>
<p>Cheese,tomato,mushrooms,onions.</p>
</a>
<div></div>
<div>$50</div>
</li>
</ul>
</div>
<a href="#">load more <span>|</span><span>﹀</span></a>
</div>
<div class="public-container index-panel">
<div class="index-panel-header clearfloat">
<h3>FEATURED DISHS</h3>
<div></div>
<div>
<a href="" class="btn active"></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</div>
<div class="index-panel-body index-food-list">
<ul>
<li>
<a href="#">
<img src="images/demo2.jpg">
<div>Fugiat nulla sint <span>$30</span></div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="star nostar"></span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="images/demo2.jpg">
<div>Fugiat nulla sint <span>$30</span></div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="star nostar"></span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="images/demo2.jpg">
<div>Fugiat nulla sint <span>$30</span></div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="star nostar"></span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="images/demo2.jpg">
<div>Fugiat nulla sint <span>$30</span></div>
<div>
<span></span>
<span></span>
<span></span>
<span></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></div>
</div>
<div class="index-panel-body index-pics">
<a class="pic-col pic-col-m"><img src="images/demo3.png"></a>
<div class="pic-col pic-col-s">
<a><img src="images/demo4.png"></a>
<a><img src="images/demo5.png"></a>
</div>
<a class="pic-col pic-col-l"><img src="images/demo6.png"></a>
</div>
</div>
<div>
<div>
<div>
<p>New York Restaurant<br>3926 Anmoore Road<br>New York,NY10014<br><a href="718-749-1714"></a>718-749-1714</p>
</div>
<div>
<p>France Restaurant<br>68, rue de la Couronne<br>75002PARIS<br>02.94.23.69.56</p>
</div>
<div>
<a href="">Blog</a>
<a href="">Careers</a>
<a href="">Privacy Policy</a>
<a href="">Contact</a>
</div>
<div class="footer-col footer-col-nor">
<div></div>
<div>©All Rigths Reserved 2014<br>Find More at Pixelhint.com</div>
</div>
</div>
</div>
</body>
</html>- 2017-09-16 2回答·684浏览
-
慕哥5504573
- 列表区域跟页尾重叠了
应该是最后没有清除浮动导致的
- 2017-09-15 1回答·1293浏览
-
冷寒轩111
- 为什么显示不出来 代码如下
回复 冷寒轩：我是刚学前端，你这个问题我也遇到过。
你试一下把外联样式改成内联样式，如果logo的背景图不能显示出来，可能是你bgckground的路径或者文件名没有写对。如果改成内联样式后图能显示，那可能是你写外联的这个路径不对<link rel="stylesheet" type="text/css" href="css/main.css">遇到这个情况我是直接把路径补全，像这样href="E:/web/css/main.css"。
我试了几种方法，如果把css文件和html文件放在一个文件下面时，还没遇到过问题，但如果这两个文件不是放在同一个文件夹下面时，有时候会像抽疯一样，只写文件夹和文件名会不显示。
什么原理我也不知道，你知道了也告诉我一下啊
- 2017-08-21 3回答·1544浏览
