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>
更多推荐
HTML+CSS简单应用实例——购物网站的制作（三）
发布评论