Chinaunix首页 | 论坛 | 博客
  • 博客访问: 186126
  • 博文数量: 89
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 828
  • 用 户 组: 普通用户
  • 注册时间: 2013-10-08 10:44
文章分类
文章存档

2014年(9)

2013年(80)

我的朋友

分类: Web开发

2013-10-11 20:18:43

web前端工程师有较好的编码习惯,能写出高效率的OOP(面向对象编程)代码,并对代码进行压缩上线以降低带宽消耗等。
 
公共网关接口CGI(Common GatewayInterface) 是WWW技术中最重要的技术之一,有着不可替代的重要地位。CGI是外部应用程序(CGI程序)与Web服务器之间的接口标准,在CGI程序和Web服务器之间传递信息的规程。CGI规范允许Web服务器执行外部程序,并将它们的输出发送给Web浏览器,CGI将Web的一组简单的静态超媒体文档变成一个完整的新的交互式媒体。
 
IE 与 FF 不兼容的原因 
(1) 文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定line-height。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍 1px 的差异。
【line-height:设置行间的距离(行高):p.small {line-height:90%}  p.big {line-height:200%}   normal  默认,设置合理的行间距; number 设置数字,此数字会与当前的字体尺寸相乘来设置间距;%比;inherit。 】
 
(2) ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。
还讨论内容撑破容器问题,横向上的。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie 下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。
 
(3) 浮动的清除,ff下不清除浮动是不行的。
 
ie 劣迹:
(1) double-margin:bug。ie6下给浮动容器定义margin-left 或者 margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。
【display:inline 它可以让行内显示为块的元素,变为行内显示:如
DIV1
 
DIV2

   这里DIV1 和 DIV2 分别占一行,但是你给他们加上属性后变了
   
DIV1

   
DIV2

   DIV1和DIV2这时候显示在同一行了。
  display:block,block 会让应用里该css属性的HTML标记变成块级别元素,例如SPAN是行内显示的,但是加了display:block属性就不一样了。
  SPAN1
  SPAN2
  比较经典的用法是用在
    下的
  • 中内联block一般一个块占一行,除非float inline是自动排为一行,就行段内的文字一样,可成为多行。
       display:inline比较经典的用法是用在
      下的
    • 中内联block 一般一个块占一行,除非float inline 是自动排为一行,就像段内的文字一样,可成为多行。
         display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以象span一样显示在一行了。
         display:inline 对应不显示为 display:none。
         display:block 对应不显示为 hidden。
         样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。
         】


      (2) img下的留白,



      把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写


      后面两个标签要紧挨着。ie下这个bug依然存在。解决方案:给img设定 display:block。
      (3)失去line-height:
      文字
      ,很遗憾,在ie6下单行文字line-height 效果消失了。。。,原因是这个inline-block元素和inline元素写在一起了。解决方案:让imag和文字都float起来。
       
      对web客户端技术未来趋势发展谈谈看法:
        javascript + ajax = RIA
        Adobe Flash AS3
        Flex
        Sliveright
       
      web 开发团队人员应该如何分工协作
        布局 CSS 脚本
        比如脚本人员长期的积累可能铸造类型YUI这样的产品级脚本库。
       
       web开发脚本开发环境用什么,调试用什么
        试过aptana,现在就用editplus
        调试肯定用firebug,ie下看页面DOM 用IEInspector
       
       如果有个新技术,现在需要掌握,你会怎么做
        新技术的发现我一般是通过RSS工具, GoogleReader
        每天有半小时左右在看最新的资讯,技术走向
        官网 Doc, samples
        如果要用到项目中,有困难的问题,我会SVN得到最新的这个技术的源码,深入跟踪进去,看实现原理。
        
      前端开发的优化问题:
      产品发布时,js的压缩,即函数名替换,整个文件压缩成一行。css 开发的时候 注释写清楚,先有个base.css,然后根据不同页面需要再加css,发布的时候将css中的一个定义写成一行,目的是压缩文件大小。
      最终发布的时候甚至可以将css,js分别压缩成一个文件,甚至css,js通过技巧压缩到一个里边(亮点)。
      这样的目的是,减少用户访问web产品的http连接数。
       
      web前端开发流程:
      首先根据产品的定位,用户群,确定配色,然后纸上设计整体布局,然后Png或者psd出效果图,切出需要的小图片,然后手写代码div+css构造出页面,然后根据功能写脚本。
       
      参考126邮箱首页,将所有小图片放到一个图片中。
      众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS来定位。 
      CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。 
      实现方法: 
      首先将小图片整合到一张大的图片上,为了简单化,可以把多图放在同一列上,这样就可以把x轴定义为0。 
      然后根据具体图标在大图上的位置,给背景定位。background-position:-8px -95px; 例子: 


      我们使用上图中的auther.gif作为背景时,如果代码如下: 
      最大化
      这两个class都使用同一个图片:
      .max { width:16px; height:16px; 
      background-image:url(/images/css-sprites.gif);
      background-repeat: no-repeat; //我们并不想让它平铺 
      text-indent:-999em; //隐藏文本的一种方法 } 
      效果都只能得到上图中的tag_icon.gif中的图为背景,根本无法得到我们需要的背景。因为我们还没有指定background-position,默认为 0 0,可以看下上图,刚好是tag_icon.gif图。好了,我们要找到代表auther.gif的图在大图中的位置找出来。经过测量,按钮位于Y轴的350px处,按钮位于x轴50px处。想一想我们如何才能让它们能够显示出来呢?明显得到代码如下:
      .max { 
      background-position: 50 -350px; } 
      耶,我们成功了: 
      (注意:为了举例的方便,本例子直接在HTML内置样式,切勿在实践中的非特殊情况使用这种方式)。 优点 
      我们从前面了解到,CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。 缺点  
      至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。 由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。 前面我们也提到了,必须限制盒子的大小才能使用CSS Sprites,否则可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS 
      Sprites并不合适。YUI的解决方式是,加大图片之间的距离,这样可以保持有限度的缩放。 总结 
      性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR,比如固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。  
      prototype.js实现的基本原理
      将功能封装
      比如Ajax.Request,还是有判断浏览器的代码;Position 这样的实现页面元素的计算
       
      Prototype 太大,如果一个页面功能不需要这样的,自己实现,怎么做?
      首先页面,css脚本分离之后,脚本中将整个模块功能写成一个类 var Do={}
      其中初始化函数init:function(){},然后最后做Do.init()
      其中init会对页面上form中需要交互的元素绑定事件,比如$('input1').onclick=function(){}
       
      IE FF 脚本的区别(续):
       
       
       
      Ajax里边FF是new XMLHttpRequest,而IE是 
      try new ActiveXObject(’Msxml2.XMLHTTP’)  try new ActiveXObject(’Microsoft.XMLHTTP’)
       
      常用HTML标签代码
         ◆1.文字设置代码:
      文字设置代码
        ◆2.大号文字设置代码:
      文字设置代码
        ◆3.文字的边外加光辉效果代码:
      如画江山

        ◆4.文字重叠效果代码:
      社会主义好!

        ◆5.文字竖排代码:

      更喜岷山千里雪,
      三军过后尽开颜。
      .....


        ◆6.一条横线代码:


        ◆7.贴图代码1:

        ◆8.贴图代码2:

        ◆9.羽化图片代码:

        ◆10.超连接代码:
      说明文字
        ◆11.从左向右移动的代码:
      文字或图片从左向右移动
        ◆12.从右向左移动的代码:
      文字或图片从右向左移动
        ◆13.从下向上移动的代码:
      文字或图片从下向上移动
        ◆14.从上向下移动的代码:
      文字或图片从下向上移动
        ◆15.左右来回走移动的代码:
      文字或图片左右来回走移动
        ◆16.相对定位代码:


        ◆17.绝对定位代码:


        ◆18.相对定位与绝对定位加叠图片代码:




        ◆19.各种常用标签语句:

       过行单标签.  

      过段标签. 
      文字依原始样式显示标签
       
       一个空格.  
    • 文字行首加一个圆点.
    • 圆点标签.
        ◆20.定位标签代码:
      内容居中

      内容居中

      内容居中


      内容居左


      内容居右


        水平加竖直定位指令语句(放在表格的列标签内):
      居左靠顶
      居中靠顶
      居右靠顶
      居左靠底
      居中靠底
      居右靠底
        ◆21.银色播放器代码:

       
      display属性值:
      none 此元素不会被显示。 
      block 此元素将显示为块级元素,此元素前后会带有换行符。 
      inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 
      inline-block 行内块元素。(CSS2.1 新增的值) 
      list-item 此元素会作为列表显示。 
      run-in 此元素会根据上下文作为块级元素或内联元素显示。 
      compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 
      marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 
      table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。 
      inline-table 此元素会作为内联表格来显示(类似
      ),表格前后没有换行符。 
      table-row-group 此元素会作为一个或多个行的分组来显示(类似 )。 
      table-header-group 此元素会作为一个或多个行的分组来显示(类似 )。 
      table-footer-group 此元素会作为一个或多个行的分组来显示(类似 )。 
      table-row 此元素会作为一个表格行显示(类似 )。 
      table-column-group 此元素会作为一个或多个列的分组来显示(类似 )。 
      table-column  此元素会作为一个单元格列显示(类似 ) 
      table-cell 此元素会作为一个表格单元格显示(类似
      ) 
      table-caption 此元素会作为一个表格标题显示(类似
      ) 
      inherit 规定应该从父元素继承 display 属性的值。     
      阅读(346) | 评论(0) | 转发(0) |
      给主人留下些什么吧!~~