为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 从 psd 到 html 笔记

从 psd 到 html

黑白猪 Web前端工程师
难度初级
时长 1小时51分
学习人数
综合评分9.63
432人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
最热 最新
  • 随影萧剑

    按钮ctrl + alt 来放大图片

    查看全部
    0 采集 收起 来源：样式文件和初始化

    2019-01-07

  • Fate2018 05:20

    1、黄色的小星星，放到新建的画布里去。 2、图像，画布大小，向下加同样大的高度。 3、画布背景换成红色。 4、把灰色的星星直接拖过来。 5、上下箭头可以调灰色星星的位置。 6、画布的小眼睛不要，背景就是透明的了。https://img1.sycdn.imooc.com//5c2b41d8000198f411420718.jpg

    查看全部
    0 采集 收起 来源：tab切换

    2019-01-01

  • 慕粉3933125

    一个基本的文档建立结构

    1. index.html       首页

    2. images ——存放图片

    3. js  ——交互效果

    4. css     外链样式

    查看全部
    0 采集 收起 来源：样式文件和初始化

    2018-12-20

  • 慕瓜6331918

    块级元素下都是块级元素或者内联元素

    查看全部
    0 采集 收起 来源：html页面结构整理

    2018-12-19

  • 不知道叫啥昵称才好

    PS操作：

    1.选中框选区域，按F8查看区域信息。

    查看全部
    0 采集 收起 来源：html页面结构整理

    2018-11-14

  • 不知道叫啥昵称才好 00:40

    • CSS与HTML代码配合

    • CSS命名和HTML标签结构应用

    • 如何用好Photoshop去审视一个设计稿

    • 浏览器兼容性

    查看全部
    0 采集 收起 来源：课程知识点简介

    2018-11-14

  • 慕粉1470930144

    PS中

    放大镜：Ctrl + Alt + 滚动轮

    查看全部
    1 采集 收起 来源：样式文件和初始化

    2018-11-03

  • Seven_77777

    *margin：20px    加了*表示只在ie7下这样显示

    查看全部
    0 采集 收起 来源：兼容2

    2018-10-31

  • Seven_77777

    font-size：0；因为行内元素本身有默认间距，添加后可以解决inline元素间的空白间隙

    查看全部
    0 采集 收起 来源：主体pannel结构

    2018-10-31

  • Seven_77777

    index.css   .index-menu .menu-list ul{

                         width:1160px;

                             }

    本来是1100px，表面多了60px，但是这样方便循环输出，是一个布局的小技巧。

    查看全部
    1 采集 收起 来源：menu

    2018-10-31

  • Sandaydi 00:26

    课程代码

    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">&copy;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;
}



    查看全部
    0 采集 收起 来源：总结

    2018-10-23

  • 论斤烤 10:44

    index大体结构

    查看全部
    0 采集 收起 来源：html页面结构整理

    2018-10-16

  • 论斤烤 09:07

    reset.css

    查看全部
    0 采集 收起 来源：样式文件和初始化

    2020-09-25

  • 论斤烤 04:08

    index.html

    查看全部
    0 采集 收起 来源：样式文件和初始化

    2018-10-16

首页上一页1234567下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1、对 html+css 基础知识已经掌握； 2、会简单使用 Photoshop； 3、需要一步一步动手做；
老师告诉你能学到什么？
1、独立完成一个设计稿的转化； 2、Css从整理到局部的分离； 3、Css命名一些技巧和语义化； 4、Html标签结构的优化和选择； 5、PS软件当中的切图技巧 6、Css代替部分图片实现小icon； 7、兼容性处理的方法； 8、和后端配合时注意的事项；

微信扫码，参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程