[开发笔记]-页面切图、CSS前端设计、JS

这两天在学习页面的切图,样式设计,把学习过程中注意的地方记录下来. 一. input输入框点击时去掉外边框一般在IE,firefox下,设置 border:0 none; 即可.但在chrome下,仍会出现边框. 可以在样式中应用:outline:medium;来解决. 效果如下图: 1.在firefox下,设置border:0 none; 无边框: 2.在IE下,设置border:0 none; 无边框: 3.在chrome下,设置border:0 none; 有边框: 4. 在firefo…

做一个会PS切图的前端开发

系列链接做一个会使用PS的前端开发做一个会PS切图的前端开发切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方…

前端开发使用Photoshop切图详细步骤

切图的主要目的是从设计师提供的psd中获取网页制作所要的资源一.界面设置 1. 新建文件,调整界面大小,背景设置为透明 2. 自动选择,把组切换为图层 3. 添加窗口内容,一共四项:图层.历史纪录.信息.字符,之后在右上角调整信息面板选项 4. 新建并保留该工作区,出问题可以直接恢复 5. 首选项各内容单位都设置为像素到此,准备工作完成完成二.基本操作这部分视频里主要讲解了一些ps的常见操作,记录几个个人觉得有用的点 1. shift & alt 的灵活使用 2. 多个工具(套索.魔棒等…

前端开发笔记（3）css基础（中）

上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流. 脱离标准流 css中一共有三种方法脱离标准流浮动绝对定位固定定位浮动我们要搞清楚什么是浮动,先来看一个标准文档流的例子 <style type="text/css"> div{ width:100px; height:100px; margin:10px; border:1px solid red; } </style> <body> <div></…

使用PHP写了一个图片分割等份工具，便于前台页面切图时使用。

目的: 由于网站更新活动较频繁,其大多数以静态图片为主,设计人员在除了设计图后都要给前端制作人员再次切图从而达到页面加载图片缓慢的问题,为了减少工作量做了该工具. 功能: 上传一张图,将其分割成指定等份的小图. 将分割出的多张图片嵌套进公共的活动模版里,并为每张图片设置上要跳转的链接,直接生成页面html 预览图: 主要实现代码: /** * Created by PhpStorm. * User: Administrator * Date: 14-3-26 * Time: 下午6:31 */…

ios移动端切图及前端规范

移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 切片要求: 1. 设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X1334,图片资源尺寸则是2倍图尺寸,在二倍图的基础上压缩成50%,图片资源尺寸则是1倍图尺寸: 2.产品效果图独立切片,即是每张效果图独立建立一个文件夹(命名以效果图名称为准),文件夹内容包含1倍图文件.2倍图文件. 3倍图文件和标…

Appcan开发之页面布局与CSS排版(转)

在Appcan开发中,首先要进行的就是页面布局,然后在这个页面上填充数据,加上互动元素,最终构成完整的应用. 因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发,所以与普通web开发基本没有区别,理解成webapp的开发或许更好解释. iOS.Android系统中已经内置webkit内核,而appcan正是利用webkit来运行我们编写的页面,也就是可以将appcan看作是一个加强的webkit内核,强在它能通过js来控制手机某些功能,比如打电话.发短信.定位等等,这…

【PS切图】前端工程师必备,但又无需精通的一项技能。

前端主要从事一些代码开发工作,PS使用是前端工程师必备,但又无需精通的一项技能. 前端切图四大面板:在“窗口”菜单下开启 1,信息(手动开启)2,字符(手动开启)3,历史记录(手动开启)4,图层(默认开启) PS首选项设置: 编辑->首选项->单位与标尺,选改为像素. PS 技能需求.工具需求: 常用快捷键图片格式 ( PSD | JPG/GIF/PNG) JPG/GIF/PNG的应用 PSD测量注意事项: 文字右方和下方会有1像素的默认间隙:…

前端开发笔记（2）css基础（上）

CSS介绍层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. <style type="text/css"> span{ color:red;…

前端开发笔记（4）css基础（下）

标签定位相对定位相对定位是用来微调元素位置的,让元素相对于原来的位置进行调整. <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div{ width:100px; height:100px;…

前端切图:CSS实现隐藏滚动条同时又可以滚动

CSS 实现隐藏滚动条同时又可以滚动原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ::-webkit-scrollbar {display:none} </style> </head&…

Web页面切图和CSS注意事项

一.Asp.net中的线程池设置在Asp.net的服务处理中,每当服务器收到一个请求,HttpRuntime将从HttpApplication池中获取一个HttpApplication对象处理此请求,请求的处理过程将被排入线程池中,对于Asp.net来说,在Machine.config文件的processModel部分中可以设置线程池中的参数. Asp.net线程相关的参数配置: 参数配置 autoConfig 基于服务器的配置自动设置. maxWorkerThreads 设置每个CPU的最…

Bytom Dapp 开发笔记（一）：架构设计

简介研究比原链已经一年了,用比原链做了几个dapp,而且最近还做了一个基于他们插件钱包的dapp,总结了一些遇到的坑,还有一些技术细节,接下来我会分成三章,从dapp设计架构上,到深入到源码分析去帮各位介绍一下比原链的dapp,还有分析比原官方最近发布的dapp的架构. Dapp架构设计这个是所有工作的基础,从看完比原链源码使用过比原的钱包后,我们就在思考比原链的dapp如何做,应该说是区块链应用应该如何做,我们之前尝试过用以太坊.比特币.超级账本去做dapp.先总结一下区块链dapp的痛点…

[开发笔记usbTOcan]软件需求分析和软件架构设计

前面文章进行了系统分析和系统架构设计,手工焊接了一个板子,集合EK-TMC123GXL开发板(请忽略焊接技术) SWE.1 | 软件需求分析软件需求分析过程的目的是将系统需求的软件相关部分转化为一组软件需求. 软件需求分析包括, 指定软件需求.使用系统需求和系统架构,以及对系统需求和架构的更改,以确定软件所需的功能和性能.在软件需求中指定功能性和非功能性软件需求. 组织软件需求.在软件需求描述中构造软件需求,比如对项目相关集群进行分组, 按照项目的逻辑顺序排序, 根据项目的相关标准进行分类,…

WP开发笔记——页面传参

WP APP页面与页面之间参数的传递可以通过程序的App类设置全局变量. 由于App 类继承自Application类,而通过Application的Current属性可以获取到与当前程序关联的Application类实例,然后通过转换就可以得到App类实例. 因此,通过在App类中设置全局变量,在程序的其他任何页面都可以访问. public partial class App:Application { public int ID { get; set;} ; } 假设从页面Page1中需要把…

HTML+CSS - 前端设计的小技巧（持续更新......）

2015年7月6日20:28:20 1.设置文字的居中,非控件内的. :text-alain:center 2.图片在ASP.NET中,可以直接拖放到界面,自动形成img控件. 3.CSS直接在全局样式 * 内,设置UL标签无样式,图片无边框,margin和padding都为0. 4.取消浮动Clear. :clear:left 取消左浮动 5.图片按钮 ImageButton控件 SRC属性,设置图片的路径. 6.服务器空间,在网页中也是input控件,所以,直接设置input属性…

iOS开发使用pdf切图

把pdf资源拖到Assets.xcassets里面, 打开最右边的按钮, scales选择single scale就可以像以前一样使用了: [UIImage imageName:@"xxxx"];…

odoo开发笔记 -- 模型后台方法返回前端form视图和tree视图的写法

待补充: 参考:工作单跳转到通关清单 --form(一对一) 工作单跳转到报关单列表 --tree (一对多)…

前端设计——js实现图片切换的淡入淡出

1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到position定位.A盒子要相对B盒子进行移动,那么B盒子就设置为relative,A盒子要设置为absolute.这样才能让其进行相对移动.距离的调节,使用top bottom left right 去调节A到合适的位置.如果要垂直居中可以使用{top:50%和margin-top:-A…

【前端GUI】—— 前端设计稿切图通用性标准

前言:公司在前端组和视觉组交接设计稿切图的时候,总会因为视觉组同事们对前端的实现原理不清楚而出现各种问题,在用的时候还得再次返工,前端组同事们一致觉得应该出一份<设计稿切图通用性标准文件>,这里是我结合资料做出的一份总结. 1.切图资源尺寸必须为双数 2.LOGO类图片以方形切图输出 3.可点击部件要把相关状态都切图输出,比如正常状态.点击状态 4.同一类型图片保持同样大小尺寸输出切图全屏切图类: 局部切图类: 空白页提示案例图: 5.有阴影背景的内容显示区域保持居中输出切…

前端菜鸟起飞之学会ps切图

由于之前只顾着追求效率,没有学习过PS,但其实这是前端开发人员需要学会的技能之一,曾经看过一个大佬的前端经验分享说他在招聘时遇到不会切图的会直接pass掉,可见前端开发人员学会切图是多么重要.通过观看慕课网上的相关视频,觉得讲的很好,对前端人员需要掌握的一些ps技术有了大概了解,同时也突然领悟到,之前总是烦恼找不到静态页面去练习,只能找有现成素材的,但素材却挺难找.学会ps切图后,可以在网上直接找网页psd效果图,进行切图和静态页面效果实现练习.想要学习的朋友,可以直接慕课网上观看视频学习(ht…

前端PS常用切图技巧

前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就是用选区工具选中我们要的切图区域,复制到新文件,然后整个保存下来,这样的切图方法几乎没有可取之处,不过我最初确实就是这样干的... 2. 传统切图 02 这种效率要高一些,可以同时切多个图片,用切片工具选中多张我们需要的图片区域,点击文件->保存为 web 所用格式,这种方法的缺点是默认会保存多张图…

Sketch 和 PS中的设计图如何实现“自动切图”？

切图是很多UI设计师的一项日常工作.平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感. 但有的认为前端自己会切图是最好,不建议把切图的事情丢给设计师做.这样中途会损耗结构讲解的开销(比如网页层级,细节重构方案等),毕竟最后css是前端去码,怎么切最合适要自己把捏的,否则又要引出一个新问题(设计师有必要掌握考虑重构实现的切图吗?). 总之,切图对于设计师设计创作.程序员写代码来说,其实不是件难事,但…

那些年，UI设计师还在手工标注和切图时走的弯路

在我从事UI设计师这几年的工作中逐渐发现,最让人糟心的不是应付各种奇葩的需求,完成设计稿,而是交付.每次交付的设计稿和最后开发出来的产品总是让我心塞无比,很少最终产品和我的设计稿是完全一致的. UI设计师对接产品经理是个问题,UI设计师对接前端工程师是个问题. UI设计师处于整个产品开发链条中最为重要也是最为尴尬的一环,产品界面设计完全出自设计师,但是却不是由设计师来最终实现. 根据我的经验,其实大部分问题都出在了沟通上,开发工程师没有完全理解设计稿,他们完全依赖我们的标注和切图来进行开发,设计…