电脑技术学习

桌面图标的排列,体现wingdings字体的超强功能

dn001

<!-- 第一步:把如下代码加入<body>区域中 -->
<script>
//桌面图标距离与菜单效果
ico_top=10;
ico_left=10;
ico_bottom=30;
ico_x=65;
ico_y=65;
function setico()
{
/*Haiwa@20:45 2002-8-26*/
divCount = document.all.ico.all.tags("DIV");
for (i=0; i<divCount.length; i++) {
obj = divCount(i);
win_y=document.body.clientHeight-ico_top-ico_bottom;//图标的纵坐标范围
n=Math.round(win_y/ico_y);//每列可排列的个数
num=i+1;
if (n!=0){
l=Math.round(num/n+0.49);//图标的列数
numy=i-n*l+n;//在每一列中图标的序数
obj.style.left=l*ico_x-ico_x+ico_left;
obj.style.top=numy*ico_y+ico_top;
}
}
}
</script>
<style>
div{font-size:12px}
.icon{position: absolute; top: -100; left: -100; width: 56; height: 45;font-family:Tahoma;color:#FFFFFF}
</style>
<div id=ico>
<!-- 桌面图标 -->

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">0</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">1</font>
<br>Open Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">2</font>
<br>My Text</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">3</font>
<br>My Word</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">4</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">5</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">6</font>
<br>Waiting</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">7</font>
<br>Typer</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">8</font>
<br>Mouse</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">9</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">)</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">!</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">@</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">#</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">$</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">%</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">^</font>
<br>My Folder</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">&</font>
<br>My Book</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">*</font>
<br>My Mail</p></div>

<div id="ico1" class=icon><p align="center">
<font face="Wingdings" style="font-size:32px">(</font>
<br>My Phone</p></div>

</div>
<script>setico();</script>


<!-- 第二步:把<body>中的内容改为: -->
<body onresize=setico(); onselectstart="return false" onload="setico();" bgcolor="#336699">