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

从 psd 到 html

黑白猪 Web前端工程师
难度初级
时长 1小时51分
学习人数
综合评分9.63
432人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 一、类似于书签的图标用css实现 <div class="book"></div> .book{ width:100px; height:50px; background-color:#f00; position:relative;/*不要忘了写*/ } .book:after{ content:'';/*是'',不是""*/ position:absolute; left:0; bottom:0; width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:10px solid #fff; }
    查看全部
    0 采集 收起 来源:menu

    2018-03-22

  • 一、jpg图像裁剪: 1、窗口-图层。 2、矩形选框选中。 3、图像-裁剪。 二、ctrl alt shift s:存储为web所用格式。 三、ctrl alt z:还原。
    查看全部
    1 采集 收起 来源:banner

    2017-04-19

  • 一、h 手抓图片。 二、1、选择,自动选择:图层。 2、选中图层后,右键选择:转换为智能对象。 3、框选要选择的那部分图。 4、ctrl c 、ctrl n. ctrl n是新建,会记住选择的宽度、高度等的信息。 5、存储为png-24。
    查看全部
  • 一、 f8 :显示像素信息。 ctrl d:取消选中。 二、webstorm中按住alt,然后点击光标,可以在点击的这些位置,接下来加入相同的内容。
    查看全部
  • 一、ctrl alt 滚动:放大缩小
    查看全部
  • div.public-header+div.public-container clearfloat(div.header-logo)+div.index-banner+div.pub-container index-list+div.public-container index-panel+div.public-footer+div.public-footer(div.public+container)
    查看全部
  • 上110,中1100,下318
    查看全部
  • div.index-panel-header
    查看全部
  • div.public-header+div.index-banner+div.index-list+div.index-panel+div.index-panel+div.public-footer
    查看全部
  • 布局设计
    查看全部
    0 采集 收起 来源:menu

    2017-04-14

  • 切图小技巧:首先选中相应的图层,右击将其转换成只能对象,然后用选取工具选中它,Ctrl+C然后Ctrl+N,打开新建的透明背景后,Ctrl+V即可将相应的图层快速粘贴过去。此方法可以切透明的不规则图片。
    查看全部
  • psd还原html要保证px为偶数,切图,作图区域及图片尽量用偶数 不能让内联元素和块级元素处于同意层次,所以a初始化display:block。 按alt键可以选中5项然后空格一起更改class为item li*5>a按tab键即可5项列表 public-container有高度所以要加浮动clearfloat 不常更新的图片,如网站的logo,可以作背景,而需要经常更换的图片,需要用img标签展示
    查看全部
  • 前期规范 思路很好,值得借鉴
    查看全部
  • 使用margin负值裁剪
    查看全部
    0 采集 收起 来源:menu

    2017-04-11

  • public-container居中容器
    查看全部

举报

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

微信扫码,参与3人拼团

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

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