Blog

前面我们已经了解到一些html5中新增的表单验证属性，相当实用，直接实现了之前需要用js才能实现的功能。我们通常做的搜索框也属于表单内容，就是一个text类型的input和一个submit类型的input。 Type=”text”的input是最基本的input类型，仅针对它，html5就新增了几个非常人性化的属性：placeholder、autofocus和speech。 Placeholder，例：输入搜索内容"> 。一目了然，它就是用来设置初始值的，而且初始值的颜色为灰色，一旦input中输入新内容，这个值就消失了。这个属性真真是太人性化了。</input type="text" placeholder=" Autofocus，例：。“自动聚焦”，即当进入一个页面时，加有此属性的input输入框会自动获取焦点，也就是光标第一时间自动停留在该input上，用户可以在进入页面后直接输入内容，而省去了移动鼠标到input上并点击这一步骤。如果一个页面上有两个以上input使用了此属性，那么浏览器会自动选择最后一个使用它的input来聚焦。</input type="text" autofocus> Speech，语音输入功能属性。大家用智能手机的时候应该都见识过输入框里那个小话筒的语音输入功能吧，就是用的这个属性。不过目前大部分浏览器都还没有实现这些接口，只有基于webkit核心的浏览器（如Chrome）才能使用它，且需要加上x-webkit前缀。也就是说x-webkit-speech是webkit内核浏览器特有的语音识别工具，即私有属性。用法：。</input type="text" x-webkit-speech> 大家可以将下面的code直接拷贝并另存为网页，在Chrome浏览器里预览并体验一下，很赞的哦~ </meta http-equiv="content-type" content="text> </form class="searchform" method="get">输入搜索内容"> </input type="text" placeholder=" 点击搜索"></input type="submit" value=" </input type="text" autofocus x-webkit-speech> 点击搜索"></input…

如图，这是TalentPool项目的一处需求效果，看似简单的一段布局，暗含一个难点：上传选择框（input[file]）默认按钮文字是中文，且不同浏览器解析不一样（“浏览、选择文件”等），而我们要做的是英文网站，所以这个问题亟待解决。 首先想到的就是将”file” />设置透明隐藏起来；再做一个文本框”text” />和按钮<input< span=""> type="button" value=”Browse” />来模拟上传选择框（input[file]）的样式；然后利用此按钮的click事件触发”file” />的click()来模拟点击效果；最后给”file” />绑定一个change事件将选择获得的路径文本赋给文本框”text” />。做到这里应该算成功了吧，然而在测试的时候发现此方法在IE下行不通，原因是IE中提交表单时会清空表单数据，这一瞬间触发了我加的绑定change事件，从而导致无法提交到选择文件。</input type=<></input type=<></input type=<></input<></input type=<></input type=<> 头疼了好一会儿，上网搜集这个问题，发现网上的答案大多也是与此类似，可是此方法不可行啊。于是静下心来，从问题点出发考虑，并结合各位前辈提出的问题，经过各种尝试终于得到最完美的解决方案：首先同样是将”file” />设置透明，不过不隐藏，而是至于顶层；再做一个文本框”text” />和按钮<input< span=""> type="button" value=”Browse” />置于下层并调整样式使之刚好被覆盖；然后给”file” />添加onChange="setFilePath()"，并在JS中写好一个方法setFilePath()，实现点击后及时赋值给文本框”text” />。另外”file” />的宽度样式设置也很巧妙，用样式width来设置是不起效果的；用内带的size来设置只有IE下有效；而后又发现用JS设置width样式在火狐这类主流浏览器有效，IE无效。这样也不错，可以分别设置这两个值来匹配一个固定的宽度。</input type=<></input type=<></input type=”file” ></input…

今天再向大家介绍CSS3的一个经典——动画属性：Transitions。Transitions有三个参数property、duration、timing-function。 Property：表示某属性名称，即将要设置动画的那个属性，如background、color、height、width等； Duration：表示动画执行时间，即将在多少时间内完成动画，如0.5s表示半秒，1s表示1秒； Timing-function：表示执行动画的种类，可理解为过度效果，比如linear(匀速渐变)、ease-in(由慢到快渐变)、ease-out(由快到慢渐变)等。 来实例说明下：有一段落p，背景色为红色，字体为白色，现在要实现一个动画效果是，当鼠标悬停到此段落p上时，在2秒时间完成背景色渐变为黑色的动画。应该这么写： p { background:#f00; -webkit-transition:background 2s linear; -moz-transition:background 2s linear; -o-transition:background 2s linear; -ms-transition:background 2s linear; transition:background 2s linear; color:#fff; } p:hover {background:#000;} * 注意：此属性在不同浏览器下需要带有不同的前缀（例如-webkit-****等） 另外，Transitions属性中的三个参数是可以拆开表达的，就好比我们常见的background能拆分成background-image、background-repeat、background-position等一样的道理。因此例子中的“transition:background…

Web前端设计是在div+css流行起来后衍生出的一个职位，它是从笼统的“网页设计师”概念里分离出来的独立工作。这里的“设计”是指将PSD设计稿转换成Web页面时html结构及css样式的代码设计，行业内对此项工作有多种称呼：切图、网页排版、网页设计等等。 专职的Web前端设计，这听起来是一个轻松又容易的活儿，确实，这项工作可以简单到直接把PSD效果图从PS里导出为网页，但这显然太过理想化了，我们日常接触的网站项目是基本不存在这样的案例的。事实上，我们的工作流程一般是：“分析设计稿=>制作切片=>编写HTML和CSS”，在这项工作中我们需要考虑的因素很多：结构代码完整性、标签的正确使用、结合SEO知识语义化标签、页面性能最优化等。工作内容越纯粹，要求也就越苛刻，只有综合考虑以上几点因素才能设计出好的Web页面。 那么工作中具体应怎样考虑这些因素，以及怎样做才能尽量实现要求呢？下面我们来逐一分析下工作流程： 一、分析设计稿。就是说拿到设计稿后不要急于动手，要先细细观摩一番，然后从以下几点展开分析： 1、页面结构及层次 2、页面中的可公用部分（结构、样式等）及特立独行部分 3、在1、2基础上对各部分工作的实现有个总体思考 4、在3的基础上，综合扩展性、复用性及页面性能来个深思熟虑 5、在4的基础上，考虑出本地站点建立的文件分布和目录结构 二、制作切片。就是将设计稿上的必要图片元素分别切出来保存成各个独立的小图片，便于制作Web页面时使用。这一步并不单纯是把图片切出来就完事了，要想让Web页面性能最大化，我们需要依次按下面的步骤着手： 1、切出需要的部分 2、存储切片，这一步包括图片优化（要权衡图片文件大小、质量及存储类型） 3、将2步完成的切片分类：插入图片和背景图片。 4、在3的基础上，将所有背景图片合并为一个整体图片（减轻页面加载负担） 三、编写HTML和CSS。这是将设计稿转换成Web页面具体实施的一块，也是我们的工作重点。前面两步都是为这一阶段的完美实现奠定的基础，也是不容忽视的。众所周知，html是结构语言，css是样式描述，两者紧密结合才形成了精彩页面，所以在进程中我们必须同时兼顾二者，要做到以下几点： 1、通过html结构搭建和css样式控制实现设计稿视觉效果（注意标签语义化、类及ID命名规范） 2、考虑html结构模块化，及css样式的扩展性、复用性和可维护性来实现整站样式分布 3、测试网页在各个主流浏览器下的兼容性。注意，这里放在最后说，并不是指我们在完成整站页面后才做测试，通常在制作的过程中就要边写边测试，这样有利于发现不兼容的地方和查找原因，久而久之知道的多了，我们就可以对兼容性问题了如指掌了。大家要知道，CSS Hack只有在迫不得已时才用，因为有些兼容性问题是可以避免的，这就需要我们对CSS特点掌握透彻，才能写出更标准的样式。 这些其实就是我平日的工作心得，希望对大家有所帮助。前端设计师们，让我们一起努力吧~

在做一些弹出层的时候，经常需要弹出层有各种居中效果，实现这类特效我们一般就就要用到JS或jQuery，其中就需要获取浏览器窗口或文档的宽度和高度，以此来计算弹出层位移的值。今天我们就来看下如何运用JS及jQuery获取浏览器窗口内各种尺寸。 首先，浏览器可视区域尺寸——不是浏览器窗口尺寸，也不是页面尺寸，可以理解成我们一眼能看到的文档面积大小。 JS方法： 1、简单来说，可以用window.innerWidth和window.innerHeight。但要注意，这个尺寸是包含滚动条大小的。如果可以忽略滚动条的影响，就可以直接使用这两个属性；如果无法忽略（比如弹出框需要最大化），那么应该用另外的办法。 2、标准方法：document.documentElement.clientWidth和document.documentElement.clientHeight，其实也可以用document.documentElement.offsetWidth和document.documentElement.offsetHeight。这两种方法的区别就是：前者不包含document.documentElement的边框；后者是包含的。然而我们一般是不会给document.documentElement设置边框的，所以这两种方法就是通用的了。 jQuery方法： 非常简单：$(window).width()和$(window).height()。 其次，浏览器整个文档的尺寸。 JS方法： 使用：document.documentElement.scrollWidth和document.documentElement.scrollHeight。我们也可以用document.body.scrollWidth和document.body.scrollHeight。这两者也是可以通用的，不过我们要知道区别：就是document.body.scrollWidth获取的body的宽度值，默认我们是不给body设置宽度的；如果是设值的话，那么document.body.scrollWidth获取的就是这个设置的值了。 jQuery方法： $(document).width()和$(document).height()或$(document.body).width()和$(document.body).height()。这里两种方法的区别等同于上面JS两者的区别。 另外附上jQuery获取滚动条相关值的方法： 滚动条到顶部的距离——$(document).scrollTop() 滚动条到左边的距离——$(document).scrollLeft()