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

从 psd 到 html

黑白猪 Web前端工程师
难度初级
时长 1小时51分
学习人数
综合评分9.63
432人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 总结: 1、psd 自动选择:图层 --> ctrl+c --> ctrl+n --> ctrl+v; 2、psd 自动选择:图层 --> 图像 --> 剪切; 3、拼图:方法1 + 其中一个使用“画布大小”添加空白位置 --> 拼图; 4、background-position:x y: x:从左至该对象的距离; y:从上至该对象的距离。
    查看全部
    2 采集 收起 来源:总结

    2018-03-22

  • 切图,点亮的star与未点亮的star放在一起,sprite图使用
    查看全部
    1 采集 收起 来源:tab切换

    2017-07-14

  • a标签可以嵌套div,h4,p标签
    查看全部
    0 采集 收起 来源:menu

    2017-07-13

  • .index-menu .menu-list { margin-top: 150px; color: #555; /*列表项中偶数子项不需要外边距,可以在ul父容器中增加60px,多出来的外边距通过overflow隐藏*/ overflow: hidden; } /* 要把偶数项的margin-right去掉,因为总宽度超过1100px导致换行了 列表项中偶数子项不需要外边距,可以在ul父容器中增加60px,多出来的外边距通过设置父容器overflow隐藏 好处:这样处理就不用在对每一个偶数li添加特殊化样式,后端在用模版引擎输出需要额外判断。*/ .index-menu .menu-list ul { width: 1160px; background-color: #f34949; } .index-menu .menu-item { float: left; width: 520px; margin-right: 60px; margin-bottom: 56px; }
    查看全部
    0 采集 收起 来源:menu

    2017-07-13

  • 通过分别设置元素边框的属性,画出三角形 border-left: 78px solid transparent; border-right: 78px solid transparent; border-bottom: 10px solid #fff;
    查看全部
    0 采集 收起 来源:menu

    2017-07-13

  • 使用绝对定位absolute与margin来定位banner-text
    查看全部
    0 采集 收起 来源:banner

    2017-07-13

  • 为避免窗口缩小时,背景图出现滚动条。 .index-banner-bg { overflow: hidden; }
    查看全部
    0 采集 收起 来源:banner

    2017-07-13

  • 线条的处理,线条的处理,可以使用伪元素befor和after或background,这里加入i标签,更清晰明了。 <p><i class="line line-l"></i>文字<i class="line line-l"></i></p>
    查看全部
    1 采集 收起 来源:banner

    2018-03-22

  • <a class="footer-tell" href="tel:718-749-1714">718-749-1714</a> 声明了属性 href="tel:718-749-1714",安装了网络电话可以直接点击打了
    查看全部
  • 根据设计稿设置line-height,实现文字间距
    查看全部
  • <div class="footer-col"></div> <div class="footer-col"></div> <div class="footer-col"></div> <div class="footer-col"></div>四列
    查看全部
  • 不要让内联元素与块级元素处于同一级别下 <div> <a class="header-logo"></a>→<div class="header-logo"></div> <ul class="header-nav"></ul> </div>
    查看全部
  • 用户可视区域里,共有的居中容器public-container,知道宽度的情况下可以设置margin: 0 auto
    查看全部
  • 先写页面整体结构
    查看全部
  • reset.css
    查看全部

举报

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

微信扫码,参与3人拼团

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

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