`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<style>
#father{
border: 0px solid red;
width: 1300px;
height: 2170px;
margin: auto;
}
/#logo{
border: 0px solid black;
width: 1300px;
height: 50px;
}/
.top{
border: 0px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 0px solid red;
width: 1300px;
height: 50px;
background-color: black;
margin-bottom: 10px;
}
ul li{
display: inline;
color: white;
}
#clear{
clear: both;
}
#product{
border: 0px solid red;
width: 1300px;
height: 558px;
}
#product_top{
border: 0px solid blue;
width: 100%;
height: 45px;
padding-top: 8px;
}
#product_bottom{
border: 0px solid green;
width: 100%;
height: 500px;
}
#product_bottom_left{
border: 0px solid red;
width: 200px;
height: 500px;
float: left;
}
#product_bottom_right{
border: 0px solid blue;
width: 1094px;
height: 500px;
float: left;
}
#big{
border: 0px solid red;
width: 544px;
height: 248px;
float: left;
}
.small{
border: 0px solid blue;
width: 180px;
height: 248px;
float: left;
/*讓里面的內容居中*/
text-align: center;
}
#bottom{
text-align: center;
}
a{
text-decoration: none;
}
</style>
<!--<script type="text/javascript">
function init(){
//書寫輪圖片顯示的定時操作
setInterval("changeImg()",3000);
//1.設置顯示廣告圖片的定時操作
time = setInterval("showAd()",3000);
}
//書寫函數
var i=0
function changeImg(){
i++;
//獲取圖片位置并設置src屬性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//2.書寫顯示廣告圖片的函數
function showAd(){
//3.獲取廣告圖片的位置
var adEle = document.getElementById("img2");
//4.修改廣告圖片元素里面的屬性讓其顯示
adEle.style.display = "block";
//5.清除顯示圖片的定時操作
clearInterval(time);
//6.設置隱藏圖片的定時操作
time = setInterval("hiddenAd()",3000);
}
//7.書寫隱藏廣告圖片的函數
function hiddenAd(){
//8.獲取廣告圖片并設置其style屬性的display值為none
document.getElementById("img2").style.display= "none";
//9.清除隱藏廣告圖片的定時操作
clearInterval(time);
}
</script>-->
<script type="text/javascript" src="1.js" ></script>
</head>
<body onload="init()">
<div id="father">
<!--定時彈出廣告圖片位置-->
<!--1.logo部分-->
<div id="logo">
<div class="top">
</div>
<div class="top">
</div>
<div class="top" id="top">
<a href="#">登錄</a>
<a href="#">注冊</a>
<a href="#">購物車</a>
</div>
</div>
<div id="clear">
</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>
</ul>
</div>
<!--3.輪播圖部分-->
<div id="">
</div>
<!--4.最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">最新商品</span>
</div>
<div id="product_bottom">
<div id="product_bottom_left">
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"></a>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
</div>
</div>
</div>
<!--5.廣告圖片-->
<div id="">
</div>
<!--6.熱門商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">熱門商品</span>
</div>
<div id="product_bottom">
<div id="product_bottom_left">
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"></a>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
<div class="small">
<a href="#"><p style="color: gray;">電燉鍋</p></a>
<p style="color: red;">￥399</p>
</div>
</div>
</div>
</div>
<!--7.廣告圖片-->
<div id="">
</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>
<p>
Copyright ? 2005-2016 傳智商城 版權所有
</p>
</div>
</div>
</body>
</html>`
