为了账号安全,请及时绑定邮箱和手机立即绑定

从 psd 到 html

黑白猪 Web前端工程师
难度初级
时长 1小时51分
学习人数
综合评分9.63
432人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 按钮ctrl + alt 来放大图片

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

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

    2019-01-01

  • 一个基本的文档建立结构

    1. index.html       首页

    2. images ——存放图片

    3. js  ——交互效果

    4. css     外链样式

    查看全部
  • 块级元素下都是块级元素或者内联元素

    查看全部
  • PS操作:

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

    查看全部
    • CSS与HTML代码配合

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

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

    • 浏览器兼容性

    查看全部
  • PS中

    放大镜:Ctrl + Alt + 滚动轮

    查看全部
  • *margin:20px    加了*表示只在ie7下这样显示

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

    2018-10-31

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

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

    2018-10-31

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

                         width:1160px;

                             }

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

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

    2018-10-31

  • 课程代码

    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

  • index大体结构

    查看全部
  • reset.css

    查看全部
  • index.html

    查看全部

举报

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

微信扫码,参与3人拼团

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

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