<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="JQ/jquery1.42.min.js"></script>
<script src="JQ/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
<a href="javascript:zh_tran('s')" class="zh_click" id="zh_click_s">简体中文</a> | <a href="javascript:zh_tran('t')" class="zh_click" id="zh_click_t">繁体中文</a>
<p>秋风缠，落花残，庭前路人几声叹。夜挑灯，纱窗舞，空笑丹唇离人扰。红尘客，何人箫声惊归鸟。月上枝，醉几分，行者路难，静者心安，研墨丹青鬓白处。年少狂，孤杯蘸，戎马一生终化三寸土。--缘风</p>
<p>浓墨入水，浸一池青花 。顿足庭下，拾一片落花，染指正茂风华。浅秋归至，斜阳映栖霞，满山落枫如画。风之悠悠，撩罗裙轻纱。谁人篱下，空弹琵琶，埋一世情话。倦鸟归巢，三生羽化，悟满相思入榻。浅溪潺潺，莹草离离，故人凄凄，晚风过青袍起。三十里江南，游人自泣。</p>
<p>青鸟飞，歌声微，飞入人家几时回？风烟处，谁独舞，茜纱霓裳扫露珠。一眼山水，一梦江湖，三千繁华终落尘土，来时空空去时无。</p>
<script>
// -------------- 以下参数大部分可以更改 --------------------
//s = simplified 简体中文 t = traditional 繁体中文 n = normal 正常显示
var zh_default = 'n' //默认语言，请不要改变
var zh_choose = 't' //当前选择
var zh_expires = 7 //cookie过期天数
var zh_class = 'zh_click' //链接的class名，id为class + s/t/n 之一
var zh_style_active = 'font-weight:bold color:red' //当前选择的链接式样
var zh_style_inactive = '' //非当前选择的链接式样
var zh_browserLang = '' //浏览器语言
var zh_autoLang_t = true //浏览器语言为繁体时自动进行操作
var zh_autoLang_s = false //浏览器语言为简体时自动进行操作
var zh_autoLang_alert = false //自动操作后是否显示提示消息
//自动操作后的提示消息
var zh_autoLang_msg = '欢迎来到本站,本站为方便台湾香港的用户\n1.采用UTF-8国际编码,用任何语言发帖都不用转码.\n2.自动判断繁体用户,显示繁体网页\n3.在网页最上方有语言选择,如果浏览有问题时可以切换\n4.本消息在cookie有效期内只显示一次'
var zh_autoLang_checked = 0 //次检测浏览器次数,第一次写cookie为1,提示后为2,今后将不再提示
//判断浏览器语言的正则,ie为小写,ff为大写
var zh_langReg_t = /^zh-tw|zh-hk$/i
var zh_langReg_s = /^zh-cn$/i
//简体繁体对照字表,可以自行替换
var zh_s = '皑蔼碍爱翱袄奥坝罢摆败颁办绊帮绑镑谤剥饱宝报鲍辈贝钡狈备惫绷笔毕毙闭边编贬变辩辫鳖瘪濒滨宾摈饼拨钵铂驳卜补参蚕残惭惨灿苍舱仓沧厕侧册测层诧搀掺蝉馋谗缠铲产阐颤场尝长偿肠厂畅钞车彻尘陈衬撑称惩诚骋痴迟驰耻齿炽冲虫宠畴踌筹绸丑橱厨锄雏础储触处传疮闯创锤纯绰辞词赐聪葱囱从丛凑窜错达带贷担单郸掸胆惮诞弹当挡党荡档捣岛祷导盗灯邓敌涤递缔点垫电淀钓调迭谍叠钉顶锭订东动栋冻斗犊独读赌镀锻断缎兑队对吨顿钝夺鹅额讹恶饿儿尔饵贰发罚阀珐矾钒烦范贩饭访纺飞废费纷坟奋愤粪丰枫锋风疯冯缝讽凤肤辐抚辅赋复负讣妇缚该钙盖干赶秆赣冈刚钢纲岗皋镐搁鸽阁铬个给龚宫巩贡钩沟构购够蛊顾剐关观馆惯贯广规硅归龟闺轨诡柜贵刽辊滚锅国过骇韩汉阂鹤贺横轰鸿红后壶护沪户哗华画划话怀坏欢环还缓换唤痪焕涣黄谎挥辉毁贿秽会烩汇讳诲绘荤浑伙获货祸击机积饥讥鸡绩缉极辑级挤几蓟剂济计记际继纪夹荚颊贾钾价驾歼监坚笺间艰缄茧检碱硷拣捡简俭减荐槛鉴践贱见键舰剑饯渐溅涧浆蒋桨奖讲酱胶浇骄娇搅铰矫侥脚饺缴绞轿较秸阶节茎惊经颈静镜径痉竞净纠厩旧驹举据锯惧剧鹃绢杰洁结诫届紧锦仅谨进晋烬尽劲荆觉决诀绝钧军骏开凯颗壳课垦恳抠库裤夸块侩宽矿旷况亏岿窥馈溃扩阔蜡腊莱来赖蓝栏拦篮阑兰澜谰揽览懒缆烂滥捞劳涝乐镭垒类泪篱离里鲤礼丽厉励砾历沥隶俩联莲连镰怜涟帘敛脸链恋炼练粮凉两辆谅疗辽镣猎临邻鳞凛赁龄铃凌灵岭领馏刘龙聋咙笼垄拢陇楼娄搂篓芦卢颅庐炉掳卤虏鲁赂禄录陆驴吕铝侣屡缕虑滤绿峦挛孪滦乱抡轮伦仑沦纶论萝罗逻锣箩骡骆络妈玛码蚂马骂吗买麦卖迈脉瞒馒蛮满谩猫锚铆贸么霉没镁门闷们锰梦谜弥觅绵缅庙灭悯闽鸣铭谬谋亩钠纳难挠脑恼闹馁腻撵捻酿鸟聂啮镊镍柠狞宁拧泞钮纽脓浓农疟诺欧鸥殴呕沤盘庞国爱赔喷鹏骗飘频贫苹凭评泼颇扑铺朴谱脐齐骑岂启气弃讫牵扦钎铅迁签谦钱钳潜浅谴堑枪呛墙蔷强抢锹桥乔侨翘窍窃钦亲轻氢倾顷请庆琼穷趋区躯驱龋颧权劝却鹊让饶扰绕热韧认纫荣绒软锐闰润洒萨鳃赛伞丧骚扫涩杀纱筛晒闪陕赡缮伤赏烧绍赊摄慑设绅审婶肾渗声绳胜圣师狮湿诗尸时蚀实识驶势释饰视试寿兽枢输书赎属术树竖数帅双谁税顺说硕烁丝饲耸怂颂讼诵擞苏诉肃虽绥岁孙损笋缩琐锁獭挞抬摊贪瘫滩坛谭谈叹汤烫涛绦腾誊锑题体屉条贴铁厅听烃铜统头图涂团颓蜕脱鸵驮驼椭洼袜弯湾顽万网韦违围为潍维苇伟伪纬谓卫温闻纹稳问瓮挝蜗涡窝呜钨乌诬无芜吴坞雾务误锡牺袭习铣戏细虾辖峡侠狭厦锨鲜纤咸贤衔闲显险现献县馅羡宪线厢镶乡详响项萧销晓啸蝎协挟携胁谐写泻谢锌衅兴汹锈绣虚嘘须许绪续轩悬选癣绚学勋询寻驯训讯逊压鸦鸭哑亚讶阉烟盐严颜阎艳厌砚彦谚验鸯杨扬疡阳痒养样瑶摇尧遥窑谣药爷页业叶医铱颐遗仪彝蚁艺亿忆义诣议谊译异绎荫阴银饮樱婴鹰应缨莹萤营荧蝇颖哟拥佣痈踊咏涌优忧邮铀犹游诱舆鱼渔娱与屿语吁御狱誉预驭鸳渊辕园员圆缘远愿约跃钥岳粤悦阅云郧匀陨运蕴酝晕韵杂灾载攒暂赞赃脏凿枣灶责择则泽贼赠扎札轧铡闸诈斋债毡盏斩辗崭栈战绽张涨帐账胀赵蛰辙锗这贞针侦诊镇阵挣睁狰帧郑证织职执纸挚掷帜质钟终种肿众诌轴皱昼骤猪诸诛烛瞩嘱贮铸筑驻专砖转赚桩庄装妆壮状锥赘坠缀谆浊兹资渍踪综总纵邹诅组钻致钟么为只凶准启板里雳余链泄'
var zh_t = '皑蔼碍爱翺袄奥坝罢摆败颁办绊帮绑镑谤剥饱宝报鲍辈贝钡狈备惫绷笔毕毙闭边编贬变辩辫鼈瘪濒滨宾摈饼拨钵铂驳卜补参蚕残惭惨灿苍舱仓沧厕侧册测层诧搀掺蝉馋谗缠铲产阐颤场尝长偿肠厂畅钞车彻尘陈衬撑称惩诚骋痴迟驰耻齿炽冲虫宠畴踌筹绸丑橱厨锄雏础储触处传疮闯创锤纯绰辞词赐聪葱囱从丛凑窜错达带贷担单郸掸胆惮诞弹当挡党荡档捣岛祷导盗灯邓敌涤递缔点垫电淀钓调叠谍叠钉顶锭订东动栋冻斗犊独读赌镀锻断缎兑队对吨顿钝夺鹅额讹恶饿儿尔饵贰发罚阀珐矾钒烦范贩饭访纺飞废费纷坟奋愤粪丰枫锋风疯冯缝讽凤肤辐抚辅赋复负讣妇缚该钙盖干赶秆赣冈刚钢纲岗臯镐搁鸽阁铬个给龚宫巩贡钩沟构购够蛊顾剐关观馆惯贯广规矽归龟闺轨诡柜贵刽辊滚锅国过骇韩汉阂鹤贺横轰鸿红後壶护沪户哗华画划话怀坏欢环还缓换唤痪焕涣黄谎挥辉毁贿秽会烩汇讳诲绘荤浑夥获货祸击机积饥讥鸡绩缉极辑级挤几蓟剂济计记际继纪夹荚颊贾钾价驾歼监坚笺间艰缄茧检堿碱拣捡简俭减荐槛鉴践贱见键舰剑饯渐溅涧浆蒋桨奖讲酱胶浇骄娇搅铰矫侥脚饺缴绞轿较稭阶节茎惊经颈静镜径痉竞净纠厩旧驹举据锯惧剧鹃绢杰洁结诫届紧锦仅谨进晋烬尽劲荆觉决诀绝钧军骏开凯颗壳课垦恳抠库裤夸块侩宽矿旷况亏岿窥馈溃扩阔蜡腊莱来赖蓝栏拦篮阑兰澜讕揽览懒缆烂滥捞劳涝乐镭垒类泪篱离裏鲤礼丽厉励砾历沥隶俩联莲连镰怜涟帘敛脸链恋炼练粮凉两辆谅疗辽镣猎临邻鳞凛赁龄铃淩灵岭领馏刘龙聋咙笼垄拢陇楼娄搂篓芦卢颅庐炉掳卤虏鲁赂禄录陆驴吕铝侣屡缕虑滤绿峦挛孪滦乱抡轮伦仑沦纶论萝罗逻锣箩骡骆络妈玛码蚂马骂吗买麦卖迈脉瞒馒蛮满谩猫锚铆贸麽黴没镁门闷们锰梦谜弥觅绵缅庙灭悯闽鸣铭谬谋亩钠纳难挠脑恼闹馁腻撵捻酿鸟聂齧镊镍柠狞甯拧泞钮纽脓浓农疟诺欧鸥殴呕沤盤庞国爱赔喷鹏骗飘频贫苹凭评泼颇扑铺朴谱脐齐骑岂启气弃讫牵扡釺铅迁签谦钱钳潜浅谴堑枪呛墙蔷强抢锹桥乔侨翘窍窃钦亲轻氢倾顷请庆琼穷趋区躯驱龋顴权劝却鹊让饶扰绕热韧认纫荣绒软锐闰润洒萨鳃赛伞丧骚扫涩杀纱筛晒闪陕赡缮伤赏烧绍赊摄慑设绅审婶肾渗声绳胜圣师狮湿诗屍时蚀实识驶势释饰视试寿兽枢输书赎属术树竖数帅双谁税顺说硕烁丝饲耸怂颂讼诵擞蘇诉肃虽绥岁孙损笋缩琐锁獭挞擡摊贪瘫滩坛谭谈叹汤烫涛绦腾誊锑题体屉条贴铁厅听烃铜统头图涂团颓蜕脱鸵驮驼椭洼袜弯湾顽万网韦违围为潍维苇伟伪纬谓卫温闻纹稳问甕挝蜗涡窝呜钨乌诬无芜吴坞雾务误锡牺袭习铣戏细虾辖峡侠狭厦鍁鲜纤咸贤衔闲显险现献县馅羡宪线厢镶乡详响项萧销晓啸蝎协挟携胁谐写泻谢锌衅兴汹锈绣虚嘘须许绪续轩悬选癣绚学勋询寻驯训讯逊压鸦鸭哑亚讶阉烟盐严颜阎豔厌砚彦谚验鸯杨扬疡阳痒养样瑶摇尧遥窑谣药爷页业叶医铱颐遗仪彜蚁艺亿忆义诣议谊译异绎荫阴银饮樱婴鹰应缨莹萤营荧蝇颖哟拥佣癰踊咏涌优忧邮铀犹游诱舆鱼渔娱与屿语吁御狱誉预驭鸳渊辕园员圆缘远愿约跃钥岳粤悦阅云郧匀陨运蕴酝晕韵杂灾载攒暂赞赃脏凿枣灶责择则泽贼赠扎札轧铡闸诈斋债毡盏斩辗崭栈战绽张涨帐账胀赵蛰辙锗这贞针侦诊镇阵挣睁狰帧郑证织职执纸挚掷帜质锺终种肿众诌轴皱昼骤猪诸诛烛瞩嘱贮铸筑驻专砖转赚桩庄装妆壮状锥赘坠缀谆浊兹资渍踪综总纵邹诅组钻致钟麼为只凶准启板里雳馀鍊洩'
String.prototype.tran=function(){
var s1,s2
if(zh_choose=='t'){
s1 = zh_s
s2 = zh_t
}else if(zh_choose=='s'){
s1 = zh_t
s2 = zh_s
}else{
return this
}
var a = ''
var l = this.length
for(var i=0i<this.lengthi++){
var c = this.charAt(i)
var p = s1.indexOf(c)
a += p < 0 ? c : s2.charAt(p)
}
return a
}
function setCookie(name, value){
var argv = setCookie.arguments
var argc = setCookie.arguments.length
var expires = (argc > 2) ? argv[2] : null
if(expires != null){
var LargeExpDate = new Date ()
LargeExpDate.setTime(LargeExpDate.getTime() + (expires*1000*3600*24))
}
document.cookie = name + "=" + escape (value)+((expires == null) ? "" : (" expires=" +LargeExpDate.toGMTString()))
}
function getCookie(Name){
var search = Name + "="
if(document.cookie.length > 0){
offset = document.cookie.indexOf(search)
if(offset != -1){
offset += search.length
end = document.cookie.indexOf("", offset)
if(end == -1){
end = document.cookie.length
}
return unescape(document.cookie.substring(offset, end))
}else{
return ''
}
}
}
function zh_tranBody(obj){
var o = (typeof(obj) == "object") ? obj.childNodes : document.body.childNodes
for (var i = 0 i < o.length i++){
var c = o.item(i)
if('||BR|HR|TEXTAREA|SCRIPT|'.indexOf("|"+c.tagName+"|") > 0) continue
if(c.className == zh_class){
if(c.id == zh_class + '_' + zh_choose){
c.setAttribute('style', zh_style_active)
c.style.cssText = zh_style_active
}else{
c.setAttribute('style', zh_style_inactive)
c.style.cssText = zh_style_inactive
}
continue
}
if(c.title != '' && c.title != null){
c.title = c.title.tran()
}
if(c.alt != '' && c.alt != null){
c.alt = c.alt.tran()
}
if(c.tagName == "INPUT" && c.value != '' && c.type != 'text' && c.type != 'hidden' && c.type != 'password'){
c.value = c.value.tran()
}
if(c.nodeType == 3){
c.data = c.data.tran()
}else{
zh_tranBody(c)
}
}
}
function zh_tran(go){
if(go) zh_choose = go
setCookie('zh_choose', zh_choose, zh_expires)
if(go == 'n'){
window.location.reload()
}else {
zh_tranBody()
}
}
function zh_getLang(){
if(getCookie('zh_choose')){
zh_choose = getCookie('zh_choose')
return true
}
if(!zh_autoLang_t && !zh_autoLang_s){
return false
}
if(getCookie('zh_autoLang_checked')){
return false
}
if(navigator.language){
zh_browserLang = navigator.language
}else if(navigator.browserLanguage){
zh_browserLang = navigator.browserLanguage
}
if(zh_autoLang_t && zh_langReg_t.test(zh_browserLang)){
zh_choose = 't'
}else if(zh_autoLang_s && zh_langReg_s.test(zh_browserLang)){
zh_choose = 's'
}
zh_autoLang_checked = 1
setCookie('zh_choose', zh_choose, zh_expires)
if(zh_choose == zh_default){
return false
}
return true
}
function zh_init(){
zh_getLang()
c = document.getElementById(zh_class + '_' + zh_choose)
if(zh_choose != zh_default){
if(window.onload){
window.onload_before_zh_init = window.onload
window.onload = function(){
zh_tran(zh_choose)
if(zh_autoLang_alert){
alert(zh_autoLang_msg)
}
window.onload_before_zh_init()
}
}else{
window.onload = function(){
zh_tran(zh_choose)
if(zh_autoLang_alert){
alert(zh_autoLang_msg)
}
}
}
}
}
zh_init()
</script>
</body>
</html>
1、 元素类型的转换（display属性）
Display属性
属性值：
Block
Inline
None
大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）
大部分内联元素默认的display值为inline，其中input默认的值为：inline-block（行内块元素）；
内联元素里面特殊的一个：行内块元素（内联块元素）
特点：
1：可以设置宽高
2：在一行内逐个显示
3：当前元素的display的值为inline-block能支持vertical-align 属性。
2、 vertical-align属性
vertical-align:垂直对齐。
Top
Bottom
Middle
Baseline
让一个元素在父元素里面左右上下居中：
给父元素添加text-align:center(左右居中)
给当前元素添加：
Display:inline-bolck
Vertical-align:middle
在当前元素后面（不要回车），添加一个空的span标签。
给span设置样式：
Display:inline-block
Width:0
Height:100%
Vertical-align:middle
3、 css元素类型的分类总结
分类：块状元素、内联元素、可变元素
元素类型的转换：
Display属性：
属性值：
Block
Inline
Inline-book
None
List-item
行内块元素：input display为inline-blcok1Img标签：浏览器默认解析的display值为inline
标签的嵌套规则：
尽量让块状元素作为父元素存在；
内联元素的子元素尽量也是内联元素；
P标签中不能出现h1-h6；
P标签和h1-h6不能互相嵌套。
4、 图片默认的display属性值为inline，为什么图片能添加宽高？？？
从另一个角度对所有的标签进行分类。
分为：置换元素与非置换元素
置换元素：
典型的置换元素：img/input 依赖标签的属性或者元素自身的类型；‘
因为img是置换元素，所以能添加大小。因为置换元素在页面显示的过程中，生成一个框（框架），这个框能添加大小。
非置换元素：
不是置换元素的都是非置换元素。
5、 定位
定位：让元素的位置发生改变。
定位属性：
Position属性：设置或者检索元素定位方式。
（如果元素有了position属性，元素就知道自己要做位置移动了）
Position的属性值：（属性值是告诉元素参照物是谁）
制定坐标：left/right/top/bottom
Position的属性值：
1：position:static 【静态定位】 （position的默认值）
2：position:absolute 【绝对定位】
a. 绝对定位的参照物：
已经有定位的父元素为参照物
如果父元素都没有定位或者没有父元素，以文档为参照物
b. 绝对定位的特点：
不占据空间，脱离布局流。
class{font-family: 'hakuyoxingshu000Regular'
src: url('000.eot')
src: local('hakuyoxingshu000 Regular'), local('hakuyoxingshu7000'), url('000.ttf') format('truetype'), url('000.svg#hakuyoxingshu000') format('svg')
}
其中的“000”是你的字体名称，有个缺点就是要考虑到兼容性，以上三种写法分别对应的是：
.TTF或.OTF，适用于Firefox 3.5、Safari、Opera
.EOT，适用于Internet Explorer 4.0+
.SVG，适用于Chrome、IPhone。
