切图笔记

最近突然让我切图,很多东西都忘了,得记下来

1这种可以用a标签的A:hover来实现

.head .headbox .banner li a{ width:auto; height:30px; color:#0856c1;  display:block; }
.head .headbox .banner li a:hover{ width:auto; height:30px; color:#00CC66; border-bottom:solid 2px #00CC99;}

1这种左右不一样长的切换, 做成两张背景图间的切换比较简单,,

输入框锁定,输入框变色前面的图标也变色

.num{ width:204px; height:34px; border:solid 1px #c3c3c3; padding-left:34px;color:#999;line-height:34px;}
.num:focus{  border:solid 1px #2298ff;   }

这次的图标图片做得太挤了,不然用上面的方法就可以实现图标变亮 ,最后用JS解决了

鼠标锁定输入框文字提示消失,离开提示文字显示
function forFouce(obj){
    var val = obj.value;
    if(val == "帐号"){
        obj.value = "";
    }
}

//
function forBlur(obj){
    var val = obj.value;
    if(val == ""){
        obj.value = "帐号";
    }
}

开始用HTML5的paceholder="帐号" 做的,这样提示文字为灰色,输入文字为黑色。可是IE不支持,只能改成JS代码,输入时输入框内的文字不能变色,这怎么解决呢~

支付宝全屏图片轮播。很好用,很不错滴

其实网页很简单,为什么我做起来这么费时间

时间: 2024-08-07 14:31:22

切图笔记的相关文章

页面制作 Chapter 1--PhotoShop切图笔记

由于自己大二自己玩过PS,所以,这节课就相对容易点.但是,PS不经常用的后果就是快捷键容易忘...... 1.PS首选项的设置 编辑>首选项>单位与标尺,把标尺和文字单位改成像素 2.创建切图需要的工作区,关闭不需要的面板(窗口>工作区>新建工作区>保存工作区),右上角选择工作区 a.信息面板(F8) b.图层面板(F7) c.历史记录面板 d.工具栏 e.选项栏 3.切图常用的工具 a.移动工具(选择图层.移动图层) b.矩形选框工具(选择矩形框,查看信息面板,获取选中区域

学习笔记:APP切图那点事儿–详细介绍android和ios平台

学习笔记:APP切图那点事儿–详细介绍android和ios平台 转载自:http://www.woofeng.cn/articles/168.html   版权归原作者所有 作者:亚茹有李 原文地址:http://blog.boocss.com/app-android-ios/ 一.android版 在做android版本设计的时候,尺寸有很多种,这时我们要以一种尺寸为基准,那这个基准尺寸是480px*800px,设计图完成之后就开始切图了 需要注意的: A:android主要有3种屏,即:

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

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

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

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

前端PS切图(笔记)

一 界面设置 预设WEB 1920*1080 自定义    *2000   72  RGB  背景:透明 自动选择图层  Ctrl+单击 视图>显示>智能参考线>标尺(Ctrl+R) 窗口   图层,历史记录,信息,字符 信息面板中  单位:像素    一.二颜色:RGB  文档尺寸 编辑>首选项>单位与标尺  单位:像素 保存  窗口>工作区>新建工作区>WEB切图 二 PS基本操作 1.简单工具 选区  单击选择   双选区,单击同时,shift加选区

前端切图的一些笔记(整理的有点乱)

切图一: 1.使用移动工具 自动选择+图层 2.点击所要切的图标,这时在图层区域会锁定到你所选择的图层 3.按Alt不放,并且点击图层眼睛,这时可以把其他图层隐藏 注:图要尽量放到大 4.使用矩形选框工具,选择所要图标 5.按ctrl+shift+c复制(这个复制跟ctrl+c的复制不一样),新建一个透明图层,再ctrl+v粘贴 6.放大放大,然后选择切片工具进行切块 注意:可以做成雪碧图(CSS Sprites),设置同样的高度,这样页面上的内容就只需请求一张图片就行了,优化性能 字体:使用字

页面制作部分之PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

前端技术-PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

切图 or 切片

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