逍遥老鬼继续扯淡

逍遥老鬼最近和魔兽世界一起远征，找我的话请去六区桑德兰服务器，记得阵营是部落的。

推荐使用1024以上分辨率浏览本站，此处广告位招商……

首页改头换面

07:54 PM 2006-11-12 | 逍遥老鬼 | 日志分类：DIV+CSS

我的上个版本的首页用了多长时间了？我也记不太清了，好像是sablog-x版本出来以后吧，因为调用的最新日志是乱码所以更换首页编码，顺便把首页也换了，说起来用的时间也不短了。

上个版本的就是模仿的angel那里的叶子作的，实在是没有什么新意的，看的时间长了也烦了，早就想换一换了，昨天看电视，一个节目，片头是好多三角形拼来拼去的，特漂亮，我也就灵机一动，把我的首页也改成这种有棱有角的吧，哈哈，很久以前看人家用css画了一所房子，那时候我就超级羡慕，咱没有那水平，搞一个简单点的页面总可以吧。今天下午2点多，看了会电视实在是没有意思，就跑来搞这个首页来了。因为以前也就是听说可以用css控制作三角形什么的，自己实在是没有动过手，所以无从下手，去qq群问问吧，人家放假过周末，只好还是自己搜索了。功夫不负有心人啊，在blueidea找到了样本，看了一下真是让我大跌眼镜，我要的效果竟然那么简单就能做成了……

别人说还不如用背景图片来的简单，我也知道，但是我就是想用css做一个玩，一边玩一边学点什么东西吧，再说，如果真让我用软件画图的话，我还真不一定会的……可能最后效果还没有这个好的。

就说简单的三角形吧，真的是没有难度的，打比方画一个正三角形，只要把border两条边定义的宽度和高度一样就可以了，记住只能定义两条边，要是四个边都定义的话就成一款黑板了……样板.top_2 { float:left; border-top:50px solid #FFFFFF; border-right:50px solid #000000; font: 0px/0px sans-serif; }我写的一个，不知道什么原因，非要在font设置成0的情况下才正常，不是0的话就多出一块来，我学的不深，问别人也没有结果呢，晚点再说吧。

本来还想做二级菜单呢，因为我的空间支持镜像吗，想把所有的镜像地址也挂到上边的菜单下面去，不过听说要用js的，那个玩意一点不懂，等研究下别人的成果再说吧，现在首页先暂时这样不动了。哈哈，也算是功劳一件，这个周末没有白过。大家去看看阿，给捧个场哦：http://www.gengbing.com

家里那本淘来的html和xhtml权威指南第五版，现在要复习也没有时间看，不过随便翻了几页，发现我不知道的东西实在是太多太多了，以至于更加坚定了我放弃网页设计的念头……

blueidea斑竹marvellous 写的代码，强人啊，想学习的建议去看看。地址：http://bbs.blueidea.com/viewthread.php?tid=2693267&pid=2859460&page=1&extra=page%3D1#pid2859460

附源代码<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <META name="Gemeratpr" content="FlashVml(璀灿之星)4.5"> <META http-equiv="Content-Type" content="text/html;charset=gb2312"> <META name="KeyWords" content="我的作品,flashvml,璀灿之星,vml极道教程,vml,vmlflash,FYW,lshdic"> <TITLE>我的作品</TITLE> <STYLE> v:*{behavior:url(#default#VML);position:absolute;} .mlt{position:static;PADDING-TOP:6;letter-Spacing:4;HEIGHT:20;TEXT-ALIGN:center;margin-bottom:-2} </STYLE> <script> function window.onerror(){return true;} //防止您的程序出现错误时弹出提示 </script> </HEAD> <BODY bgcolor="#ffffff" style='SCROLLBAR-FACE-COLOR: #002400; SCROLLBAR-HIGHLIGHT-COLOR: #002400; SCROLLBAR-SHADOW-COLOR: #002400; SCROLLBAR-3DLIGHT-COLOR: #002400; SCROLLBAR-ARROW-COLOR: #b4fcfc; SCROLLBAR-TRACK-COLOR: #48b424; SCROLLBAR-DARKSHADOW-COLOR: #002400; SCROLLBAR-BASE-COLOR: #002400;FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=0,startColorStr=gold,endColorStr=skyblue);'> <bgsound loop=1 id=bgsound1> <bgsound loop=-1 id=bgsound2> <script> //页面启动更新函数 var ltime=null,ltext='if(document.readyState!="complete"){status=status+"."}else{clearInterval(ltime);status="艺术家:marvellous,出品日期:2006年11月12日 20:12:20"}'; status='页面资源正在加载，请等待.' ltime=setInterval(ltext,200) function window.onload(){ } </script> <Script> var mtime1=null,showo1=null,selo1=null //用户VML右键扩展菜单 function menushow(mobj1,maxwid,ssudu){ //menushow(菜单id,项平均宽度,打开伸展速度) if(mtime1!=null){clearInterval(mtime1);mtime1=null} mobj1.style.left=event.x;mobj1.style.top=event.y; showo1=mobj1.all.tags("roundrect");var showlens=showo1.length for(i=0;i<showlens;i++){showo1[i].style.width=0;showo1[i].style.visibility="hidden"} mobj1.style.display="" mtime1=setInterval("for(i=0;i<"+showlens+";i++){showo1[i].style.visibility='';if(showo1[i].offsetWidth<"+maxwid+"){showo1 [i].style.width=showo1[i].offsetWidth+"+ssudu+";break;}else{if(i=="+(showlens-1)+"){clearInterval(mtime1);mtime1=null}}}",10) } function menuclose(mobj12,ssudu2){ //menushow(菜单id,关闭压缩速度) if(mtime1!=null)return false showo1=mobj12.all.tags("roundrect");var showlens=showo1.length-1 mtime1=setInterval("for(i="+showlens+";i>-1;i--){if(showo1[i].offsetWidth>0){try{showo1[i].style.width=showo1[i].offsetWidth -"+ssudu2+";break;}catch(e){showo1[i].style.visibility='hidden';if(i==0){clearInterval(mtime1);mtime1=null}}}}",10) } var rname="roundrect" function document.body.onmouseup(){ var tobj1=event.srcElement if(event.button==2&&tobj1.scopeName=='HTML'){menushow(menu2,65,25);menu2_2.style.display='none';return false}if (event.button==2&&tobj1.scopeName!='HTML'&&tobj1.parentElement.id.indexOf('menu2')==-1){selo1=tobj1;menushow (menu2_2,60,20);menu2.style.display='none';return false}if(event.button==1&&tobj1.tagName!=rname){clearInterval (mtime1);mtime1=null;menu2.style.display=='none'?menuclose(menu2_2,30):menuclose(menu2,40)} } function document.body.oncontextmenu(){return false} var http1=null,oldstu1="" function yibu(){ switch(http1.readyState){ case 1: status="语法加亮申请进度：正在异步连接服务器提交内容申请";break; case 2: status="语法加亮申请进度：已将数据载入内存";break; case 3: status="语法加亮申请进度：准备实例化创建脚本调用接口";break; case 4: status="语法加亮申请进度：完成、准备输出结果" if(http1.status==200){ var newwin1=window.open("") newwin1.document.open();newwin1.document.write(http1.responseText);newwin1.document.close(); } if(http1.status!=0&&http1.status!=200){ if(confirm("语法加亮申请进度：连接URL服务器超时或拒绝XMLHTTP内容申请，或者您未上网\n\n您想去LureCoder主页手动查看加亮的源代码吗？")){ window.open("http://www.lshdic.cn/lurecoder.asp") }} status=oldstu1; }} function getsource(url){ if(http1==null)http1=new ActiveXObject("Microsoft.XMLHTTP") if(url==null||url==""){window.open("http://www.lshdic.cn/lurecoder.asp");return false} url=url.toLowerCase();if(url.indexOf('file://')==0){if(confirm("您当前是在本地测试性弹出窗口使用该指令，该功能无法查看\n\n您想去LureCoder主页手动查看加亮的源代码吗？"))window.open("http://www.lshdic.cn/lurecoder.asp");return false} if(url.indexOf('http://')!=0||url.indexOf('.')==-1){alert("URL无效");return false} var str1="http://www.lshdic.cn/lurecoder.asp?badpost=1&defaultcolor=rgb(0,0,0)&codecolor=rgb(0,0,180), rgb(170,0,170), rgb (0,0,0), rgb(255,0,0), rgb(255,0,0), rgb(0,0,180), rgb(21,133,21), rgb(0,0,255), rgb(255,0,0), rgb(0,0,255), rgb(255,0,0), rgb(0,0,0)&ck1=0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11&ck2=2, 4, 11&ck3=5&url="+escape(url.replace(/\+/g,'&$x;')) str1=str1.replace(/ /g,"+") if(http1.readyState!=0)http1.abort() http1.onreadystatechange=yibu http1.open("post",str1,true) http1.setRequestHeader("Content-Type","application/x-www-form-urlencoded") http1.send(str1) } </script> <span id=menu2 style="position:absolute;Z-INDEX:60000;LEFT:395;TOP:210;color:#739EFE;cursor:hand;display:none;font- size:12px;font-family:宋体" onmouseover="var eobj=event.srcElement;if(eobj.tagName==rname) {eobj.strokecolor='blue';eobj.style.color='blue';eobj.style.marginLeft=10}" onmouseout="var eobj=event.srcElement;if (eobj.tagName==rname){eobj.strokecolor='#739EFE';eobj.style.color='#739EFE';eobj.style.marginLeft=0}" onclick="menu2.style.display='none'"> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="if(screen.width==800)alert('当前分辨率已经是800*600，无法使用');else document.body.style.zoom=1.27"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>80*60</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="document.body.style.zoom=1"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>AU*TO</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="if(screen.width==1024)alert('当前分辨率已经是1024*768，无法使用');else document.body.style.zoom=0.77"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>102*76</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="if(screen.width==1152)alert('当前分辨率已经是1152*864，无法使用');else document.body.style.zoom=0.64"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>115*86</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="location.reload()"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>刷新</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="document.execCommand('SelectAll')"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>全选</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="getsource(self.location.href)"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>源文件</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="document.execCommand('print')"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>打印</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="var str1=prompt('请输入一个标识背景颜色二进制/RGB/英文名称代码 ',document.bgColor);if(str1!=null&&str1!='')document.bgColor=str1"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>背景</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="document.body.scroll==''? document.body.scroll='no':document.body.scroll=''"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>滚动条</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="if(bgsound2.src==''){alert('bgsound2未指定src，媒体标记未指定音乐资源文件，操作无效')}else{bgsound2.volume!=-10000?bgsound2.volume=-10000:bgsound2.volume=0}"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>音乐开关</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#739EFE onclick="with(document){var temp1=[];temp1[0] =body.children.length;temp1[1]=0;temp1[3]=0;window.name=='lshdic1'?temp1[2]='FlashVml模拟运行状态':temp1[2]='浏览器常规运行状态';for(i=0;i<temp1[0];i++){if(body.children[i].scopeName=='v'){temp1[1]++;temp1[3]+=body.children [i].outerHTML.length}};alert('1:VML作品名:'+title+'\n2:XVML名域命名:'+namespaces(0).name+'\n3:文件大小(数据流):'+all (0).outerHTML.length+'字\n4:Vml元素合计:'+temp1[1]+'个,'+temp1[3]+'字\n5:Group组合计:'+all.tags('group').length+'个\n6:当前运行状态:'+temp1[2])}" style="margin-bottom:0;"> <v:fill type=gradient opacity=.4 color=#739EFE angle="50"/>统计</v:roundrect> <span id=menu2_2 style="position:absolute;Z-INDEX:60000;LEFT:395;TOP:210;color:#72AC93;cursor:hand;display:none;font- size:12px;font-family:宋体" onmouseover="var eobj=event.srcElement;if(eobj.tagName==rname) {eobj.strokecolor='green';eobj.style.color='green';eobj.style.marginLeft=10}" onmouseout="var eobj=event.srcElement;if (eobj.tagName==rname){eobj.strokecolor='#72AC93';eobj.style.color='#72AC93';eobj.style.marginLeft=0}" onclick="menu2_2.style.display='none'"> <v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="if(confirm('1:图形类型:'+selo1.tagName+'\n2:输出序列:'+selo1.sourceIndex+'\n3:父对象类型:'+selo1.parentElement.tagName+' 父对象id:'+selo1.parentElement.id+'\n4:子对象个数:'+selo1.children.length+'\n5:图形数据流:'+selo1.outerHTML.length+'\n6:图形源代码:\n\n'+selo1.outerHTML.replace(/<\? xml\:namespace.*?\/>/g,'')+'\n\n是否复制图形源代码？'))clipboardData.setData('text',selo1.outerHTML.replace(/<\? xml\:namespace.*?\/>/g,''))"> <v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>分析</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.removeNode()"> <v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>删除</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.contentEditable=true"> <v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>编辑</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick='var tempn1=selo1.tagName.toLowerCase();if(tempn1=="textbox") {alert("Textbox文本无法应用");return false};temp1="";if(selo1.style.flip!=null){temp1=selo1.style.flip.replace(" ","").toLowerCase();if(temp1.replace("x","").replace("y","")!=""){selo1.style.flip="x";return false}}if(temp1=="xy") {selo1.style.flip="y"};if(temp1=="x"){selo1.style.flip=""}else if(temp1=="y"){selo1.style.flip="x y"}else if(temp1=="") {selo1.style.flip="x"};'> <v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>反转</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick='var tempn1=selo1.tagName.toLowerCase();if(tempn1=="textbox") {alert("Textbox文本无法应用");return false};temp1="";if(selo1.style.flip!=null){temp1=selo1.style.flip.replace(" ","").toLowerCase();if(temp1.replace("x","").replace("y","")!=""){selo1.style.flip="x";return false}}if(temp1=="xy") {selo1.style.flip="x"};if(temp1=="y"){selo1.style.flip=""}else if(temp1=="x"){selo1.style.flip="x y"}else if(temp1=="") {selo1.style.flip="y"};'> <v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>颠倒</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="if(selo1.style.rotation==null){var temp1=0}else{var temp1=selo1.style.rotation};var str1=prompt('请输入一个标识顺时针旋转角度的数字',temp1);if(str1!=null&&str1!=''&&isNaN(str1) ==false)selo1.style.rotation=str1"> <v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>旋转</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.style.zoom=2"> <v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>*2</v:roundrect> <v:roundrect class=mlt arcsize=.5 strokecolor=#72AC93 onclick="selo1.style.zoom=0" style="margin-bottom:0;"> <v:fill type=gradient opacity=.4 color=#72AC93 angle="50"/>原大小</v:roundrect> <v:shape id=vml0 style="Z-INDEX:3002;LEFT:348;WIDTH:100;TOP:55;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="black" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,-149,149,0,149,0,1 xe"> <v:fill type="frame" opacity="1"/> </v:shape> <v:shape id=vml1 style="Z-INDEX:3002;LEFT:551;WIDTH:100;TOP:180;HEIGHT:100;flip:x y" coordsize="100,100" filled="t" fillcolor="black" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,-149,149,0,149,0,1 xe"> <v:fill type="frame" opacity="1"/> </v:shape> <v:rect id=vml2 style="Z-INDEX:3017;LEFT:349;WIDTH:301;TOP:131;HEIGHT:73" filled="t" fillcolor="black" strokecolor="black" strokeweight="1px"> <v:fill type="frame" opacity="1"/> </v:rect> <v:shape id=vml4 style="Z-INDEX:3042;LEFT:722;WIDTH:100;TOP:376;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0 xe"/> <v:shape id=vml5 style="Z-INDEX:3054;LEFT:320;WIDTH:100;ZOOM:0.6;TOP:156;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="#77fac3" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,-50,48,101,49,150,-1 xe"> <v:fill type="gradientRadial" opacity="1" color2="#71b244" angle="0"/> <v:extrusion on="t" foredepth="0" backdepth="0" color="white" diffusity="72089f"/> <center> 上山擒 虎易 </v:shape> <v:shape id=vml6 style="Z-INDEX:3061;LEFT:403;WIDTH:100;TOP:399;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0 xe"/> <v:shape id=vml7 style="Z-INDEX:3063;LEFT:602;WIDTH:100;TOP:356;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0 xe"/> <v:shape id=vml9 style="Z-INDEX:3054;LEFT:432;WIDTH:100;ZOOM:0.6;TOP:156;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="#ecf184" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,-50,48,101,49,150,-1 xe"> <v:fill type="gradientRadial" opacity="1" color2="#ec9e12"/> <v:extrusion on="t" foredepth="0" backdepth="0" color="white" diffusity="72089f"/> <center> 开口告 人难 </v:shape> <v:shape id=vml10 style="Z-INDEX:3054;LEFT:544;WIDTH:100;ZOOM:0.6;TOP:156;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="#dafc64" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,-50,48,101,49,150,-1 xe"> <v:fill type="gradientRadial" opacity="1" color2="#18a2f7"/> <v:extrusion on="t" foredepth="0" backdepth="0" color="white" diffusity="72089f"/> <center> 识得英 雄胆 </v:shape> <v:shape id=vml11 style="Z-INDEX:3054;LEFT:656;WIDTH:100;ZOOM:0.6;TOP:156;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="#18be35" strokecolor="black" strokeweight="1px" path=" m0,0 l0,0,-50,48,101,49,150,-1 xe"> <v:fill type="gradientRadial" opacity="1" color2="#dafc64"/> <v:extrusion on="t" foredepth="0" backdepth="0" color="white" diffusity="72089f"/> <center> 再过美 人关 </v:shape> <SCRIPT> //快速使预隐藏图形及时隐藏 try{ var boyobj=document.body.children,boyobjlen=boyobj.length for(i=0;i<boyobjlen;i++){ if(boyobj[i].ych!=null)boyobj[i].style.display='none'; if(boyobj[i].tagName=="group"){ boyobj[i].contentEditable=false; for(r=0;r<boyobj[i].children.length;r++){if(boyobj[i].children[r].ych!=null)boyobj[i].children[r].style.display='none';} } }}catch(e){} </SCRIPT> </BODY> </HTML>