今天做的一个页面（数组显示）

最新推荐文章于 2024-11-03 21:05:42 发布

原创最新推荐文章于 2024-11-03 21:05:42 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #float #url #border #html #c

这是一个关于HTML页面布局的示例，展示了如何使用div、float等CSS属性创建页面结构。同时，通过JavaScript动态生成内容，将数组数据转化为页面上的链接列表，用于展示个人护理相关的产品分类。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="/js/common.js"></script>
<script src="/js/product_kind.js"></script>
<title>列表</title>
<style>
HTML{FONT-SIZE:12px;FONT-FAMILY:宋体; color:#666666}
BODY{MARGIN:0px;FONT-SIZE:12px}
A{COLOR:#666666;TEXT-DECORATION:none}
A:hover{COLOR:#1C436C;TEXT-DECORATION:underline}
</style>
</head>

<div id=l_l style=" width:959px;text-align:right">登录注册我的帐户购物车收藏本页</div>
<div id=l style="width:960px">
<div id=l_p style="float:left;text-align:left;width:400px;background:url(/pat/img/login.gif) left top no-repeat">*亿家家旗下网站 </div>
<div id=m style="float:left">
<div id=n style="float:left;width:58px;height:35px;padding-top:10px;background:url(/pat/img/tt1.gif) left top no-repeat">父母</div>
<div id=n style="float:left;width:58px;height:35px;padding-top:10px;background:url(/pat/img/tt1.gif) left top no-repeat">孩子</div>
<div id=n style="float:left;width:58px;height:35px;padding-top:10px;background:url(/pat/img/tt1.gif) left top no-repeat">男人</div>
<div id=n style="float:left;width:58px;height:35px;padding-top:10px;background:url(/pat/img/tt1.gif) left top no-repeat"> 女人</div>
<div id=n style="float:left;width:58px;height:35px;padding-top:10px;background:url(/pat/img/tt1.gif) left top no-repeat">送健康</div>
<div id=n style="float:left;width:58px;height:35px;padding-top:10px;background:url(/pat/img/tt1.gif) left top no-repeat">所有商品</div>
</div>
</div>
<div id=l_b style="width:959px;height:25px; background-color:#42C0E4">dsfs</div>
<div id=l_b style="width:959px"><table border="1" width="100%">
<tr>
<td>sdfsdf</td>
</tr>
</table></div>

</div>
</div>

<div id="main" style="width:960px;margin-top:10px">
<div id=lleft style="float:left;width:180px">
<div style=""><img src="/pat/img/title.gif"> </div>
<style>
#w_t{margin-left:10px;text-align:left;margin-top:7px;width:169px;color:#0E9FC8;font-size:14px;font-weight:bold}
#w{margin-left:10px;margin-top:5px;text-align:left}
#w_l{float:left;width:80px;height:20px}
</style>
<div id="l_c" style="border:solid 1px #19B2DE;height:400px">
<script>
var str="";
var arr=K.product_kind[25165824];
arr=arr.reverse( )

alert(arr);
for(var i=0;i<arr.length;i++)
{
str+="<div id='w_t'>"+arr[i][1]+"</div><div id='w'>";
var arr1=K.product_kind[arr[i][0]];
if(arr1)
{
  for(var j=0;j<arr1.length;j++)
  {
   str+="<div id='w_l'><a href='/'>"+arr1[j][1]+"</a></div>"
  }
  str+="</div>";
}
}
document.write(str);

</script>
<div id="w_t" >个人护理</div>
<div id="w" >
<div id="w_l" ><a href="/" style="border-bottom:solid 1px #99CCFF">美容美发器</a></div>
<div id="w_l" ><a href="/">脂肪测量仪</a></div>
<div id="w_l" ><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">脂肪测量仪</a></div>
</div>
<div id="w_t" >个人护理</div>
<div id="w" >
<div id="w_l" ><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">脂肪测量仪</a></div>
<div id="w_l" ><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">脂肪测量仪</a></div>
</div>
<div id="w_t" >个人护理</div>
<div id="w" >
<div id="w_l" style="float:left;width:85px;height:20px;"><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">脂肪测量仪</a></div>
<div id="w_l" ><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">脂肪测量仪</a></div>
</div>
<div id="w_t" >个人护理</div>
<div id="w" >
<div id="w_l" ><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">脂肪测量仪</a></div>
<div id="w_l" ><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">脂肪测量仪</a></div>
</div>

<div id="w_t" >个人护理</div>
<div id="w" >
<div id="w_l" ><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">测量仪</a></div>
<div id="w_l" ><a href="/">发器</a></div>
<div id="w_l" ><a href="/">测量仪</a></div>
</div>

<div id="w_t" >个人护理</div>
<div id="w" >
<div id="w_l" ><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">测量仪</a></div>
<div id="w_l" ><a href="/">美容美发器</a></div>
<div id="w_l" ><a href="/">量仪</a></div>
</div>

</div>
</div>

</div>
</center>
</body>
</html>