#wrapper{#position:relative;}花括号内#号是ie hack的方法，也就是上面几句对ff完全不起作用。
#mid{#overflow:visible;#position:absolute;#top:50%;}
#content{#position:relative;#top:-50%;}
<div id="wrapper">
<div id="mid">
<div id="content">居中内容</div>
</div>
</div>
<center><div id="playmp3"><a href="javascript:void(0)" onclick="insert('playmp3','mp3player')">
听听音乐？H3M by 陈奕迅</a></div></center>
<!-- 隐藏部分 -->
<div style="display:none"><div id="closemp3"><a href="javascript:void(0)" onclick="insert('playmp3','mp3player')">
听听音乐？H3M by 陈奕迅</a></div><div id="mp3player"><li><div>(嵌入你的widget代码或flash什么的)</div></li><li><div><a href="javascript:void(0)" onclick="insert('playmp3','closemp3')">close</a></div></li></div></div>
<script>
function insert(a1,b1){
var a=a1;
var b=b1;
document.getElementById(a).innerHTML = document.getElementById(b).innerHTML;
}
</script>
#navbar-iframe {不知道为什么这两个方法会在网上流传为合2为1的方法，HATA用其中一个已经可以见效了。可能是为了保险吧。。。出来的页面效果一样，navbar完完全全不见了，整体博客拉上30px。
height: 0px;visibility:hidden;//方法1
display:none;//方法2
}
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}通过控制alpha值，达到自动隐藏的效果，在firefox下把鼠标移动上去，narbar就会回来了。这个方法其实很好，就是那个30px的位置就浪费掉了。怀旧了这么久，终于要介绍HATA的方法了～ (/^0^)/
#navbar-iframe:hover{opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100)}
#navbar{position:absolute;width:800px;}这个要解析一下，其实是上面方法的基础上加上3条语句，修正宽度是因为我在使用position:absolute;后navbar的宽度变短了而进行修正的；而修饰轮廓就是加上右边框而已，因为HATA用的navbar样式是黑色的那个，所以边框颜色是#000000，根据情况修改；最后一句，是只对ie使用，因为在ie上隐藏后鼠标移置该处无法再次显示，干脆就把它除掉。
//把navbar拉出来，然后修正宽度
#navbar-iframe{
opacity:0.0;filter:alpha(Opacity=0);
border-right-color:#000000; border-right-width:2px; border-right-style:solid;
//修饰轮廓
}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100);}
* html #navbar-iframe {display:none;}
//ie7以上把navbar除掉，blog主用ff的话加上
今天HATA发布一个1.66kb的轻量级js，tooltip，打包后大约1.2kb，有渐变效果（fadein，fadeout）#tiptool1cont{display:block; padding:2px 7px; background:#666; color:#FFF;}
#tiptool1{position:absolute; display:block; margin-left:5px; border-width:1px;border-style:dashed;border-color:#666;}
<span onmouseout="tooltip.hide();" onmouseover="tooltip.show('低头思故乡');">举头望明月</span>
ai~扯远了，HATA在写模板之际，HATA顺便把那个一列式标签也改掉了，改成两列式，哈哈。.sidebar #Label1 li {
float:left;
width:95px;
}
google.language.translate(text,"es","en",function(result){
if(!result.error){
translation.innerHTML=result.tarnslated;
}
});
<div id="trans">loading</div>直接拉到widget里就可以用了这是简体->繁体的，繁体->简体的是：
<script>
var temp1='<a href="http://babelfish.yahoo.com/translate_url?doit=done&tt=url&intl=1&fr=bf-home&trurl=';
var temp2='&lp=zh_zt&btnTrUrl=Translate">繁体中文</a>';
var temp=temp1+window.location.href+temp2;
document.getElementById("trans").innerHTML=temp;
</script>
<div id="trans">loading</div>
<script>
var temp1='<a href="http://babelfish.yahoo.com/translate_url?doit=done&tt=url&intl=1&fr=bf-home&trurl=';
var temp2='&lp=zt_zh&btnTrUrl=Translate">简体中文</a>';
var temp=temp1+window.location.href+temp2;
document.getElementById("trans").innerHTML=temp;
</script>
<div id="header-wrapper">并修改为：
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>
<div id="header-wrapper">HATA现在要继续在上面做修改。
<b:section class="header" id="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>
<div id="header-wrapper">现在HATA要再次修改这段代码增加一些内容：
<b:section class="header" id="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>
<div id='header-wrapper'>看清楚大小写哦，这样就在header里面多加了两个section，然后还要在css区上添加一些代码才能正常显示，因为这3个section是同一列的关系，别急着保存，我们先下拉一下模板，看一看下一段是不是<div id='content-wrapper'>,要是不是content-wrapper的话，就把它的id名字记下来，一会要用上。现在可以保存了。
<div class='header' id='header'>
<b:section id='header1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='博客名称' type='Header'/>
</b:section>
<b:section id='header2' showaddelement='yes'/>
<b:section id='header3' showaddelement='yes'/>
</div>
</div>
是的话就可以继续下一步。#header1 {width:220;float:left;}/* ---HATA之前没有加上宽度width，ie的排版立刻乱了，ff确没有乱，可见ff是多么的优秀>. <，这里网要感谢一下NS兄的帮助--- */记得HATA在步骤中叫你记下的id吗？就是用在消除浮动上面。把你记下的id替换掉content-wrapper字样吧。不使用消除浮动，浏览器的位置排版就会出错。HATA现在基本上是完成任务了。HATA现在挂个插件上去看看效果：
#header2 {width:220;float:left;}
#header3 {float:right;}/* ---以上3句就是把步骤2里的3个session变成横向关系的关键语句--- */
#content-wrapper {clear:both;}/* ---这个是消除浮动--- */
#header {height:60px;} /* ---70px是我标题栏背景的高度，不加这一句的话在某些浏览器里会排版出错（忘记是ie还是ff了）--- */
<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>
<ul id="headnav">
<li><a href="链接地址1" target="blank">名称1</a></li>
<li><a href="链接地址2" target="blank">名称2</a></li>
</ul>
/* ---添加--- */
#headnav {margin:0px; padding:0px;}/* ---margin是修正高度位置--- */
#headnav img {border:0;}
#headnav li {display:inline;/* ---这个是把竖式变横式的关键--- */
margin-right:5px;/* ---这个是间距--- */
}
/* ---添加--- */
2，制作完成后点击左方或者下方的储存键，就会出现你制作的FunPix的网页位置URL，和该FunPix放在你的blog上的程序代码Embed（如果你没有登录进slide的话，中间会出现一个注册界面，要是你不想注册的话，可以skip signup略过，但不知道skip signup 后的作品是暂存还是永久保存）；<div><embed src="http://widget-6d.slide.com/widgets/themepic.swf" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="cy=lt&il=1&channel=3386706919790681453&site=widget-6d.slide.com" style="width:600px;height:475px" name="flashticker" align="middle"></embed><div style="width:600px;text-align:left;"><a href="http://www.slide.com/pivot?cy=lt&at=un&id=3386706919790681453&map=A" target="_blank"><img src="http://widget-6d.slide.com/z1/3386706919790681453/lt_t016_v000_s0un_f00/images/xslide1.gif" border="0" ismap="ismap" /></a> <a href="http://www.slide.com/pivot?cy=lt&at=un&id=3386706919790681453&map=B" target="_blank"><img src="http://widget-6d.slide.com/z2/3386706919790681453/lt_t016_v000_s0un_f00/images/xslide4.gif" border="0" ismap="ismap" /></a> <a href="http://www.slide.com/pivot?cy=lt&at=un&id=3386706919790681453&map=G" target="_blank"><img src="http://widget-6d.slide.com/z4/3386706919790681453/lt_t016_v000_s0un_f00/images/xslide42.gif" border="0" ismap="ismap" /></a></div></div>会多出三个按钮
<div><embed src="http://widget-6d.slide.com/widgets/themepic.swf" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="cy=lt&il=1&channel=3386706919790681453&site=widget-6d.slide.com" style="width: 600px; height: 475px;" name="flashticker" align="middle"></embed><div style="width: 600px; text-align: left;"> <a href="http://www.slide.com/pivot?cy=lt&at=un&id=3386706919790681453&map=G" target="_blank"><img src="http://widget-6d.slide.com/z4/3386706919790681453/lt_t016_v000_s0un_f00/images/xslide42.gif" ismap="ismap" border="0" /></a></div></div>
AV 端子即是复合视频端子，复合视频端子名称的来源因为其通过单线同时传输色度和亮度 两种信号。AV端子是最简单的音、画分离的传输方式，分一条video线和左右两条音频线传输（L,R），这也是我 们以前各种游戏机和影碟机所采用的最低传输方式了，PS2等游戏机标配也能用这种AV端子，不过远不能表现出其画面效果。
S 端子全称是Separate Video（或称为 SUPER VIDEO），由日本人开发。可以说是AV端子的改革，把色度和亮度进行了分离式的输出，由两路视亮度信号、两路视频色度信 号和一路公共屏蔽地线组成，避免了设备内部信号的干扰。 但S-Video仍是把两路色差信号(Cr Cb)混合为一路色度信号（C）进行传输，所以一条S端子线上有4个金属接触口，然后再通过显示设备的解码进行播放，仍然有一定的画质损失。相对于AV端子， S端子的效果得到了一定的提升。-----------------------------------------------------------------------------------------------------------色差端子
现在常用的端子之一。色差视频端子的英文名也来源于其传输原理，这3组信号分别是：亮度(以Y标注)，以及从三原色信号中的两种，蓝色和红色。去掉亮度信号后的色彩差异信号(标注为Pb和Pr)，在三条线的接头处分别用绿、蓝、红色进行区别。这三条线如果相互之间插错了，可能会显示不出画面，或者显示出奇怪的色彩来。色差端子是模拟信号中最高级的传输方式之一，其效果也是最好的，相比于S端子，其色彩鲜艳明亮，画面锐度很高。不过在普通电视上进行游戏，与S端子的效果差异较小，而在高档电视和播放一些影片时，提升较为明显。
DVI 端子全称为“Digital Visual Interface”，是1999年“Intel开发者论坛”上成立的“数字显示工作小组”（Digital Display Working Group简称DDWG ，参与公司有Silicon Image、Intel、Compaq、IBM、HP、NEC、Fujitsu等）所制定的数字显示界面标准。 DVI的优秀之处，在于其信号的传输完全采用了数字格式，保证了视频源到显示终端的传输过程中资料的完整性，可以得到更快捷的传输速度以及更清晰的影像。所以，具备DVI接口的显示终端都是数字显示终端，如液晶显示器、等离子电视、液晶电视等。 DVI 接口有三种，分别是DVI-Digital（DVI-D）、DVI-Analog（DVI-A）和DVI-Integrated （DVI-I）。其不同之处在于DVI-D只支持数字显示的设备；而DVI-A类似于VGA接口，采用模拟信号传输；而 DVI-I则是同时支持数字显示跟模拟显示，并且可以兼容使用DVI-D的设备。DVI-D和DVI-I还可以各分为Single Link和Dual Link两种。-----------------------------------------------------------------------------------------------------------
上文提到了数字显示的先行者DVI，但是DVI有着接口面积过大、不能传输音频等缺点，所以DVI的下一代升级产品HDMI就诞生了。它是在2002年底， 由日立、松下、飞利浦、Silicon Image、索尼、汤姆逊、东芝7家公司成立的HDMI论坛颁布。 HDMI 全称为“Hi-Definition Multimedia Interface”，其最高传输速度虽然小于DVI（DVI可达8Gbps，HDMI为5Gbps，最高画质的HDTV信号传输需要2Gbps），但还 支持八声道96kHz或单声道的192kHz的数码音频传输（支持Dolby Digital/DTS格式），无需单独使用音频连接线。同时其连接线的长度也可以达到20多米（DVI线在8米以上就会影像画质）。HDMI接口为19 针，在针脚上和DVI兼容，只是采用了不同的封装，可以通过转换器兼容DVI接口。 PS3是首款搭载1.3标准的视频输出器材。
