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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python之PyUnit单元测试实例
2014/10/11 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Python自动抢红包教程详解
2019/06/11 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
清洁工岗位职责
2014/01/29 职场文书
安全口号大全
2014/06/21 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
考试后的感想
2015/08/07 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL