使用JQuery完成网上商城的制作

最新推荐文章于 2023-05-25 15:02:31 发布
最新推荐文章于 2023-05-25 15:02:31 发布
阅读量2.2k 收藏 21
点赞数 4
分类专栏： JAVA 文章标签： 个人使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40521823/article/details/79520360
版权

使用JQuery完成网上商城的制作代码实现：

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用DIV+CSS完成首页布局</title>
<style>
#father{
border: 0px solid red;
width: 1100px;
height: 2065px;
margin:auto;
}
.top{
border: 0px solid black;
width: 364.5px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 0px solid red;
width: 1100px;
height: 50px;
background-color: black;
margin-bottom: 10px;
padding-top: 10px;
}
ul li{
display: inline;
/*此句表示显示到一行去*/
color: white;
}
#clear{
clear: both;
}
#product{
border: 0px solid red;
width: 100%;
height: 600px;
}
#product_top{
border: 0px solid blue;
width: 100%;
height: 50px;
padding-top: 15px;
}
#product_bottom{
border: 0px solid green;
width: 100%;
height: 532px;
}
#product_bottom_left{
border: 0px solid red;
width: 200px;
height: 532px;
float: left;
}
#product_bottom_right{
border: 0px solid blue;
width: 896px;
height: 532px;
float: left;
}
#big{
border: 0px solid red;
width: 445px;
height: 263px;
float: left;
}
.small{
border: 0px solid blue;
width: 147px;
height: 263px;
float: left;
/*让里面文本居中显示*/
text-align: center;
}
#buttom{
text-align: center;
}
a{
text-decoration: none;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<script>
$(function(){
//1.书写显示广告图片的定时操作
time = setInterval("showAd()",3000);
});
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片，让其显示
//$("#img2").show(1000);

//滑动方式
//$("#img2").slideDown(5000);

//变暗变明方式
$("#img2").fadeIn(5000);

//4.清除显示图片定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",3000);
}

function hiddenAd(){
//6.获取隐藏图片的定时操作，让其隐藏
//$("#img2").hide();

//滑动效果
//$("#img2").slideUp(5000);

//变暗变明方式
$("#img2").fadeOut(5000);

//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script>
</head>
<body οnlοad="init()">
<div id="father">
<!--定时弹出广告图片位置-->
<img src="../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2"/>


<!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../../img/logo2.png" height="46px"/>
</div>
<div class="top">
<img src="../../img/header.png" height="46px" />
</div>
<div class="top" id="top">
&nbsp;&nbsp;<a href="#">登录</a>&nbsp;&nbsp;
<a href="">注册</a>&nbsp;&nbsp;
<a href="#">购物车</a>
</div>
</div>
<div id="clear">

</div>
<!--2.导航栏部分-->
<div id="menu">
<ul>
&nbsp;&nbsp;<li style="font-size: 20px;">首页</li>&nbsp;&nbsp;&nbsp;&nbsp;
<li>手机数码</li>&nbsp;&nbsp;&nbsp;&nbsp;
<li>家用电器</li>&nbsp;&nbsp;&nbsp;&nbsp;
<li>数码箱包</li>&nbsp;&nbsp;&nbsp;&nbsp;
<li>孕婴保健</li>&nbsp;&nbsp;&nbsp;&nbsp;
<li>汽车产品</li>
</ul>
</div>
<!--3.轮播图-->
<div id="">
<img src="../../img/1.jpg" width="100%" id="img1"/>
</div>
<!--4.最新商品-->
<div id="product">
<div id="product_top">
&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-size: 25px;">最新商品</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="../../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#">
<img src="../../img/middle01.jpg" width="100%" height="100%" />
</a>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
</div>

</div>

</div>
<!--5.广告图片-->
<div id="">
<img src="../../img/ad.jpg" width="100%"height="100%" />
</div>
<!--6.热门商品-->
<div id="">
&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-size: 25px;">热门商品</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="../../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#">
<img src="../../img/middle01.jpg" width="100%" height="100%" />
</a>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
</div>
<!--7.广告图片-->
<div id="">
<img src="../../img/footer.jpg" width="100%"/>
</div>
<!--8.版权信息与友情链接-->
<div id="buttom">
<a href="#">关于我们</a>&nbsp;
<a href="#">联系我们</a>&nbsp;
<a href="#">招贤纳士</a>&nbsp;
<a href="#">法律声明</a>&nbsp;
<a href="#">友情链接</a>&nbsp;
<a href="#">支付方式</a>&nbsp;
<a href="#">配送方式</a>&nbsp;
<a href="#">服务声明</a>&nbsp;
<a href="#">广告声明</a>&nbsp;
<p>
Copyright @2005-2016 &nbsp;传智商城&nbsp;版权所有
</p>
</div>
</div>
</body>
</html>

huicooling
关注
  • 4
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery实现简易商城系统
weixin_45539338的博客
06-23 535
使用jQuery实现简易商城系统
jquery实现购物商城
12-21
可以很好的了解jsp，学习的好资料
基于jQuery的在线商城设计与实现.zip
12-30
该网页包括了十一个页面，具体如下： Index.html（首页）、reg.html（注册页面）、login.html(登录页面)、about.html(关于页面)、info.html(提交订单信息)、member.html(个人信息)、message.html（留言页面）、payply.html(付款页面)、shopcar.html(购物车页面)、Product.html(商品列表页)、pwd.html(管理密码页面)，
JQuery实现的购物网站
09-15
JQuery UI 实现的购物网站,希望能给你带来方便。
jquery实现的购物网站
05-10
这是一个用jquery实现的购物网站。本网站很小很简单，适合初学者学习css+div布局、jquery和JSTL标签。
jquery导航菜单制作红色商城导航下拉菜单样式代码
11-19
本文将深入探讨如何使用jQuery技术来创建一个红色商城风格的导航下拉菜单，以提升用户体验和网站的视觉吸引力。 首先，jQuery是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画效果。在...
使用jQuery高效制作网页
12-04
在jQuery中，你可以用一行代码实现原本需要大量JavaScript代码才能完成的功能，大大提高了开发效率。 1. **选择器**：jQuery的选择器功能强大，支持CSS1-CSS3的选择器语法，以及自定义的选择器。例如，`$("#id")`...
Web课程设计使用Jquery完成一个旅游景点的主页设计
最新发布
05-29
Web课程设计使用Jquery完成一个旅游景点的主页设计 工具HBuilder X，使用学到的知识html+css+JavaScript设计一。 内容概要：使用Jquery完成一个站点的主页设计，该页面中主要包含导航栏，轮播，主题内容和页脚这几个...
jQuery制作Loading动画特效特效代码
03-20
这个“jQuery制作Loading动画特效特效代码”就是一个很好的解决方案，它能为你的网站增添专业且吸引人的加载效果。 jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和...
jQuery购物网页经典制作案例
11-26
在本篇《jQuery购物网页经典制作案例》中，我们将探讨如何使用jQuery库来构建一个具有交互功能的购物网页。此实例主要关注“今日团购模块”的设计，通过HTML、CSS和JavaScript来实现。以下是对关键知识点的详细说明...
完整jquery实现的购物网站页面
10-25
非常适合css,html,js ,jquery初学者的实例代码，代码分类明确清晰
jQuery+CSS3实现适用商城商品列表相册源码
08-26
实现了适应于各大商城使用的商品列表代码，该段代码最大的特效在于，鼠标悬浮商品图片上时，图片的外框会发生变化。本段代码兼容目前最新的各类主流浏览器。
用jquery mobile编写的一个购物商城，可以实现基本的购买功能.zip
01-01
用Jquery mobile编写的一个简单的购物商城小网站，可以实现简单的购物功能，可以用来交自己的期末作业 ，后续还有更新，如果有好的建议可以联系我。
Jquery购物网站
07-02
Jquery购物网站源码，一个适用的例子
商城后台管理系统HTML+css+jquery
06-30
一个非常完善的后台管理系统前端源码，使用HTML+css+jQuery开发。
基于jQuery的在线创意商城的设计与实现【附源码】
小宝的博客
05-25 334
该项目是一个专门卖家装家饰的商城，主要功能模块分为首页、商品分类、个人中心、订单中心、购物车功能以及在线购买等一条龙服务。用户能够足不出户实现在线购买家装家饰用品，可以随时随地浏览商品信息、加入购物车、在线购买、编辑个人资料等，页面采用Html,CSS, 、JQuery，Swipper.js、SuperSlide.js等插件和技术，很好的实现了商城的主要功能。基于jQuery的在线创意商城设计与实现。
jQuery实现简易商城系统项目实操详解
Free雅轩的博客
07-17 860
全选
基于jQuery的在线商城设计与实现
小宝的博客
12-30 8094
#1 网站需求分析 1.1 主体说明 该网页包括了十一个页面，具体如下： Index.html（首页）、reg.html（注册页面）、login.html(登录页面)、about.html(关于页面)、info.html(提交订单信息)、member.html(个人信息)、message.html（留言页面）、payply.html(付款页面)、shopcar.html(购物车页面)、Product.html(商品列表页)、pwd.html(管理密码页面)， 图1.1 网页HTML文件 网站中Css文件夹为
jquery之商城菜单
weixin_34367845的博客
02-07 188
实现效果：悬浮总菜单，显示分类菜单，移走隐藏总菜单，悬浮分类菜单，显示商品种类，移走隐藏商品种类和分类菜单，悬浮商品种类，显示商品种类和分类菜单，移走隐藏商品菜单和分类菜单。 代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8...
理解与使用jQuery：一份基础手册
"jQuery_使用手册.pdf" jQuery 是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。本手册详细介绍了jQuery的使用方法，旨在帮助初学者快速掌握这一强大的工具。 1. 核心部分 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值