您的位置：首页 > 其它

随机颜色及大小方框首页

2011-06-04 00:00 579 查看

<html>
<head>
<title> D2S2 HOME </title>
<link rel="stylesheet" type="text/css" href="/static/accounts/css/home.css" />
<script type="text/javascript" src="/static/accounts/js/multicolor.js"></script>
<script>
window.onload = function() { multiColor("items"); }
</script>
</head>
<body>
<div id="menu">
<li class="top-item"><a id="home" href="/">HOME</a>
<ul>
<li class="items"><a href="/iapp/">iapp</a></li>
<li class="items"><a href="/mtree/">mtree</a></li>
<li class="items"><a href="/forms/index">forms</a></li>
<li class="items"><a href="/about/">about me</a></li>
</ul>
</li>
</div>
<p><a href="./admin/">[ADMIN]</a></p>
</body>
</html>

multicolor.js:

/*
* multiColor is a tricky toys, which changes the style
* of a set of items randomly. <by rugby, 2011>
*/
function multiColor(className) {
var lis = document.getElementsByClassName(className);
var _r,  _h;
for (i in lis) {
_r = Math.random();
_w = Math.pow(2.5, _r+2.1);
lis[i].style.backgroundColor = "#" + _r.toString(16).substring(2,5);
lis[i].style.height = 100/_w + "em";
lis[i].style.width = _w + "em";
}
}

base.css:

body {
background: #333333;
}
#headbar {
background: #222222;
border-radius: 10px 0px 0px 0px;
margin: 2px;
padding: 0px;
}
#headbar #userlist {
list-style-type: none;
text-align: center;
padding: 2px;
margin: 3px;
}
#userlist .usermode {
height: 32px;
width: 180px;
padding: 1px;
margin: 1px;
background: #808000;
display: inline-block;
font: oblique small-caps 600 24px arial;
text-shadow: 5px 2px 6px #222222;
box-shadow: 2px 2px 5px #BB9911;
border-radius: 10px 0px 0px 0px;
}
mainpad #iopad {
width: 600px;
height: 500px;
background: #666666;
border-radius: 0px 10px 0px 10px;
border-width: 0px;
margin: 3px;
padding: 2px;
}
#sidenav {
background: #7B5322;
margin: 2px;
padding: 4px;
width: 320px;
height: 600px;
border-radius: 10px 2px 2px 10px;
}
#footbar {
margin: 2px;
padding: 6px;
background: #222222;
border-radius: 10px 2px 10px 2px;
}
#footbar #status {
height: 60px;
width: 548px;
color: #FFFFFF;
background: #000000;
border-radius: 5px 5px 5px 5px;
border-width: 0px;
margin: 4px;
padding: 2px;
}
#footbar #logo {
width: 50px;
height: 50px;
padding: 2px;
｝

Screenshot:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HOME Multi-color Random block 随机首页

相关文章推荐

新的分享

章节导航