随机颜色及大小方框首页

<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:

随机颜色及大小方框首页_第1张图片

你可能感兴趣的:(Random,block,home,Multi-color,随机首页)