JQ入门：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#bodyDiv {
border: 1px solid blue;
width: 90%;
}
.logoDiv {
border: 1px solid blue;
width: 33%;
float: left;
height: 50px;
}
.clear {
clear: both;
}
#menuDiv {
width: 100%;
height: 50px;
border: 1px solid blue;
background-color: black;
}
#imgDiv {
width: 100%;
border: 1px solid blue;
}
#menuDiv a {
font-size: 20px;
color: white;
}
.productClass {
width: 100%;
border: 1px solid blue;
}
.contentClass {
width: 100%;
border: 1px solid blue;
}
.contentClass font {
font-size: 30px;
color: black;
}
</style>
<script src="../js/jquery-1.11.3.min.js"></script>
<script>// 弹广告
var time ;
$(function() {
setTimeout("showAd()", 2000);
});
function showAd() {
$("#adDiv").fadeIn(2000);
setTimeout("hideAd()", 5000);
}
function hideAd() {
$("#adDiv").fadeOut(2000);
setTimeout("showAd()", 5000);
}
</script>
</head>
<body>
<div id="bodyDiv">
<div id="adDiv" style="width:100%;display: none;">
<img src="../img/10.jpg" />
</div>
<div>
<div class="logoDiv">
<img src="../img/8.jpg" height="48">
</div>
<div class="logoDiv">
<img src="../img/10.jpg" height="48">
</div>
<div class="logoDiv">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
<!-- Menu的DIV -->
<div id="menuDiv">
<a href="">首页</a>
<a href="">电脑办公</a>
<a href="">手机数码</a>
<a href="">烟酒糖茶</a>
</div>
<div id="imgDiv">
<img src="../img/2.jpg" width="100%">
</div>
<!-- 热门商品的DIV -->
<div class="productClass">
<!-- 文字部分的DIV -->
<div class="contentClass">
<font>热门商品</font><img src="../img/3.png">
</div>
<div style="width:100%;border:1px solid blue;">
<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
<img src="../img/1.jpg" width="100%" height="100%">
</div>
<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
<div>
<div style="border:1px solid blue;width:48%;float:left;height:228px;">
<img src="../img/1.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;border:1px solid blue;">
<img src="../img/1.jpg" width="100%" height="80">
</div>
<div class="productClass">
<div class="contentClass">
<font>最新商品</font><img src="../img/1.jpg">
</div>
<div style="width:100%;border:1px solid blue;">
<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
<img src="../img/1.jpg" width="100%" height="100%">
</div>
<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
<div>
<div style="border:1px solid blue;width:48%;float:left;height:228px;">
<img src="../img/1.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/1.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/2.jpg">
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;border:1px solid blue;">
<img src="../img/1.jpg" width="100%">
</div>
<div style="width:100%;border:1px solid blue;">
<center>
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/> Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</div>
</body>
</html>
|
|
收藏
淘帖
踩
，
