HTML+CSS简单应用实例——购物网站的制作（三）
本页面是商品页面。
下面是效果图：
分析：上方大牌女装为DIV，下面是一个滚动图，年度爆款限时五折是table，今日热门活动也是一个大table，在其中用JS实现了放大的效果.下面是脚本
具体代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>淘淘网大牌女装专区</title><style>.Bar{width: 100%; background-color:#FFFFFF;height:100px;position: absolute;top:0px;left:0px;}.mar{position: absolute;top:130px;left:220px;}.fi{color:red;margin-top: 700px;font-size: 32px;}.fii{color:red;font-size: 32px;position:absolute;top:1060px;left: 655px;}.wph{position:absolute;top:1150px;left: 250px;}.footer{ position:absolute;top:1700px;left:220px;width:1100px;margin:0 auto;border-top:#dddddd 1px solid;margin-top:600px; height: 210px; background: rgb(245,245,245);text-align: center;}.footer p{ margin-top:20px;}.footer a{color:#666;}.footer a:hover{ color:rgb(228, 121, 89);}.footer .fp{color:#666;margin-top:10px;}.footimg{width="120px";height: "10px";}</style> <script type="text/javascript">function show(){var pic1=document.getElementById("1picture");var pic2=document.getElementById("2picture");var pic3=document.getElementById("3picture");var show1=document.getElementById("show1");var show2=document.getElementById("show2");var needshow1=document.getElementById("needshow1");var needshow2=document.getElementById("needshow2");needshow1.οnmοuseenter=function(){pic1.style.display="none";pic2.style.display="none";pic3.style.display="none";show1.style.display="";}needshow1.οnmοuseleave=function(){pic1.style.display="";pic2.style.display="";pic3.style.display="";show1.style.display="none";}needshow2.οnmοuseenter=function(){pic1.style.display="none";pic2.style.display="none";pic3.style.display="none";show2.style.display="";}needshow2.οnmοuseleave=function(){pic1.style.display="";pic2.style.display="";pic3.style.display="";show2.style.display="none";}}</script></head><body bgcolor="plum" οnlοad="show()"><div class="Bar"><p align="center" style="font-family: 宋体; font-size: 40px; color: #FF4500;"><b>-大牌女装-</b></p></div><marquee class="mar" scrollamount="13" width="1100px" height="600px" behavior="alternate"><img src="img/w3.jpg" width="500" height="500"><img src="img/w7.jpg" width="500" height="500"><img src="img/w4.jpg" width="500" height="500"><img src="img/w2.jpg" width="500" height="500"></marquee><p class="fi" align="center" >-年度爆款限时五折-</p><table cellspacing="10" align="center"> <tr><td><img src="img/w1.jpg" width="250px" height="250px"></td> <td><img src="img/w5.jpg" width="250px" height="250px"></td><td><img src="img/w6.jpg" width="250px" height="250px"></td><td><img src="img/w7.jpg" width="250px" height="250px"></td> <td><img src="img/w8.jpg" width="250px" height="250px"></td> </tr> </table><div class="fii"><p>-今日热门活动-</p></div><table cellspacing="5" align="center" class="wph"> <tr><td rowspan="2"><img src="img/w3.jpg" width="250px" height="500px"></td><td colspan="2" rowspan="2" id="show1" style="display: none;"><img src="img/wph2.jpg" width="500px" height="500px" ></td><td colspan="2" rowspan="2" id="show2" style="display: none;"><img src="img/wph4.jpg" width="500px" height="500px" ></td><td colspan="2" id="1picture"><img src="img/3折.png" width="500px" height="250px"></td> <td id="needshow1"><img src="img/wph2.jpg" width="250px" height="250px"></td></tr> <tr><td id="2picture"><img src="img/wph3.jpg" width="250px" height="250px"></td> <td id="3picture" ><img src="img/妖精1.jpg" width="250px" height="250px"></td><td id="needshow2"><img src="img/wph4.jpg" width="250px" height="250px"></td></tr> <tr><td><img src="img/妖精2.jpg" width="250px" height="250px"></td> <td><img src="img/wph9.jpg" width="250px" height="250px"></td><td><img src="img/wph6.jpg" width="250px" height="250px"></td><td><img src="img/裤子.jpg" width="250px" height="250px"></td> </tr> <tr><td><img src="img/wph7.jpg" width="250px" height="250px"></td> <td><img src="img/wph1.jpg" width="250px" height="250px"></td><td><img src="img/wph5.jpg" width="250px" height="250px"></td><td><img src="img/wph10.jpg" width="250px" height="250px"></td></tr> </table><div class="footer"><p><a href="#">联系我们</a> | <a href="#">诚聘英才</a> | <a href="#">合作招商</a> | <a href="#">广告平台</a></p><p class="fp">本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</p><div class="footimg"><img src="img/冠名商标2.jpg" width="70px";height="60px";><img src="img/冠名商标.jpg" width="60px";height="40px"><img src="img/商标.jpg" width="70px";height="60px"><img src="img/商标2.jpg" width="60px";height="30px"></div></div></body>
</html>
