标签：display oat nload back code margin 下划线 title onload
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="21.css" />
<style>
#father{
width:1300px;
height: 2170px;
margin: auto;
}
#logo{
width: 1300px;
height: 50px;
}
.top{
width:431px;
height: 50px;
float:left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 1px solid white;
width: 1300px;
height:50px;
background:black;
margin-bottom: 10px;
}
ul li{
display: inline;
color :white;
}
#pr{
width: 1300px;
height: 558px;
}
#pr_top{
width: 1300px;
height: 45px;
padding-top:8px;
}
#pr_bottom{
width: 1300px;
height: 500px;
}
#left{
width: 200px;
height: 500px;
float:left;
}
#right{
width: 1094px;
height: 500px;
float:left;
}
#big{
width: 544px;
height: 248px;
float:left;
}
.small{
width: 180px;
height: 248px;
float:left;
text-align: center;
}
#bottom{
text-align: center;
}
a{
text-decoration: none;
/*去掉超链接的下划线*/
}
</style>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
//书写显示广告图片的定时操作
time = setInterval("showAd()",3000);
});
//书写显示广告图片的函数
function showAd(){
//3.获取广告图片，并让其显示
$("#img2").show(2000);
//$("#img2").slideDown(4000);
//$("#img2").fadeIn(4000);
//4.清除显示图片 定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//6.获取广告图片，并让其隐藏
//$("#img2").hide();
$("#img2").slideUp(2000);
//$("#img2").fadeOut(3000);
//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script>
</head>
<body onload="init()"><!--init() 初始化-->
<div id="father">
<img src="../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" id="img2" style="display: none;" />
<!--1-->
<div id="logo">
<div class="top">
<img src="../../img/logo2.png" height="46px" alt="" />
</div>
<div class="top">
<img src="../../img/header.jpg" height="46px" alt="" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--2-->
<div id="menu">
<ul>
<a href="#"><li style="font-size:20px">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>电脑办公</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
<a href="#"><li>孕婴保健</li></a>
<a href="#"><li>奢侈品</li></a>
</ul>
</div>
<!--3-->
<div>
<img src="../../img/1.jpg" width="100%" id="img1" alt="" />
</div>
<!--4-->
<div>
<div id="pr_top">
<span><font size="4">最新商品</font></span>
<img src="../../img/title2.jpg" alt="" />
</div>
<div id="pr_bottom">
<div id="left">
<img src="../../img/big01.jpg" width="100%" height="100%" alt="" />
</div>
<div id="right">
<div id="big">
<img src="../../img/middle01.jpg" width="100%" height="100%" alt="" />
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
</div>
</div>
</div>
<!--5-->
<div>
<img src="../../img/ad.jpg" width="100%" alt="" />
</div>
<!--6-->
<div>
<div id="pr_top">
<span><font size="4">热门商品</font></span>
<img src="../../img/title2.jpg" alt="" />
</div>
<div id="pr_bottom">
<div id="left">
<img src="../../img/big01.jpg" width="100%" height="100%" alt="" />
</div>
<div id="right">
<div id="big">
<img src="../../img/middle01.jpg" width="100%" height="100%" alt="" />
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
<div class="small">
<a href="#"><img src="../../img/small03.jpg" /></a>
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">￥499</p>
</div>
</div>
</div>
</div>
<!--7-->
<div>
<img src="../../img/footer.jpg" width="100%" alt="" />
</div>
<!--8-->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a> <br /><br />
Copyright ©2005-2016传智商城 版权所有
</div>
</div>
</body>
</html>
标签：display oat nload back code margin 下划线 title onload
原文地址：https://www.cnblogs.com/022414ls/p/12259438.html
