这个网页里面的效果是怎么做出来的。详细点点
发布网友
共4个回答
热心网友
用的层做得。代码：
<!--[622,6,24] published at 2009-04-09 12:22:05 from #020 by 1043-->
<!---->
<!--北京美美百货购物地图-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
<!--
body{
text-align:center;
}
a
{ color:#000000;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
a.alink1
{
font-size:12px;
color:#000;
}
.style1 {
color: #FFFFFF;
font-size: 14px;
}
.style2 {font-size: 12px; line-height:18px; }
#menu1 { width:129px; height:32px; cursor:hand;}
#menu2 { width:129px; height:32px; cursor:hand;}
#menu1_on { background:url(http://i3.sinaimg.cn/lx/style/meimei/images/demo_r13_c5.gif); width:129px; height:32px; cursor:hand; display:block}
#menu2_on { background:url(http://i2.sinaimg.cn/lx/style/meimei/images/floor_03.gif); width:129px; height:32px; cursor:hand; display:none;}
#menu1_off { background:url(http://i0.sinaimg.cn/lx/style/meimei/images/floor_05.gif); width:129px; height:32px; cursor:hand; display:none;}
#menu2_off { background:url(http://i1.sinaimg.cn/lx/style/meimei/images/demo_r13_c7.gif); width:129px; height:32px; cursor:hand; display:block;}
#flash_1f { background:url(images/demo_r15_c1.gif); widht:950px; heigh:217px; cursor:hand; display:block}
#flash_2f { background:url(images/demo_r15_c2.gif); widht:950px; heigh:217px; cursor:hand; display:none}
#feature_1f { display:block;}
#feature_2f { display:none; }
#band_1f { display:block;}
#band_2f { display:none; }
-->
/*CSS for copyright begin*/
#uni_footer{width:950px; margin:0 auto;line-height:28px;text-align:center;color:#000;font-size:12px; padding-top:10px;background-color:#fff; margin-right:8px; }
#uni_footer a:link,#uni_footer a:visited {color:#000;text-decoration:underline;}
#uni_footer a:hover,#uni_footer a:active {color:#000;text-decoration:underline;}
/*CSS for copyright end*/
.style6 {font-size: 12px; color: #CCCCCC; line-height: 18px; }
.style7 {color: #FFFFFF}
</style>
<script type="text/JavaScript">
<!--
function change(){
document.getElementById("flash").style.background = "";
}
function changeOn(){
document.getElementById("flash").style.background = "url(http://i3.sinaimg.cn/lx/style/meimei/images/demo_r15_c1.gif)";
}
function changeImg(i) { //v3.0
//alert();
if(i == 1){
document.getElementById("menu1_on").style.display = "block";
document.getElementById("menu1_off").style.display = "none";
document.getElementById("menu2_on").style.display = "none";
document.getElementById("menu2_off").style.display = "block";
document.getElementById("feature_1f").style.display = "block";
document.getElementById("feature_2f").style.display = "none";
document.getElementById("flash_1f").style.display = "block";
document.getElementById("flash_2f").style.display = "none";
document.getElementById("band_1f").style.display = "block";
document.getElementById("band_2f").style.display = "none";
}else if(i ==2 ){
document.getElementById("menu1_on").style.display = "none";
document.getElementById("menu1_off").style.display = "block";
document.getElementById("menu2_on").style.display = "block";
document.getElementById("menu2_off").style.display = "none";
document.getElementById("feature_1f").style.display = "none";
document.getElementById("feature_2f").style.display = "block";
document.getElementById("flash_1f").style.display = "none";
document.getElementById("flash_2f").style.display = "block";
document.getElementById("band_1f").style.display = "none";
document.getElementById("band_2f").style.display = "block";
}
}
//-->
</script>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body bgcolor="#A3A1A1">
<table width="958" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="http://i0.sinaimg.cn/lx/style/meimei/images/demo.png" fwbase="demo.gif" fwstyle="Dreamweaver" fwdocid = "1958391678" fwnested="0" -->
<tr>
<td colspan="22"><!-- 标准二级导航_尚品 begin -->
<style type="text/css">
.secondaryHeader{height:33px;overflow:hidden;background:url(http://i2.sinaimg.cn/dy/images/header/2008/standardl2nav_bg.gif) repeat-x #fff;color:#000;font-size:12px;font-weight:100;}
.secondaryHeader a,.secondaryHeader a:visited{color:#000;text-decoration:none;}
.secondaryHeader a:hover,.secondaryHeader a:active{color:#c00;text-decoration:underline;}
.sHBorder{border:1px #e3e3e3 solid;padding:0 10px 0 12px;overflow:hidden;zoom:1;}
.sHLogo{float:left;height:31px;line-height:31px;overflow:hidden;}
.sHLogo span,.sHLogo span a{display:block;*float:left;display:table-cell;vertical-align:middle;*display:block;*font-size:27px;*font-family:Arial;height:31px;}
.sHLogo span,.sHLogo span a img{vertical-align:middle;border:0;}
.sHLinks{float:right;line-height:31px;}
</style>
<div class="secondaryHeader">
<div class="sHBorder">
<div class="sHLogo"><span><a href="http://www.sina.com.cn/"><img src="http://i1.sinaimg.cn/dy/images/header/2009/standardl2nav_sina_new.gif" alt="新浪网" /></a><a href="http://style.sina.com.cn/"><img src="http://i1.sinaimg.cn/dy/images/header/2009/standardl2nav_style.gif" alt="新浪尚品" /></a></span></div>
<div class="sHLinks"><a href="http://style.sina.com.cn/">尚品首页</a> | <a href="http://www.sina.com.cn/">新浪首页</a> | <a href="http://news.sina.com.cn/guide/">网站地图</a></div>
</div>
</div>
<td colspan="7" bgcolor="#d8d6d6"><img name="demo_r6_c9" src="http://i3.sinaimg.cn/lx/style/meimei/images/demo_r6_c9.gif" width="339" height="11" border="0" alt=""></td>
<td colspan="4"><img name="demo_r6_c17" src="http://i2.sinaimg.cn/lx/style/meimei/images/demo_r6_c17.gif" width="296" height="11" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="11" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="5"><img name="demo_r7_c9" src="http://i0.sinaimg.cn/lx/style/meimei/images/demo_r7_c9.gif" width="12" height="182" border="0" alt=""></td>
<td rowspan="3" colspan="3"><a href="http://style.sina.com.cn/news/2007-11-16/190635.shtml" target="_blank"><img name="demo_r7_c10" src="http://i1.sinaimg.cn/lx/beauty/p/2007/1116/U1745P8T1D588358F1093DT20071116191723.jpg" width="121" height="168" border="0" alt=""></a></td>
<td rowspan="5"><img name="demo_r7_c13" src="http://i3.sinaimg.cn/lx/style/meimei/images/demo_r7_c13.gif" width="10" height="182" border="0" alt=""></td>
<td rowspan="4" valign="top" bgcolor="#d8d6d6"><table width="100%" border="0">
<tr>
<td width="5%"> </td>
<td width="91%"><span class="style2"><strong>VIP积分换礼<br>
<br>
</strong>活动时间：<br>
11月16日-11月25日
<br>
活动内容：
<br>
·积分满200分 可换领Maison Mode 400元礼券
<br>
·积分满100分 可换领Maison Mode 200元礼券</span></td>
<td width="4%"> </td>
</tr>
</table></td>
<td rowspan="5"><img name="demo_r7_c15" src="http://i1.sinaimg.cn/lx/style/meimei/images/demo_r7_c15.gif" width="12" height="182" border="0" alt=""></td>
<td rowspan="6"><img name="demo_r7_c17" src="http://i3.sinaimg.cn/lx/style/meimei/images/demo_r7_c17.gif" width="10" height="190" border="0" alt=""></td>
<td rowspan="4" colspan="2"><a href="http://style.sina.com.cn/news/2007-11-15/16393429.shtml" target="_blank"><img name="demo_r7_c10" src="http://i0.sinaimg.cn/lx/news/2007-11-16/U1745P622T1D35F19DT20071116191207.jpg" width="276" height="169" border="0" alt=""></a></td>
<td rowspan="6"><img name="demo_r7_c20" src="http://i1.sinaimg.cn/lx/style/meimei/images/demo_r7_c20.gif" width="10" height="190" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="68" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" bgcolor="#9c3131" class="style1">地理位置</td>
<td colspan="5" bgcolor="#9c3131"> </td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="31" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="3" colspan="7" bgcolor="#d8d6d6"><table width="281" border="0">
<tr>
<td width="11"> </td>
<td width="253"><span class="style2"> 北京市西长安街88号首都时代广场
</span></td>
<td width="10"> </td>
</tr>
</table></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="69" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="2" colspan="3"><img name="demo_r10_c10" src="http://i2.sinaimg.cn/lx/style/meimei/images/demo_r10_c10.gif" width="121" height="14" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="3" border="0" alt=""></td>
</tr>
<tr>
<td bgcolor="#d8d6d6"><img name="demo_r11_c14" src="http://i3.sinaimg.cn/lx/style/meimei/images/demo_r11_c14.gif" width="184" height="11" border="0" alt=""></td>
<td rowspan="2" colspan="2"><img name="demo_r11_c18" src="http://i3.sinaimg.cn/lx/style/meimei/images/demo_r11_c18.gif" width="276" height="19" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="11" border="0" alt=""></td>
</tr>
<tr>
<td colspan="7"><img name="demo_r12_c1" src="http://i0.sinaimg.cn/lx/style/meimei/images/demo_r12_c1.gif" width="301" height="8" border="0" alt=""></td>
<td colspan="7"><img name="demo_r12_c9" src="http://i0.sinaimg.cn/lx/style/meimei/images/demo_r12_c9.gif" width="339" height="8" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="8" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" bgcolor="#9c3131" class="style1">楼层选择</td>
<td colspan="2" bgcolor="#9c3131"> </td>
<td><a href="#" onMouseOver="changeImg(1);">
<div id="menu1">
<div id="menu1_on"></div>
<div id="menu1_off"></div>
</div>
</a></td>
<td><img name="demo_r13_c6" src="http://i2.sinaimg.cn/lx/style/meimei/images/demo_r13_c6.gif" width="3" height="32" border="0" alt=""></td>
<td colspan="4">
<a href="#" style="mouse:hand;" onMouseOver="changeImg(2)">
<div id="menu2">
<div id="menu2_on"></div>
<div id="menu2_off"></div>
</div>
</a>
</td>
<td colspan="10" bgcolor="#9c3131"> </td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="32" border="0" alt=""></td>
</tr>
<tr>
<td colspan="20" bgcolor="#FFFFFF"></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="8" border="0" alt=""></td>
</tr>
<tr>
<td colspan="20">
<div>
<div id="flash_1f"><embed src="http://i0.sinaimg.cn/lx/news/z/mashionmode/U1745P622T6D24F245DT20071116163434.swf" quality=high width=950 height=950 type='application/x-shockwave-flash'></embed> </div>
<div id="flash_2f"><embed src="http://i2.sinaimg.cn/lx/news/z/mashionmode/U1745P622T6D24F256DT20071116163434.swf" quality=high width=950 height=950 type='application/x-shockwave-flash'></embed></div>
</div>
</td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="217" border="0" alt=""></td>
</tr>
<tr>
<td colspan="20"><img name="demo_r16_c1" src="http://i0.sinaimg.cn/lx/style/meimei/images/demo_r16_c1.gif" width="950" height="7" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="7" border="0" alt=""></td>
</tr>
<tr>
<td colspan="20" bgcolor="#000000"></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="12" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="4" align="center" valign="top" bgcolor="#000000"><img name="demo_r18_c1" src="http://i2.sinaimg.cn/lx/style/meimei/images/demo_r18_c1.gif" width="13" height="79" border="0" alt=""></td>
<td colspan="2" align="center" valign="middle" bgcolor="#9c3131" class="style1" style="cursor:hand;">名品店铺</td>
<td rowspan="2" colspan="17" bgcolor="#000000"></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="21" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#000000"></td>
<td ></td>
</tr>
<tr>
<td colspan="14" align="left" valign="top" bgcolor="#000000">
<div id="band_1f"><p class="style6"><strong>1F<br>
</strong>GUCCI Salvatore Ferragamo
Hugo Boss
Z Zegna
JC Versace
Coach
CANALI
Cerruti 1881
Tru Trussardi
Kent&Curwen
Gieves & Hawkes
PAUL&SHARK
BCBG
DKNY
Patrizia Pepe
GOLD PFEIL
Diesel
Aquascutum
AutaSon
LIU JO
Altea
MCM
Aldo Brue </p>
</div>
<div id="band_2f"><p class="style6"><strong>2F<br>
</strong>
Biba
Miquel
Ana Sousa
Esprit
BYPAC
Hush Puppies
Hush Puppies Lady
Disnger times
TantPourElle
POPO
LA PARGAY
宝视
ACE
Just Gold Just Diamond
J.estina
Easy Shop
曼陀妮
Carini
MASEILNE
<strong><br>
</strong></p></div>
</td>
<td rowspan="2" colspan="5" bgcolor="#000000"></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="39" border="0" alt=""></td>
</tr>
<tr>
<td colspan="14" bgcolor="#000000"><img name="demo_r21_c2" src="http://i1.sinaimg.cn/lx/style/meimei/images/demo_r21_c2.gif" width="635" height="6" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="6" border="0" alt=""></td>
</tr>
<tr>
<td colspan="20"><img name="demo_r22_c1" src="http://i1.sinaimg.cn/lx/style/meimei/images/demo_r22_c1.gif" width="950" height="1" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td colspan="20" bgcolor="#000000"></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="14" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="4" align="center" valign="top" bgcolor="#000000"><img name="demo_r24_c1" src="http://i3.sinaimg.cn/lx/style/meimei/images/demo_r24_c1.gif" width="13" height="106" border="0" alt=""></td>
<td colspan="2"><a href="#"><img name="demo_r24_c2" src="http://i0.sinaimg.cn/lx/style/meimei/images/demo_r24_c2.gif" width="80" height="21" border="0" alt=""></a></td>
<td rowspan="2" colspan="17" bgcolor="#000000"></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="21" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><img name="demo_r25_c2" src="http://i1.sinaimg.cn/lx/style/meimei/images/demo_r25_c2.gif" width="80" height="13" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="13" border="0" alt=""></td>
</tr>
<tr>
<td colspan="17" bgcolor="#000000">
<div>
<div id="feature_1f"><span class="style6">一层汇聚Gucci、Salvatore Ferragamo 、Hugo Boss、Coach等国际奢侈品牌。</span></div>
<div id="feature_2f"><span class="style6">二层拥有Canali、Cerruti 1881、Paul & Shark、Aquascutum等商务休闲国际精品。</span></div>
</div>
</td>
<td colspan="2" rowspan="2" align="right" valign="bottom" bgcolor="#000000"><img name="demo_r26_c19" src="http://i2.sinaimg.cn/lx/style/meimei/images/demo_r26_c19.gif" width="218" height="72" border="0" alt=""></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="43" border="0" alt=""></td>
</tr>
<tr>
<td colspan="17" bgcolor="#000000"></td>
<td><img src="http://i2.sinaimg.cn/lx/style/meimei/images/spacer.gif" width="1" height="29" border="0" alt=""></td>
</tr>
</table>
</body>
</html>
热心网友
不知道FLASH软件你会不会用，如果会用的话，我可以把它的源文件发给你，这样的就可以在软件中看出是怎么做出来的了。想要的话e-mail 我，邮箱xiaoxiang622@163.com
热心网友
这是用FLASH制作的，详细讲起来有点复杂，建议你还是搜搜FLASH教材吧！
热心网友
你说的是层切换吧？
上网找找滑动门．
有好多这样的文章，实现起来也不难．
