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

一. 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. CentOS 7 下的软件安装建议

    https://seisman.info/how-to-install-softwares-under-centos-7.html https://seisman.info/linux-environ ...

  2. Nginx 启用gzip压缩

    1. 网页压缩 网页压缩是一项由 WEB 服务器和浏览器之间共同遵守的协议,也就是说 WEB 服务器和浏览器都必须支持该技术,所幸的是现在流行的浏览器都是支持的,包括 IE.FireFox.Opera ...

  3. 货币金额的计算 - Java中的BigDecimal

    在<Effective Java>这本书中也提到这个原则,float和double只能用来做科学计算或者是工程计算,在商业计算中我们要用 java.math.BigDecimal.,而且使 ...

  4. tomcat字符，文档，数据库配置

    修改tomcat目录下conf目录下的server.xml tomcat容器的解码配置 URIEncoding="UTF-8" <Connector port="8 ...

  5. linux特殊字符

    linux特殊字符: * 匹配文件名中的任何字符串,包括空字符串. ? 匹配文件名中的任何单个字符. [...] 匹配[ ]中所包含的任何字符. [!...] 匹配[ ]中非感叹号!之后的字符. 当s ...

  6. Css_Backgroud-position（背景图片）定位问题详解

    background-position的说明:    设置或检索对象的背景图像位置.必须先指定 background-image 属性.该属性定位不受对象的补丁属性( padding )设置影响.   ...

  7. Webdriver - Selenium Grid Configuration

    Grid parameter: role = <hub|node> (default is no grid, just run an RC/webdriver server). When ...

  8. Windows定时器

    目录 第1章定时器    1 1.1 创建定时器    1 1.2 销毁定时器    1 1.3 定时器的运作    1 1.3.1 产生WM_TIMER消息    1 1.3.2 分发WM_TIME ...

  9. before和after的强大

    前言:刚学他两个的时候,是用于清除浮动,而且曾单纯的以为俩只有这作用. 但看到几篇博客后,发现自己是多么的无知,他两个的强大远不止于此. 当然,这篇文章大多数是借鉴网上的实例,在加上自己的些许简介而成 ...

  10. hibernate执行sql的三种方式

    方式一:直接使用HibernateTemplate的find()方法,find方法支持执行hql语句 List<T> list = this.getHibernateTemplate(). ...