html div css js

J.K.HonSon

浏览: 10009 次
性别:
来自: o

最近访客更多访客>>

天天不一样199709

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML CSS JavaScript XHTML

<!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" onclick="linkClick01(this,'re01','box01')">
				<span >消息盒子</span>
				<img id="re01" src="use/refresh.jpg" />
			</div>
			<div class='linkone' onclick="linkClick01(this,'re02','box02')">
				<span >好友近况</span>
				<img id="re02" style="display:none" src="use/refresh.jpg" />
			</div>
			<div class='linkone' onclick="linkClick01(this,'re03','box03')">
				<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" onclick="linkClick02(this,'','boxx01')">
				<span>我的好友</span>
			</div>
			<div class='linkone' onclick="linkClick02(this,'re05','boxx02')">
				<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 Document
var $=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 
	}; 
			
}

分享到：

js 获取浏览器信息

2009-09-03 10:24
浏览 1024
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

html div css js

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

html div css js

评论

发表评论

相关推荐

js 获取浏览器信息

js控制div元素在页面的位置

最近访客更多访客>>