前端设计
抬头遇见自己_
天下没有下等的职业,只有下等的人,我认为,没有不成功的行当,只存在不争气的人不成功的人。
展开
-
前端设计中的渐进增强与优雅降级
在前端设计的过程中,我们都必须涉及到的一个问题,那就是浏览器的兼容性问题。这个对用户体验的关注度是非常高的,于是就在网络上查找了相关的资料。以下内容为转载,为了方便记忆而记录下来。优雅降级(graceful degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。渐进增强(progressive enhancement):一开始只构建站点的最少特性,然后不断针对转载 2014-01-16 14:54:13 · 791 阅读 · 0 评论 -
网页布局中的常见的兼容性问题
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让转载 2015-01-14 12:02:24 · 826 阅读 · 0 评论 -
发现一篇不错的博文,和大家分享一下,为有志成为一名优秀前端工程师的童鞋们提供一个
一、技术的必须的 作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。三者必须同时精通,类似我这样对前端知识一知半解的,一遇到问题就停下工作就四处搜索解决方案的,首先就算不上一个合格的前端人员。像我这样的如果当了前端工程师那工期肯定是不能保证的。合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下(包括搜索引擎),能够完成大多数任务。 以下知识点是作为转载 2014-12-29 10:00:27 · 1041 阅读 · 0 评论 -
Web前端开发规范手册
一、规范目的1.1二、文件规范2.1 文件命名规则2.2 文件存放位置2.3 css 书写规2.4 html书写规范2.5 JavaScript书写规范2.6 图片规范2.7 注释规范2.8 css 浏览器兼容一、规范目的1.1 概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范转载 2015-01-17 15:18:09 · 801 阅读 · 0 评论 -
常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:颜色16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1;property:value1 value2;转载 2015-03-02 11:47:50 · 471 阅读 · 0 评论 -
全是干货!移动HTML 5前端性能优化指南
编者按:前端工程师的菜!最近移动Html 5越来越火,想有一个体验流畅的Html 5 应用,这篇优化指南就别放过咯。腾讯的同学将关键的注意点与优化方法都总结出来,全文高能干货,非常值得深度学习 >>>概述PC优化手段在Mobile侧同样适用在Mobile侧我们提出三秒种渲染完成首屏指标基于第二点,首屏加载3秒完成或使用Loading基于联通3G网络平均338KB/s(2.71M转载 2015-03-02 15:38:14 · 629 阅读 · 0 评论 -
移动前端工作的那些事---前端制作之微信小技巧篇
随着微信的越来越大众化,微信的使用程度也越来越高。随之,产生了一种新的推广模式,即微信推广。在这个微信的大平台上会衍生出许许多多的推广手段。而移动前端作为服务于手机用户的手机网页技术,也不可避免的加入进来。 一些客户不仅仅满足于自己的网站可以在手机浏览器上完美的展现出来,同时还要求可以在微信中进行广泛推广。这就要求移动前端的制作者在制作移动端网站的过程中,还要考虑是否兼容微信的推广转载 2015-03-16 15:39:01 · 1339 阅读 · 0 评论 -
Web开发者不容错过的20段CSS代码
Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。 本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。 1. CSS Resets 网络上关于CSS重置转载 2015-03-31 09:52:35 · 728 阅读 · 0 评论 -
前端开发规范之jQuery编码规范
翻译自:http://lab.abhinayrathore.com/翻译人员:前端开发whqet,意译为主,不当之处敬请指正。译者说:临近期末,大部分的基础教学内容已经讲解完毕,在进行比较大型的项目训练之前,如果能让学生了解甚至遵循一些前端开发的编码规范将会是一件非常有意义的事情。因此,本博客准备于近期整理一个编码规范与最佳实践的系列文章,包括html、css、javascript转载 2015-06-27 14:53:11 · 654 阅读 · 1 评论 -
觉唯移动web开发常见问题解决方案
设计方案 1、 元素meta 标签位于 head 标签之间,是 HTML 语言的一个辅助性标签,合理的设置在移动端中起着非常重要的作用。下面列举几个常用的用法: // 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 <meta content="width=device-width, initial-scale=1.0, maxi转载 2015-09-08 17:21:57 · 771 阅读 · 0 评论 -
移动前端头部标签(HTML5 head meta)
标题原创 2016-03-23 08:56:48 · 631 阅读 · 0 评论 -
学会了ES6,就不会写出那样的代码
声明变量的新姿势用let不用varES6之前我们用var声明一个变量,但是它有很多弊病:因为没有块级作用域,很容易声明全局变量 变量提升 可以重复声明还记得这道面试题吗?var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[6](); /...转载 2018-04-12 09:54:13 · 941 阅读 · 0 评论 -
webpack实现开发、测试、生产等环境的打包切换
使用webpack构建的工程,在开发过程中不同环境的配置不同,在各种环境的打包切换过程中需要手动修改相关配置达到预期目的。但是每次都手动修改会比较麻烦,本文简单介绍如何通过对webpack进行配置,实现不同环境打包分类配置; 1.修改build文件夹下build.js文件 添加声明变量 修改前 ...转载 2018-06-25 08:43:57 · 7040 阅读 · 0 评论 -
人气流量通通要!电商网站商品页设计超全面指南
编者按:今天这篇文章读完后,同学们可以来做一个小练习,根据文章,把优设看做一个电商网站,文章看做商品,来分析一下哪篇文章是热门,有哪些突出的方法,文章里藏有哪些引导用户的细节等等,即学即用,不容易忘,分析得好,我给你点赞,手动的那种。 @AnyForWeb_UDC :电子商务中的商品列表页也被称为商品聚合页,是为了能为消费者提供更完善的商品种类选择。这一类页面的最大特点就是信息量大、图片转载 2014-12-25 14:05:51 · 1161 阅读 · 0 评论 -
百度,淘宝,腾讯三大巨头HTML页面规范分解
【兼容html5方案】百度贴吧,百度图片的实现(function(){ var tags = ['header','footer','figure','figcaption','details','summary','hgroup','nav','aside','article','section','mark','abbr','meter',转载 2014-12-23 15:04:23 · 746 阅读 · 0 评论 -
页面前端的水有多深?再议页面开发
但凡从事互联网的人基本都会写几行html,用过Word的人用Dreamweaver也能做出规整的页面,所以大部分人会很自然地认为页面的开发没什么技术含量,很简单。不仅有这种普遍的认知,对从…但凡从事互联网的人基本都会写几行html,用过Word的人用Dreamweaver也能做出规整的页面,所以大部分人会很自然地认为“页面的开发没什么技术含量,很简单”。不仅有这种普遍的认知,对从业者来转载 2014-01-27 09:33:43 · 1501 阅读 · 0 评论 -
漫谈浏览器的明天
声明:本文只从功能、设计与体验的角度阐释浏览器的形态与存在方式的改变,观点难免有所片面。浏览器从 1990 年诞生到现在,它已经成为了互联网的入口级应用,在操作系统这个大圈子里画出了自己的圈子,与浏览器所关联的网页标准、商业模式和平台普及,这其中的每一 项似乎都预示着新的机遇和发展。显然,在当今,没有浏览器的互联网是无法想象的。而浏览器产品形态的变化所遵循的主线,实质上就是时下的 WEB转载 2014-01-27 09:29:19 · 773 阅读 · 0 评论 -
让页面更高大上 网页设计细节大总结!
大家都知道”细节决定成败”这句名言不仅在其他行业非常重要,而在页面设计当中更是颠扑不破的真理。需求的眼睛和感觉总是非常敏锐的,对于一个页面没有得到需求方的认可,但是他们又说不出什么理由,这个时候就是细节问题了。一个页面的细节到位才能充分体现出页面的品质。一个优秀的作品与卓越的作品相比差距就在于细节的把控。 那我们具体该如果做好细节呢? 下面简单介绍一下。 字符转载 2014-02-18 09:07:28 · 2724 阅读 · 0 评论 -
firefox(火狐)与IE Chrome浏览器兼容的javascript和CSS写法
css:1.ul标签中FF中有个padding值,却没有margin值,而在IE中正好相反解决办法:将ul的padding和margin都设为0(也可以不是0)如:padding:0;margin:0;list-style:none;另外form默认在IE中也会有margin值,所以最好也将其margin和padding设为02.ie中cursor:hand可以将鼠标设转载 2014-04-14 16:15:30 · 6924 阅读 · 0 评论 -
实现响应式布局
响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计,可以看看我最近发表的响应式站点列表(译者注:可以好好看看示例中的网站在不同分辨率下的展现方式)。对新手来说,响应式设计可能有一点复杂,但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计,我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询(Media Queries)的基本原理(假定你了解基本的CSS知识)。转载 2014-03-18 17:39:15 · 1078 阅读 · 0 评论 -
EasyUI DataGrid使用formatter属性实现自定义功能
使用JQuery EasyUI中的DataGrid组件可以很方便的得到一个数据表格,这里将对这个数据表格做一点扩展,让它能够上下移动表格里的数据行。 1.定义数据表格:转载 2014-06-05 16:51:45 · 10834 阅读 · 0 评论 -
使用 CSS 媒体查询创建响应式网站
适用于所有屏幕大小的设计固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩。利用响应式设计,无论您采用什么设备或屏幕来访问网站,都可以呈现一个可用的界面。响应式设计可以响应各种屏幕大小,因此也成为了 “前瞻性” 的网站,屏幕将随着新的智能手机和平板电脑的问世而快速演变。实现响应式设计的主要途径是使用 CSS 媒体查询。在本文中,我们将了解如何将转载 2014-07-23 09:55:34 · 1084 阅读 · 0 评论 -
纯CSS箭头,气泡
原文地址: CSS Triangles 演示地址:CSS Triangles Demo翻译 2014-09-25 10:14:40 · 1690 阅读 · 0 评论 -
Web前端研发工程师编程能力飞升之路
今天看到这篇文章。写的非常有意思。发现自己才处于"入室"阶段。【背景】如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧;如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧;如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧;web前端研发工程师,在国内是一个朝阳职业,自07-08年正式有这个职业以来,也不原创 2014-10-23 16:21:13 · 556 阅读 · 0 评论 -
清除浮动的原理和方法
浮动元素容器的clearing问题1. 问题的由来有这样一种情形:在一个容器(container)中,有两个浮动的子元素。 在浏览器中一运行,就会出现意想不到的结果。实际视图是子元素显示在父容器的外部。2. 问题的原因与浮动定位有关。在CSS规范中,浮动定位不属于正常的页面流(page flow),是独立定位的。所以,只含有浮动元素转载 2014-09-30 09:25:13 · 663 阅读 · 0 评论 -
使用jquery jcrop插件进行图片的截取与保存
第一步:上传大图片到服务器,并且展示到页面第二部:调用jcrop组件js及css[html] view plaincopyscript src="${ctx}/js/jquery-jcrop/jquery.Jcrop.js">script> link rel="stylesheet" href="${ctx}/css/jquery-jc转载 2014-11-27 14:25:09 · 779 阅读 · 0 评论 -
DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例、图演示讲解方法来学习和了解DIV CSS display。目录CSS display使用display的值有哪些css display block显示css disp转载 2014-11-25 10:04:33 · 1214 阅读 · 0 评论 -
CSS重置样式
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong原创 2014-12-23 15:00:42 · 561 阅读 · 0 评论 -
javascript的api设计原则(转)
前言本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正。一、接口的流畅性好的接口是流畅易懂的,他主要体现如下几个方面:1.简单操作某个元素的css属性,下面是原生的方法:...转载 2018-07-26 10:29:40 · 616 阅读 · 0 评论