jQuery购物网页经典制作案例


Posted in Javascript onAugust 19, 2016

本文实例为大家分享了jQuery购物网页经典案例,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今日团购模块</title>
  <style type="text/css" rel="stylesheet">
    *{
      margin:0px ;
      padding:0px;
      font-size: 12px ;
    }
    #pruduce{
      width:948px ;
      background-color: darkgray;
    }
    .top{
      height:56px ;
      background: url("images/top.jpg") no-repeat 10px 10px ;
    }
    .main{
      text-align: center;
      height:308px ;
    }
    .box{
      width: 300px;
      height:280px;
      border:1px solid red;
      margin:0px 6px ;
      float: left;
      cursor:pointer;
    }
    dl{
      padding-top: 3px ;
 
    }
    dd{
      line-height: 30px ;
    }
    div.btprice_1{
      height:50px ;
      background: yellow url("images/bt1.jpg")no-repeat 5px 4px ;
    }
 
    div.btprice_2{
      height:50px ;
      background: yellow url("images/bt2.jpg")no-repeat 5px 4px ;
    }
    div.btprice_3{
      height:50px ;
      background: yellow url("images/bt3.jpg")no-repeat 5px 4px ;
    }
    .hoverstyle{
      background-color: darkblue;
      color: white;
    }
 
 
  </style>
  <script type="text/javascript " src="js/jquery-1.8.3.js"></script>
  <script language="JavaScript">
    $(document).ready(function () {
      $(".box dl").mouseover(function () {
        $(this).addClass('hoverstyle');
      });
      $(".box dl").mouseout(function () {
        $(this).removeClass('hoverstyle');
      });
 
    });
  </script>
</head>
<body>
<div id="pruduce">
   <div class="top"></div>
  <div class="main">
    <div class="box">
      <dl>
        <dt><img src="images/pic1.jpg" alt=""></dt>
        <dd>[包邮]亮点可移动儿童防身高帖(每个ID限20)</dd>
      </dl>
      <div class="btprice_1"></div>
    </div>
    <div class="box">
      <dl>
        <dt><img src="images/pic2.jpg" alt=""></dt>
        <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd>
      </dl>
      <div class="btprice_2"></div>
    </div>
    <div class="box">
      <dl>
        <dt><img src="images/pic3.jpg" alt=""></dt>
        <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
      </dl>
      <div class="btprice_3"></div>
    </div>
  </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
浅谈JavaScript字符集
May 22 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
Javascript实现字数统计
Jul 03 Javascript
跟我学习javascript的循环
Nov 18 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 #Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 #Javascript
js实现select选择框效果及美化
Aug 19 #Javascript
JavaScript面向对象编写购物车功能
Aug 19 #Javascript
javascript设计模式之module(模块)模式
Aug 19 #Javascript
JS实现六位字符密码输入器功能
Aug 19 #Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
终于听上了直流胆调频
2021/03/02 无线电
Zend公司全球首推PHP认证
2006/10/09 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
利用JS实现数字增长
2016/07/28 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python在不同层级目录import模块的方法
2016/01/31 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python读取properties配置文件操作示例
2018/03/29 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Django stark组件使用及原理详解
2019/08/22 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
个人简历自我评价范文
2014/02/04 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript