每天学点切图

1)ul  li

  把ul宽度设置大一点,然后overflow=hidden;(最好不要嵌套使用,原因看清除浮动方法),然后外面必须有包裹的div壳,div壳的宽度就按设计稿来,这样就避免了需要给最后一个li设置margin-right:0了

2)[详情点击]

  这里只需用<a></a>包起来,把a的字体按要求设置即可,无需再多加一个span

3)关于span

  如果段落里面嵌套的span需要设置宽度等属性,就要把span的display:inline-block,同时为使ie67兼容,要同时设置display:inline 和 zoom:1

4)还有放在li里面的图片定位,就用margin-left去控制居中吧

5)焦点图那里,使用<img>标签放置图片,居中的话,position:absolute;left:50%;margin-left:-(图片宽度)/2 px

  如果用background放置图片,background-position:center top;

6)遇到选项卡样式复杂,先分别在li中加入class控制不同的样式,然后用js实现切换class

7)焦点图切换,最简单的是,先样式设置display:none;然后只让第一个div显示,第一个切换li高亮

时间: 2024-10-02 02:17:08

每天学点切图的相关文章

每天学点切图技巧——PS篇

1.选框工具这里可以选择增加选区.减少选区 ==> 2.存储为web格式 1)JPG:一般用于大图 2)gif:可作动图,与png-8基本一样,不支持半透明 3)png-8:不支持动图,不支持半透明 4)png-24:只有这个,支持半透明 调整时可用ctrl加+放大查看 3.背景渐变的按钮,上头有文字,选中1px渐变条复制,按ctrl+T拉伸一下,将文字盖住 4.如果用选框选取四周都是参考线的选区,很有可能多选1px,解决方法是按住ctrl再去选,就能正好了 5.ctrl+alt+shift+E

前端PS切图技巧(一)

UI给我们设计图的时候都会有一份设计原稿psd文件,有的公司可能UI会把需要的图标给切好,更多时候是需要我们自己来切的.而且,有的时候可能需要的东西UI没有切出来,你就要去是去找UI切好了再发给我们,这个过程就变得很麻烦,所以不如自己学一些切图方法  没有psd文件的,我这里准备了一份,需要的可以去下载 psd练习文件 http://pan.baidu.com/s/1pL2dwL1 1 工具:一.二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法

psd切图转换为div+css格式

先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY,里面所用到的HTML标记进行重置为0 PSD转div css网页切图示例 第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的标记进行重置.如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了. 复制代码 代码如下: *{ margin:0px; padding:

泡沫学员CSS切图学习总结

刚接触xhtml和css时,脑子里真是 一团浆糊,乱成一团,不知道这些字母都是干嘛的(它认识我,我不认识它),慢慢地跟着老师做练习的过程,慢慢地对这些标签熟悉起来,在脑海中也渐渐形成了 些许认知和记忆.当你完成一个模块的时候,是一推代码组成达到的效果时,我第一次感觉到喜悦并带着点点的成就感,就是这样的感觉让我对学习网页设计产生了 兴趣和热忱. 我明白当你遇到困难的时候便是你成长和进步的过程,学习到切图课程时,一方面你觉得很有意思,因为切图验证了你的所学.一方面你也很困惑,因为你总是会遇 到这样那

页面制作学习笔记:D2.Photoshop切图

一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 <img src="images/avatar.jpg" alt="头像"> 在CSS里面通过background属性引入图片资源 .icon { background-image:url(../images/avtar.jpg); background-posi

切图 or 切片

一点题外话: 提到切图,让我想起曾经有好几个月的时间,我每天的主要工作就是切图,或者说切片了. 要制作语文课本中每篇课文的朗读卡拉OK效果,其中一道工序,就是要把文章中的每个字连同上面的拼音,切成单独的一张小图. 一张图上,文字数百上千,纯粹的体力活. 不过这是用fireworks切的片. 今天要说的是用photoshop来切片. 要做一个拼图的小游戏,需要用ps把原图切成长宽一致的15张小图. 1,用ps打开图片 2,在图片上点右键,调出菜单 3,设置水平划分为3,垂直划分为5,则自动划分为1

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松

前端必备技能之Photosh切图

切图:即从设计稿里面切出网页素材 一.使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素 2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用 3.工作区弄乱时,可以使用上图中的复位,或者在下图中选择工作区: 4.切图常用工具 注意:在工具菜单栏中右击会出现同组备选工具: 5.放大缩小画布: 1).点击缩放工具 2).ctrl  + 加号/减号 3).alt  + 鼠标滚轮 6.辅助视图 标尺快捷键:ctrl + r 7.获取文字大小和行高 1).文字是单独图层,使

前端PS切图小技巧

切图,重要的是找精确像素!不要在用传统的切刀进行切割啦,拿到一副PSd图形的,可以使用这样两种方式: (1)如果你的图层很多,你可以用“ctrl+点击想要的图片“直接选中你想要图片的图层,简单到位,然后将图层转化为智能对象(当然可以几个图层拼到一起),然后双击弹出点击确定,就ok了: (2)对于大图,这个时候就有很多的东西存在,这里就使用,选区先选中你要切的图形,然后”编辑-合并拷贝-新建-拷贝“,就能建立一个完成整的图片切图的样子了,就ok了. 注意:这里的有几点说明: (1)切图要拉好参考线