Bluegrape 스토리

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 박스 표현하기!</title>
<style type="text/css">
.rtop, .rbottom {display: block}
.rtop *, .rbottom * {display: block; height: 1px; overflow: hidden; background:#cccccc}
.rtop_s, .rbottom_s {display: block}
.rtop_s *, .rbottom_s * {display: block; height: 1px; overflow: hidden; background:#6699cc}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
.box { text-align:center; background:#cccccc; padding:5px 10px; font-size:12px; font-size:12px}
.box_s { text-align:center; background:#6699cc; padding:5px 10px; font-size:12px; font-size:12px; color:white; }

#menu ul { margin: 0px; padding: 0px; }
#menu ul li { width: 100px; float: left; margin-right: 5px; }
</style>

<script language="javascript">
function changeLine(num) {
for(var i=0; i < topMenu.length; i++) {
if (i == num) topMenu[i].className = "rtop_s";
else topMenu[i].className = "rtop";
}
for(var i=0; i < btmMenu.length; i++) {
if (i == num) btmMenu[i].className = "rbottom_s";
else btmMenu[i].className = "rbottom";
}
}

function changeTab() {
for(var i=0; i < boxMenu.length; i++) {
if (boxMenu[i] == this) {
boxMenu[i].className = "box_s";
changeLine(i);
} else {
boxMenu[i].className = "box";
}
}
}

var topMenu = new Array();
var boxMenu = new Array();
var btmMenu = new Array();

function init() {
var objList = document.body.getElementsByTagName("b");
for (var j=0; j < objList.length; j++) {
if(objList[j].className == "rtop") {
topMenu.push(objList[j]);
}
if(objList[j].className == "rbottom") {
btmMenu.push(objList[j]);
}
}

var objList = document.body.getElementsByTagName("div");
for (var j=0; j < objList.length; j++) {
if(objList[j].className == "box") {
boxMenu.push(objList[j]);
objList[j].onmouseover = this.changeTab;
objList[j].onmouseout = this.changeTab;
}
}

topMenu[0].className = "rtop_s";
boxMenu[0].className = "box_s";
btmMenu[0].className = "rbottom_s";
}
</script>
</head>

<body onload="init()">

<div id="menu">
<ul>
<li title="공지사항">






<div class="box">공지사항</div>






</li>
<li title="자유게시판">






<div class="box">자유게시판</div>






</li>
<li title="메모장">






<div class="box">메모장</div>






</li>
</ul>
</div>

</body>
</html>

phpschool에서 하랑이짱님이 올리신것