html div css js

最新推荐文章于 2023-04-15 23:40:51 发布

iteye_16781

最新推荐文章于 2023-04-15 23:40:51 发布

阅读量226

点赞数

分类专栏： js 文章标签： HTML CSS JavaScript XHTML ViewUI

本文链接：https://blog.csdn.net/iteye_16781/article/details/81761743

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<!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 
	}; 

}