这两天在学习页面的切图，样式设计，把学习过程中注意的地方记录下来。

一. 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. 在firefox下，设置border:0 none; outline:medium; 无边框：

5. 在chrome下，设置border:0 none; outline:medium; 无边框：

[开发笔记]-页面切图、CSS前端设计、JS的更多相关文章

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

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

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

    切图的主要目的是从设计师提供的psd中获取网页制作所要的资源 一.界面设置 1. 新建文件,调整界面大小,背景设置为透明 2. 自动选择,把组切换为图层 3. 添加窗口内容,一共四项:图层.历史纪录. ...

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

    上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流. 脱离标准流 css中一共有三种方法脱离标准流 浮动 绝对定位 固定定位 浮动 我们要搞清楚什么是浮动,先来看一个标准文档流的例 ...

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

    目的: 由于网站更新活动较频繁,其大多数以静态图片为主,设计人员在除了设计图后都要给前端制作人员再次切图从而达到页面加载图片缓慢的问题,为了减少工作量做了该工具. 功能: 上传一张图,将其分割成指定等 ...

  5. ios移动端切图及前端规范

    移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 切片要求: 1.    设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X133 ...

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

    在Appcan开发中,首先要进行的就是页面布局,然后在这个页面上填充数据,加上互动元素,最终构成完整的应用. 因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发,所以与普通 ...

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

    前端主要从事一些代码开发工作,PS使用是前端工程师必备,但又无需精通的一项技能. 前端切图四大面板:在“窗口”菜单下开启 1,信息(手动开启)2,字符(手动开启)3,历史记录(手动开启)4,图层(默认 ...

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

    CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...

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

    标签定位 相对定位 相对定位是用来微调元素位置的,让元素相对于原来的位置进行调整. <head> <meta http-equiv="Content-Type" ...

随机推荐

  1. uva11429(生成随机数 期望)

    // // main.cpp // uva11429 // // Created by New_Life on 16/8/4. // Copyright © 2016年 chenhuan001. Al ...

  2. hiho_1057_performance_log

    题目大意 给出一个函数调用日志,判断日志是否合法,且求出合法日志中函数调用的时间长度. 题目链接:performance log 题目分析 首先需要清除非法日志的几种情形: (1)日志的时间戳不是按照 ...

  3. 图片(img标签)的onerror事件

    打开网页时提示 Stack overflow at line: 0.我做了截图如下: 经过分析,发现网页中存在类似如下的代码: <img src="pic.gif" oner ...

  4. 使用ar命令删除iOS静态库重复编译的.o文件

    关于 xcode引入第三方静态类库 duplicate symbol _OBJC_XXX 重复编译错误 看这里 http://www.cnblogs.com/cocoajin/p/3917709.ht ...

  5. android优化从网络中加载图片速度。。

    从网络中加载图片主要要注意两个方面的问题: 1.内存管理:图片占的内存很大,假如图片数量多,很容易让系统抛出out of memory的异常. 同时我们也要注意不同android版本中内存管理的区别. ...

  6. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  7. SQL SERVER数据库索引、外键查找

    1.索引查找 select a.name as tabname ,h.name as idname,h.type_descfrom sys.objects as a right join sys.in ...

  8. linux开关端口问题

    linux开关端口问题: 我们知道一些常用的端口,比如mysql的端口为3306,sql的端口为:1433,以及tomcat的端口为 8008等等一样! 当这些端口在linux下是没有开启时,我们是无 ...

  9. Remove Duplicates from Sorted Array [LeetCode]

    Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...

  10. Struts2动态结果(${})and全局结果(global-results)

    动态结果 例:根据判定动态结果区分用户进行登录 1.先在TestAction类中进行判定赋值 public class TestAction extends ActionSupport { priva ...