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

从 psd 到 html

黑白猪 Web前端工程师
难度初级
时长 1小时51分
学习人数
综合评分9.63
432人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • IE浏览器就爱错位。。。
    查看全部
    0 采集 收起 来源:兼容1

    2017-08-23

  • 盒子模型写在前面
    查看全部
  • 先写整体布局 不建议给ID class与ID的命名,尽量不用拼音 中划线与下划线 驼峰命名法 代码规范 居中容器 居中效果 margin 0 auto
    查看全部
  • 样式文件和初始化 1新建三个css文件,分别命名为reset、common、indexs 2在html文件建立三个css文件的外链 3通过reset.css文件对一些样式初始化,如margin,padding问题或者a标签的下划线以及等等 审视 头部 尾部 公共区域 logo 列表
    查看全部
  • 一:三种css样式:重置样式,公共样式(一系列页面共用),独立样式(本页单独使用) 二:1.body,div,dl,dt,ul,ol,li,h1,h2,h3,h4,h5,input,fore,a,p,textarea的padding、margin、font-family初始化。 2、li、ul、ol的list-style。 3、a的text-decoration、display 4、img的border、display 5、clearfloat{zoom:1;} 清除浮动
    查看全部
  • 哪里有什么天才,我只是把别人睡觉的时间用在了工作上。除非你能躺着赚钱,否则就别赖在床上。 --苍老师
    查看全部
  • 可以用一些hack技术兼容IE低版本,如*margin-top:15px;只有IE能读取,当行内对不齐时可采用,border-radius等CSS3属性可以用图片代替
    查看全部
    0 采集 收起 来源:兼容2

    2017-07-21

  • 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,可用font-size:0;来清除
    查看全部
    0 采集 收起 来源:主体pannel结构

    2017-07-21

  • 小技巧为方便li元素排列时内外边距影响浮动,可在居中固定的盒子上overflow:hidden,在ul上width相应增加
    查看全部
    0 采集 收起 来源:menu

    2017-07-21

  • 一些颜色较单调的背景尽量用css代替图片,可用border属性制作三角,伪元素覆盖等
    查看全部
    0 采集 收起 来源:menu

    2017-07-21

  • 规范: 1块级元素下的同级元素最好都是内联元素或块元素; 2最大化页面的灵活性:不常换的图片用css背景,常换的用img标签;文字部分统一内联样式,方便修改时自适应宽度及定位; 3不建议直接对li、span这些常用标签定义样式,最好添加class后处理 4HTML结构保持整体性,由外向内,字体颜色等一般定义在外层元素上
    查看全部
    0 采集 收起 来源:menu

    2017-07-21

  • css文件:reset\common\index(文件名样式)
    查看全部
  • Css和html代码配合 Css命名和html标签结构应用 如何用好Photoshop去审视一个设计稿 浏览器兼容性
    查看全部
  • (1) 快、稳、效果好 (2) 例如公共头、尾、菜单项 (3) 所有的css文件最后会合并成一个css文件、偶数像素、带着后端的思维去写代码、带着产品、设计的眼光去看问题 (4) icon可以用css属性写出来,更巧妙。网上有很多方法。 (5) 全局用public,局部用index、footer、header、body等,用三级命名,中划线命名 (6) 作为一个优秀前端,不单要知道其然更要知其所以然,如CSS在IE7下的Hack处理。
    查看全部
    0 采集 收起 来源:总结

    2017-07-15

  • IE7下, 问题一:float-right换行。三种方法。 i. 把浮动的元素放到未浮动的元素前面。(文档的普通流中的块框在浮动框渲染之后会表现得就像浮动框不存在一样。)推荐这种方法。(需要更改HTML结构,无需添加额外样式代码) ii. 用绝对定位替换掉浮动定位(需要处理绝对定位脱离文档流带来的影响) iii. 同一行的元素都使用浮动。(需要添加额外类名、样式) iii. 同一行的元素都使用浮动。(需要添加额外类名、样式) 问题二:伪类下,出现兼容问题。
    查看全部
    0 采集 收起 来源:兼容1

    2017-07-15

举报

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

微信扫码,参与3人拼团

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

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