惠普首页特效 简单模仿
时间：2007-09-19 来源：OBCattle
<html>
<head>
<title></title>
<style type="text/css">
<!--
body{border:0px; margin:0px;}
.divimg{ width:400px; border:0px; margin:0px;}
.divMenu{ width:400px; border:0px; margin:0px;}
.menu{ width:99px; margin:0px; float:left; background-color:#999999; border-right:1px solid #fff;}
.menu1{ width:99px; margin:0px; float:left; background-color:#009900;border-right:1px solid #fff;}
.menu2{ width:99px; margin:0px; float:left; background-color:#336699;border-right:1px solid #fff;}
.menu3{ width:99px; margin:0px; float:left; background-color:#996699;border-right:1px solid #fff;}
.menu4{ width:99px; margin:0px; float:left; background-color:#66CC33;}
#tab_1{width:400px; border:0px solid #333; background-color:#009900; display:block;}
#tab_2{width:400px; border:0px solid #333; background-color:#336699; display:none;}
#tab_3{width:400px; border:0px solid #333; background-color:#996699; display:none;}
#tab_4{width:400px; border:0px solid #333; background-color:#66CC33; display:none;}
-->
</style>
</head>
<body>
<div class="divMenu">
<img id="img" src="ad-01.jpg" width="400px" height="250px;">
</div>
<div class="divMenu">
<div id="menu1" class="menu" onMouseOver="change(1)">
menu1
</div>
<div id="menu2" class="menu" onMouseOver="change(2)">
menu2
</div>
<div id="menu3" class="menu" onMouseOver="change(3)">
menu3
</div>
<div id="menu4" class="menu" style="border-right:0px;" onMouseOver="change(4)">
menu4
</div>
</div>
<div>
<div id="tab_1">
内容1
</div>
<div id="tab_2">
内容2
</div>
<div id="tab_3">
内容3
</div>
<div id="tab_4">
内容4
</div>
</div>
</body>
</html>
<head>
<title></title>
<style type="text/css">
<!--
body{border:0px; margin:0px;}
.divimg{ width:400px; border:0px; margin:0px;}
.divMenu{ width:400px; border:0px; margin:0px;}
.menu{ width:99px; margin:0px; float:left; background-color:#999999; border-right:1px solid #fff;}
.menu1{ width:99px; margin:0px; float:left; background-color:#009900;border-right:1px solid #fff;}
.menu2{ width:99px; margin:0px; float:left; background-color:#336699;border-right:1px solid #fff;}
.menu3{ width:99px; margin:0px; float:left; background-color:#996699;border-right:1px solid #fff;}
.menu4{ width:99px; margin:0px; float:left; background-color:#66CC33;}
#tab_1{width:400px; border:0px solid #333; background-color:#009900; display:block;}
#tab_2{width:400px; border:0px solid #333; background-color:#336699; display:none;}
#tab_3{width:400px; border:0px solid #333; background-color:#996699; display:none;}
#tab_4{width:400px; border:0px solid #333; background-color:#66CC33; display:none;}
-->
</style>
</head>
<body>
<div class="divMenu">
<img id="img" src="ad-01.jpg" width="400px" height="250px;">
</div>
<div class="divMenu">
<div id="menu1" class="menu" onMouseOver="change(1)">
menu1
</div>
<div id="menu2" class="menu" onMouseOver="change(2)">
menu2
</div>
<div id="menu3" class="menu" onMouseOver="change(3)">
menu3
</div>
<div id="menu4" class="menu" style="border-right:0px;" onMouseOver="change(4)">
menu4
</div>
</div>
<div>
<div id="tab_1">
内容1
</div>
<div id="tab_2">
内容2
</div>
<div id="tab_3">
内容3
</div>
<div id="tab_4">
内容4
</div>
</div>
</body>
</html>
相关阅读 更多 +
