0

XHTML标签的自关闭

Posted by admin on Apr 25, 2008 in web

虽然xml的标签只要无内容便可写成自关闭的现象，xhtml作为xml的子集，理论上也应该遵循这样的规范，我也一直是这样理解的。
但事实上这样是不对的，xhtml需要保持一定的向下兼容，实际上只支持少量原本在html中可以不封闭的标签，其它标签或者不可以，或者表面上可以。script标签不可以自关闭，div等标签静态时没问题，如果使用js对innerHTML outerHTML等属性来修改的话，就很可能发生嵌套的混乱现象。慎用。

Tags:

 
0

给视频加上广告

Posted by admin on Apr 23, 2008 in web

视频正成为互联网上越来越重要的元素，国外的YouTube，国内的土豆，优酷，6间房发展的都是红红火火。 如何给自己的网站上加上视频功能了，flowplayer提供了一个十分简便的方式，flowplayer的宣传口号就是做自己的Youtube。 flowplayer是一个flash播放器，支持播放flv,mp4,swf,jpg等格式，并且提供了比较多的播放界面选项。 如何给视频加上广告呢？比如在视频的开始和结束加上图片或者flash的广告，在视频的播放中加上一个半透明的flash等。 可以考虑的有两种方式。一种是通过网页上的内容重叠，即在视频播放器上面悬浮一个图层，控制图层的显隐来加入广告。第二种是利用flowplayer的播放列表功能。 先说第一种，要保证广告的位置，可以将播放器和作为广告的flash，和作为广告的图片，flash放入一个固定大小相对定位的div中。 因为广告的大小一般比视频播放界面要小，对广告文件采用绝对定位的方式，能够精准的控制位置。通过css滤镜可以实现flahs和图片文件的半透明效果。 控制时间的过程如下 单击播放按钮，调用begin()函数，其中隐藏播放按钮和视频截图，并开始显示视频引导广告，setTimeout定时3~5s后隐藏引导广告并播放视频， 视频播放开始将触发onPlay()事件。在事件句柄函数中播放半透明的伴随广告，伴随广告可以加上关闭按钮供用户选择关闭。 视频结束后触发onClipDone事件。在此事件句柄中，隐藏伴随广告并播放回音广告。回音广告结束后，显示重播按钮以及需要的图片，如视频推荐列表等。 这种方式需要注意一些地方，因为其中有多个图层，需要定义好z-index，避免链接的混乱。因为广告等独立于视频播放器，比较难于做更多的控制。 第二种方式是播放列表。 playList:[ {name: 'guild_ad', url:'/image/myself32.jpg',duration:3,overlay:'/image/redheart.jpg'}, {name: 'main_video', url: '/upload/forum_video/14/14934.flv'}, {name: 'echo_ad', url:'/flash/2465362_22_163006.jpg',linkUrl:'http://www.sohu.com',linkWindow:'_blank',duration:50}, ] 可以将引导广告，视频，以及回音广告做成一个列表。不过伴随广告，仍需要使用上面的层叠实现。这里需要利用好几个事件。 onClipChanged,onClipDone这两个事件对播放列表中的每个剪辑都会触发。onPlay只在播放列表开始时触发一次。单击播放或者重播按钮时调用showVideo函数。开始播放后隐藏一些静态画面， 剪辑切换时根据情况显示或者隐藏伴随广告，剪辑结束时如果是最后一个剪辑则显示最终画面

 
<script>
function showVideo() {
 $('#flow_player')[0].DoPlay();
}
function onPlay(clip) {  $("#flow_cover,#flow_button,#flow_list").hide(); } function onClipChanged(clip) {
  switch(clip.name){
   case 'main_video':
    $('#accompany_ad').show();
    break;
   case 'echo_ad':
    $('#accompany_ad').hide();
    break;
   default:
    break;
}
}
function onClipDone(clip) {
  if(clip.name=='echo_ad'){
   $("#accompany_ad").hide();
   $('#flow_list').show();
   }
 }
</script>

根据需要还可通过addCuePoint(time,name,params)方法定时加入标签，到达标签式触发onCuePoint(cuePoint)事件，这时做一些事情

Tags:

 
0

css 学习之二

Posted by admin on Apr 16, 2008 in Uncategorized

前段时间做了一个调整firefox下css的工作。总结了一些技巧。

  1. IE6的盒模型是与是否声明doctype有关的。声明了则为标准盒模型
    width = content+padding+border+margin

    .否则与IE5一致。

  2. li2> 尝试使用em声明字号时候发现，子级元素继承父级元素的大小，但是table默认是不继承外围字号的。如需要继承。可使用table{font-size:inherit;}。使用em时先定义body{font-size:63%},设为62.5%ie下字体会略小。
  3. firefox和opera支持max-width和min-width，用来限制布局的过分自由。
  4. 注意用多个class指定样式优先于单个class。 属性>!important>内联样式表>id>多个class>单个clas>标签
  5. 导入样式表
    @import url(sample.css)

    尽量不使用引号。

  6. 关于表格 合并边框
    border-collapse:collapse

    .
    需要固定宽度:

    table-layout:fixed
  7. 给一些标签加入title属性大大提高了可读性。
  8. link visited hover active 中间的两个不可交换顺序。
  9. 容器不扩展问题。子级元素浮动，需在后面加上清除浮动的div.clear
     .clear{font:0px/0px sans-serif;clear:both;display:block;}
  10. 高度不适应问题。内层对象设置margin和padding后外层对象的高度不重新计算。这时候也需要再上下各加入一个不占高度的div.empty。
    .empty{height:0px;overflow:hidden;}
  11. 自动折行 IE (1)
    word-break:break-all;

    (2)

    white-spacing:normal

    FF 还需要加入

    overflow:auto
  12. 表格固定宽度且不换行 (1)
     &lt;td width="25%"> &lt;div> content &lt;/div> &lt;/td>

    其中td宽度必须为百分比

  13. 半透明效果的实现
    IE：
    filter:alpha(opacity=50);

    firefox:

    -moz-opacity:0.5;
  14. z-index大的层，背景图片仍可能被z-index小的层遮盖

Tags:

 
0

Ajax学习

Posted by admin on May 12, 2007 in web

ajax流程

    主线程

  • 初始化
  • >创建xmlHttpRequest对象
  • >定义事件处理函数
  • >开始XMLHTTP请求
  • >创建新请求
  • >发送新请求
  • >…
    异步线程

  • 事件处理函数
  • >判断当前状态
  • >执行操作
  • >…
    步骤：

  1. 初始化xmlHttpRequest对象
  2. 制定响应处理函数
  3. 发出http请求
  4. 处理服务器返回的信息

创建xmlHttpRequest对象需要考虑浏览器的兼容问题。
ie：xmlHttp=new ActiveXObject(Microsoft.XMLHTTP)
ff:xmlHttp=new XMLHttpRequest()

有些版本的ff处理服务器返回的未包含XML mime-type头部信息的内容时会出错。加上http_request.overrideMimeType(‘text/xml’)

XMLHttpRequest的方法有open(method,url,AsyncFlag),send(content),setRequestHeader(“Lable”,value),getResponseHeader(headerLable),getAllResponseHeader()

XMLHttpRequest的属性有:onreadystatechange,readyState，responseText，responseXML，status等。
readyState=0,1,2,3,4,0 分别代表未初始化、读取中、 已读取、交互中、完成
status=200，404分别代表“成功”和“文件未找到”

post与get。如果要send字串或dom对象，必须用post方法，使用Post方法时必须先调用方法setRequestHeader，修改 MIME 类别。

Tags:

 
0

学习css

Posted by admin on May 12, 2007 in web
  1. float与clear

    2. float:leftrightnone；使对象浮动，到左边右边，直到它的外边缘碰到包含它的框的内边缘或另一个浮动框的边缘。

    clear:noneleftrightboth；清除左右两边的浮动对象，即通过降低自己的位置来保证满足左右两边没有浮动对象。

    这两个属性可以用来进行div布局。

  2. important
  3. margin,border&padding

    4. 四个数值按上右下左顺时针排列。

      width属性计算

    • IE:width=content+padding+border
    • Firefox:width=content

    margin融合

    两个框的margin碰到一起会合并成较大的那个框

  4. display
  5. position

    6. 相对定位
    相对定位是相对于对象自身的初始位置。元素本身即使移动到了别处也要占据原来没有变化时的初始位置。相对定位的元素并没有脱离原Html流

    绝对定位
    绝对定位的元素已经脱离了普通流，不受普通流的影响，元素会被放到一个新层上。绝对定位的元素的位置相对于“最近”的“已定位”的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于body。

Tags:

Copyright © 2012 苇叶舟 All rights reserved. Theme by Laptop Geek.