标签归档:web前端开发

Web前端开发面临的挑战主要有哪些?【整理版】

曹刘阳,盛大的web工程师 1) css和dom提供的接口都太low level了,而BOM提供的控件只有input、select、textarea这几种最基本的,稍复杂一点的UI效果,都要前端自己利用css和dom去组合创造。看到一个需求,脑子里第一步要想如何利用css、dom这些基本的零件组合成最终的这个效果,实现最终效果其实是一个“创造”的过程,比如说tabView,treeView,richEditor,colorPicker这种看起来常见的组件,其实在前端里都是没有现成可用的,需要自己去实现。 2) 前端语言的胶水性需求太强。css、dom、js是三种不同的技术,这也是前端知识系统中要掌握的最重要的三个基本功。server端编程当然也会需要不同方向的知识,比如php、sql等,但server端编程大部分时间只用专注在某一个知识点上,只要必要时粘一下其它语言。但前端不同,前端的效果是通过css、dom和js三者配合起来最终呈现出来的,脱了任何一个技术都寸步难行,时刻要同时考虑多个方向的知识点。这么说吧,server端编......查看更多>>

发表在 前端开发 | 标签为 , , | 一条评论

河南目标互动传媒有限公司招聘Web前端开发工程师

具体要求: 岗位职责: 1.明确了解产品中心提出的需求内容和产品定位,并在此基础上依照产品整体UI效果及网页制作规范协同团队成员进行网页制作。 2.与交互、视觉和后台开发工程师密切配合,完成web前端开发工作; 3.积累并完善web产品的前端开发框架; 4.跟踪研究w3c标准和最新前端技术,参与部门前端框架和技术规范的开发制定。 任职要求: 1.熟悉HTML/XHTML、DOM、BOM、CSS、XML、JAVASCRIPT、ACTIONSCRIPT等web前端技术;各类标签属性并结合Div+CSS布局独立完成静态页制作,并达到跨浏览器兼容的要求; 2.可使用Photoshop软件进行简单的图片处理; 3.具有良好的团队协作精神和强烈的工作责任心; 4.有大型网站前端开发经验优先考虑; 5.理论基础扎实,熟悉web应用开发流程,熟悉一种服务器端开发语言,如java、c#等。 此岗位为河南目标互动传媒旗下目标互动科技有限公司的招聘,求职者可以在网上直接投递或QQ联系:1215360621,欢迎您前来面试! 薪资待遇......查看更多>>

发表在 前端开发招聘 | 标签为 , , , , , | 留下评论

jQuery带缩略图左右滚动效果

这个效果比较常用,在很多商品展示页面会用到,例如淘宝店铺的图片展示和京东商城的商品展示页,其实这段代码很简单,直接看下效果好了!   演示地址:http://www.wufangbo.com/demo/jquery/12/index.html 下载地址:http://www.wufangbo.com/demo/jquery/12/12.rar HTML代码   <div class="pic_scroll">         <div class="pic_small">          <a href="#0"><img class="current" src="images/01.jpg" /></a>              <a href="#1"><img src="images/02.jpg" /></a>              <a href="#2"><img src="images/03.jpg" /></a>    &n......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , | 留下评论

jquery图片横向左右滚动效果(带按钮控制)

这个效果实例是我在去年买的一本书里面读到的,想必大家也知道那本书,就不提名字了,直接上下源代码 代码里面的注释很清楚,方便大家学习。 演示地址:http://www.wufangbo.com/demo/jquery/11/index.html 下载地址:http://www.wufangbo.com/demo/jquery/11/11.rar html代码   <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一页</span> <span class="next">下一页</span> </div> <em><a href......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 2 条评论

Jquery图片无缝左右滚动插件

  zhw.scroll-1.0.js /* 功能:Jquery无缝滚动插件zhw.scroll-1.0.js 作者:leo 注意:暂只支持div下ul li的滚动 交流:xandchd_kane@163.com */ jQuery.extend({     Scroll: function(settings) {         //初始化参数         var config = $.extend({             stepWidth: 100,         // 滚动步长             waitTime: 4000,         // 间歇时间           &......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

jQuery图片左右滚动和jquery图片左右连续滚动

  公司网站要用到jQuery横向滚动图片特效,当时我为了速度,直接找了一段jQuery代码放上去了。缺点有两个:一、主管不满意,他需要的是连续不断的滚动,就是无缝滚动,而不是滚动一张图片,等一下再滚动一张图片;二、代码有个地方浏览器报错,我不知道为什么,但是删了也不行,必须要。 花了好长一段时间,找代码、改代码,终于搞定了上面提到的两个效果:滚动停一下、无缝滚动。感谢群里点拨我的朋友,感谢Google提供信息,感谢网上不知名的朋友提供代码。 jQuery滚动图片(非连续滚动) 演示地址:http://www.wufangbo.com/demo/jquery/06/index.html 下载地址:http://www.wufangbo.com/demo/jquery/06/06.rar 这段代码思路很简单,把ul里的li都浮动左,变成一横排。然后ul往左边animate移动一个图片的宽度,把第一张图片追加到最后。用setInterval实现不断调用这个方法即可。最后加上鼠标移上去停止调用方法,移开继续调用方法就OK了。 代码我就补......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 4 条评论

豆瓣网前端开发规范之-javascript开发规范

  1. Javascript代码应符合Douban-JSLint检验标准   1-1. 语句必须都有分号结尾,除了for, function, if, switch, try, while   1-2. 只有长语句可以考虑断行,如:                                   TEMPL_SONGLIST.replace('{TABLE}', da['results'])                                                .replace('{PREV_NUM}', prev)                                                .replace('{NEXT_NUM}', next)          ......查看更多>>

发表在 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , , | 2 条评论

豆瓣网前端开发规范之-css开发规范

  1. CSS浏览器支持标准   WinXP Win7 OS X IE9 C C   IE8 A A   IE7 A A   IE6 A A   Chrome7 C C C Chrome6 A A A Chrome3 B B B Firefox4 C C C Firefox3.6 A A A Firefox3.5 C C   Firefox3 C C   Safari B B B Opera C C C (注:根据2010年11月10日数据整理) A级-交互和视觉完全符全设计的要求 B级-视觉上允许有所差异,不破坏页面整体效果 C级-可忽视视觉上的问题,但不防碍使用 2. 尽可能的通过继承和层叠重用已有样式 3. 根据新建样式的适用范围分为三级:全站级、产品级、页面级 3-1. 目前全站级的CSS文件仅有core.css和douban.css(向全站级CSS文件中添加规则参见4和5)。 3-2. 产品级CSS是指作用于某一垂直产品(如音乐、读书、电台等),文件放在css/下相应目录下。 页面级指仅在一个或少量几个页面中用到。如果仅在一个页面中用到的采用内联方式嵌入于页面hea......查看更多>>

发表在 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

Web前端开发规范一例

  规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加 功能时查找对应页面; 3. css文件命名: 英文命名, 后缀.css. 共用bas......查看更多>>

发表在 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 一条评论

国外15个前端开发CSS框架介绍

    框架就是一个你可以用于你的网站项目的基本的概念上的结构体。 css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如: typography.css 基本排版规则 grid.css 基于网格的布局 layout.css 通常的布局 form.css for 表单样式 general.css 更多通用规则   下面一起来了解一下各种不同的CSS框架吧: 1.960 Grid System  960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。 2.WYMstyle CSS Framework  这个项目的目的是提供一组经过良好测试的模块化的CSS文件,能够用于网站的快速设计。WYMstyle是一组CSS文件,你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块,WYMstyle 力求让每个网站......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , | 留下评论

27款经典的前端开发CSS框架

  利用 CSS 框架,可以简化你的工作,提高工作效率。CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架,你可以选用。  1. 960gs  960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程,使工作简单高效。 2. YUI 2: Grids CSS  芒果曾经介绍过由雅虎开发小组推出的 YUI,而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一,YUI Grids CSS 提供了四种预设页面宽度,六种预设模板。其中的负 Margin 技术,使用度量单位 em,清除布局浮动等技术非常值得学习和借鉴。  3. Blueprint  Blueprint 是一款成熟的 CSS 框架,它将布局 (layout)、排版 (typography)、组件 (widget)、重置 (reset)、打......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , , , , , , , , | 留下评论

使用CSS框架的优点和缺点

CSS框架是一个软件,它为你的HTML开发提供了许多选项以供使用,可能使得你开发网站或web程序更快速更简单。CSS框架通过包括预定义代码库来达到这个目的。一个例子是基于网格的框架,它建立了一个预定义宽度的多列布局所以你可以专注于创建内容而不是排列文本块。 但是使用CSS框架好不好呢?最终来说有时候有的东西节约你的时间的代价是引发了更多地问题,导致节约的时间没有意义了。好吧,就像我们生活中的任何东西一样,使用CSS框架既有优点也有缺点。   现在有很多CSS框架,可以做好不同的事情,所以你可以找到特定的一款以帮助你更快地完成你的web开发目标。可以参考以下资源: 15 lightweight and minimal CSS frameworks 20 new frameworks for web and mobile app developers 但是你应该在你的web开发中使用这些CSS框架吗?以下是使用CSS框架的优点和缺点: 使用CSS框架的优点 1、加速你的开发 CSS框架帮你做好了基础工作因此你可以更快地......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , , , , , , | 留下评论

(X)HTML Strict 下的嵌套规则

  下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则,比如你不能在 <a> 里面再嵌入一个 <a> 这样的约定。 说明: 为了方便读者阅读,本文中的标签使用了大写(根据 XHTML 的规则,元素名必须小写,比如 <html> 而不应是 <HTML>) 小写的单词表明一组或一系列 HTML 标签 每一项条目(标签)后都跟随一组标签列表,如果没有这个列表,那么表明该条目(标签)内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容(#PCDATA,见下文)。如果注明 (empty),这意味着该条目内部不允许包含任何形式的内容。对于 flow,inline,block,OBJECT 和 BODY,其内部允许包含的内容在文中会单独给出。 #PCDATA 的意思是“parsed character data”,即纯文本内容(不包括任何 HTML 标签,但是转义内容可以存在,比如 &auml;和 &#228......查看更多>>

发表在 xhtml, 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , | 留下评论

网页设计规范

  一、为什么要写设计规范?设计规范是为谁服务的? 谈这个话题之前,我们先了解一下什么是设计规范?设计规范是指对设计的具体技术要求,是设计工作的规则. 一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述,以及限制条件的技术描述等. 那我们为什么要用设计规范?第一,可以让我们清楚项目的规则,以减少犯错误的机率;第二,加强团队之间的合作,责任明确,提高工作效率.第三,锻炼我们整体全面的思维能力.  规范最终是为项目服务的.我们所做的一切都是为了优化项目,提高我们的工作效率.但是,设计规范也是一种设计团队文化.最终受益的不止是项目,还有我们自己.当我们形成这种文化,我们会配合的更默契;我们不需要在工程师加班的时候,一定留守在那里陪着;我们不需要在调别人设计的源文件时,一遍一遍的询问.当你不再因为别人的事情而加班的时候,心情是否好一些呢? 设计规范渗透在整个软件工程里.不同的工程模型......查看更多>>

发表在 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , | 留下评论

JQuery网页换肤

  现在介绍网页换肤的例子已经数不胜数,自己也没有仔细研究过,刚搞遇到类似这个问题,网上查了资料解决了问题,感觉很有用,就记录了下来和大家分享一下。效果很简单,我就直接讲怎么使用的。 其中用到了jquery.cookie.js 首先是html代码: XML/HTML代码 <div id="header_demo">       <a id="logo" href="#">Rainweb</a>           <ul id="skin">               <li id="skin_0" title="蓝色" class="selected">蓝色</li>               <li id=&quo......查看更多>>

发表在 jquery | 标签为 , , , , , , , , , | 留下评论
第 1 页,共 2 页12