html div css js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><link href="new.css" rel="stylesheet" type="text/css" /><script src="new.js" language="javascript"></script></head><body><div>a</div><div id='header'>a</div><div id='left'><div id='linklist01'><div style="position:absolute; bottom:0; left:5px;"><div id='link01' class='linkone' style=" background:#FFFFFF; font-weight:bold" ><span >消息盒子</span><img id="re01" src="use/refresh.jpg" /></div><div class='linkone' ><span >好友近况</span><img id="re02" style="display:none" src="use/refresh.jpg" /></div><div class='linkone' ><span >好友印象</span><img id="re03" style="display:none" src="use/refresh.jpg" /></div></div></div><div id='linkbox'><div id='box01' style=" height:500px; display:block">aaaaaaaaaaaaaaaaaaaaaaaaa</div><div id='box02' style=" height:500px; display:none">b</div><div id='box03' style=" height:500px; display:none">c</div><div id='box04' style=" height:500px; display:none">d</div></div></div><div id='right'><div id='linklist02'><div style="position:absolute; bottom:0; left:5px;"><div id='link02' class='linkone' style=" background:#FFFFFF; font-weight:bold" ><span>我的好友</span></div><div class='linkone' ><span >我的群</span><img id="re05" style="display:none" src="use/refresh.jpg" /></div></div></div><div id='linkbox2'><div id='boxx01' style="display:block"></div><div id='boxx02' style="display:none">b</div></div></div><div id='footer'>a</div></body></html>/* CSS Document */*{ margin:0; padding:0;}html{ height:100%; width:100%; overflow:hidden}body{height:100%; width:100%; overflow:hidden;}#header{ position:absolute; top:0; left:0; height:80px; width:100%; border-bottom:#4C94EA 3px solid }#left{ position:absolute; top:83px; left:0; }#right{ position:absolute; top:83px;right:0; width:200px; border-left:#4C94EA 1px solid }#footer{ position:absolute; bottom:0;left:0; height:66px; width:100%; border-top:#4C94EA 3px solid }#linklist01{ background:#DEEAF8; position:absolute; top:30px; left:15px; border-top:#4C94EA solid 1px; height:24px; font-size:12px;}#linklist02{background:#DEEAF8; position:absolute; top:60px; left:5px; font-size:12px; width:190px; height:24px; border-top:#4C94EA solid 1px; }#linkbox{ position:absolute; top:55px; left:15px; overflow:auto}#linkbox2{ position:absolute; top:110px; left:5px; width:190px; overflow:auto}.linkone{float:left;padding:3px 10px; cursor:pointer; margin-right:6px}.tt{ background:#FF0000; width:100%; height:20px; font-size:12px}
// JavaScript Documentvar $=function(o){ return document.getElementById(o); }var $$=function(o){ return document.createElement(o); }window.onload=function(){winInit();init();ooo();}window.onresize=function(){winInit();}function winInit(){var w=document.body.clientWidth;var h=document.body.clientHeight;$('left').style.width=(w-200)+'px';;$('left').style.height=(h-150)+'px';$('right').style.height=(h-150)+'px';$('linklist01').style.width=(w-235)+'px';$('linkbox').style.width=(w-235)+'px';$('linkbox').style.height=(h-220)+'px';$('linkbox2').style.height=(h-265)+'px';}function init(){link00=$('link01');link2=$('link02');re00=$('re01');box00=$('box01');boxx00=$('boxx01');}function linkClick01(linkOne,reOne,boxOne){link00.style.background='#DEEAF8';link00.style.fontWeight='normal';link00=linkOne;linkOne.style.background='#fff';linkOne.style.fontWeight='bold';re00.style.display='none';re00=$(reOne);re00.style.display='inline';box00.style.display='none';box00=$(boxOne);box00.style.display='block';}function linkClick02(linkOne,reOne,boxOne){link2.style.background='#DEEAF8';link2.style.fontWeight='normal';link2=linkOne;link2.style.background='#fff';link2.style.fontWeight='bold';if(reOne!=''){$('re05').style.display='inline';}else{$('re05').style.display='none';}boxx00.style.display='none';boxx00=$(boxOne);boxx00.style.display='block';}function ooo(){var fmsg={在线好友:[{name:'aaa',},{name:'bbb'}],我的好友:[{name:'a2'},{name:'hh'}],陌生人:{name:'a3'}};var box=$('boxx01');for(i in fmsg){var div=$$('div');var span=$$('span');var div2=$$('div');var span2=$$('span');span.innerHTML=i;div.appendChild(span);box.appendChild(div);div.className='tt';}}function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; }
页:
[1]