商品展示框

最新推荐文章于 2024-04-03 09:09:06 发布
最新推荐文章于 2024-04-03 09:09:06 发布
阅读量320 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43618136/article/details/104335899
版权

商品展示框

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .wrapper {
      width: 298px;
      height: 248px;
      margin: 100px auto 0;
      border: 1px solid pink;
      overflow: hidden;
    }

    #left, #center, #right {
      float: left;
    }

    #left li, #right li {
      background: url(images/lili.jpg) repeat-x;
    }

    #left li a, #right li a {
      display: block;
      width: 48px;
      height: 27px;
      border-bottom: 1px solid pink;
      line-height: 27px;
      text-align: center;
      color: black;
    }

    #left li a:hover, #right li a:hover {
      background-image: url(images/abg.gif);
    }

    #center {
      border-left: 1px solid pink;
      border-right: 1px solid pink;
    }
  </style>
  <script src="jquery-1.12.2.js"></script>
  <script>


    //.index()方法---->当前这个元素的索引
    //:eq(索引值)---->选择器---对应索引的元素


    //页面加载事件
    $(function () {
      
      //左边的ul中的li
      $("#left>li").mouseenter(function () {
        //先获取当前li的索引值
        var index=$(this).index();

        //先隐藏所有的li
        $("#center>li").hide();//隐藏
        //设置某个li显示
        //$("#center>li:eq(索引值)")---->对应的li标签
        //显示当前的对应的li即可
        $("#center>li:eq("+index+")").show();

      });
      
      //右边的ul中的li
      $("#right>li").mouseenter(function () {
        //先获取当前li的索引值
        var index=$(this).index()+9;

        //先隐藏所有的li
        $("#center>li").hide();//隐藏
        //设置某个li显示
        //$("#center>li:eq(索引值)")---->对应的li标签
        //显示当前的对应的li即可
        $("#center>li:eq("+index+")").show();

      });
    });

  </script>
  <script>

    //        //页面加载
    //        $(function () {
    //            //左边的li标签的进入事件
    //            $("#left>li").mouseenter(function () {
    //                //获取当前的li标签的索引
    //                var index=$(this).index();//该方法是获取当前的这个元素的索引
    //                //隐藏中间id为center中所有的li标签
    //                $("#center>li").hide();
    //                $("#center>li:eq("+index+")").show();
    //            });
    //            $("#right>li").mouseenter(function () {
    //                //获取当前的li标签的索引
    //                var index=$(this).index()+9;//该方法是获取当前的这个元素的索引
    //                //隐藏中间id为center中所有的li标签
    //                $("#center>li").hide();
    //                $("#center>li:eq("+index+")").show();
    //            });
    //        });
  </script>
</head>
<body>
<div class="wrapper">
  <ul id="left">
    <li><a href="#">女靴</a></li>
    <li><a href="#">雪地靴</a></li>
    <li><a href="#">冬裙</a></li>
    <li><a href="#">呢大衣</a></li>
    <li><a href="#">毛衣</a></li>
    <li><a href="#">棉服</a></li>
    <li><a href="#">女裤</a></li>
    <li><a href="#">羽绒服</a></li>
    <li><a href="#">牛仔裤</a></li>
  </ul>
  <ul id="center">
    <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
  </ul>
  <ul id="right">
    <li><a href="#">女包</a></li>
    <li><a href="#">男包</a></li>
    <li><a href="#">登山鞋</a></li>
    <li><a href="#">皮带</a></li>
    <li><a href="#">围巾</a></li>
    <li><a href="#">皮衣</a></li>
    <li><a href="#">男毛衣</a></li>
    <li><a href="#">男棉服</a></li>
    <li><a href="#">男靴</a></li>
  </ul>
</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }

    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }

    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }

    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }

    .products .main {
      float: left;
      display: none;
    }

    .products .main.selected {
      display: block;
    }

    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }

  </style>
  <script src="jquery-1.12.2.js"></script>
  <script>

    //有些事现在不做,以后就没有机会了
    //有些事现在不做,是为了以后做的更好

  </script>
  <script>


    //页面加载的事件
    $(function () {
      //获取所有的li标签,添加鼠标进入的事件
      $(".tab>li").mouseenter(function () {
        //设置当前鼠标进入的li添加类样式,同时移除当前li的所有兄弟元素的类样式
        $(this).addClass("active").siblings("li").removeClass("active");
        //设置鼠标进入的li对应的div的类样式
        //获取当前鼠标进入的li的索引值
        var index=$(this).index();
        //获取下面的所有的div
        $(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
      });
    });
  </script>

</head>
<body>
<div class="wrapper">
  <ul class="tab">
    <li class="tab-item active">国际大牌<span>◆</span></li>
    <li class="tab-item">国妆名牌<span>◆</span></li>
    <li class="tab-item">清洁用品<span>◆</span></li>
    <li class="tab-item">男士精品</li>
  </ul>
  <div class="products">
    <div class="main selected">
      <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
    </div>
  </div>
</div>

</body>
</html>
广东话的蛇皇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
产品展示模版html 好用
07-07
这个是产品得模板，有相关得展示，值得你拥有 ！这个是产品得模板，有相关得展示，值得你拥有 ！
html -＞ 简易网页框
sinat_15355869的博客
08-09 196
html -> 简易网页框
html 文本展示框,电梯内专用的广告展示框的制作方法
weixin_36072221的博客
06-11 466
电梯内专用的广告展示框的制作方法【专利摘要】本实用新型公开了一种电梯内专用的广告展示框，包括底板和铰接在底板上的压框，所述压框由边框和固定在边框内的玻璃板构成，所述玻璃板上部为透明玻璃，下部为镜子，所述底板底面固定有磁石和吸盘。本实用新型通过在展示框的压框上增加镜子，当人们乘坐电梯时就可以很方便的看到自己的仪容，底板底面固定有磁石和吸盘，可以很方便的固定在电梯轿厢壁上。本实用新型结构简单，方便实用...
html全景三维_适合商品展示
04-19
html全景三维_适合商品展示，可360°旋转
14_按类别分页展示商品
方圆几里
04-10 683
按类别分页展示商品 步骤分析 代码实现 1）步骤分析 在菜单上点击一个分类:< a href="${path}/product/page?cid=xxx&currPage=xxx">…< /a> page操作： 接收cid类别编写，currPage页码和设置每页显示的条数 调用service返回一个PageBean(list,currPage,pageSi...
沃尔玛规范陈列柜_商品陈列柜
01-05
### 沃尔玛规范陈列柜之商品陈列柜关键技术知识点 #### 一、概述 本文旨在解析沃尔玛关于规范陈列柜的技术要求与规范，主要聚焦于国际商品冷藏柜的标准及其实施细节。通过对标题“沃尔玛规范陈列柜_商品陈列柜”及...
展示储物柜3D模型
07-15
展示柜则是一种专门用于展览和展示商品的储物柜，通常具有透明的玻璃门或开放式的结构，以突出展品的视觉吸引力。3D展示柜模型不仅需要考虑储物功能，还要注重设计美学，例如灯光效果、材质质感以及整体布局，这些都...
店铺展示柜模型
01-01
【店铺展示柜模型】是一种专为商业店铺设计的三维模型，用于模拟和呈现商品展示柜的实际效果。在零售业中，展示柜是吸引顾客、展示商品的重要元素，因此设计需兼顾美学与实用性。设计师通常会利用3D建模软件来创建...
商场商品上柜管理规定
12-21
应遵循“易见、易取”原则，将热门商品放置在显眼位置，新商品或促销商品可设置特殊展示区。同时，商品陈列要考虑视觉美感，通过色彩搭配、层次布局提升整体店面形象。 四、库存管理 库存管理关乎商品流动速度和...
卷烟商品陈列PPT课件.ppt
08-20
首先，合理的陈列能够展示商品，吸引顾客的注意力。例如，故事中7-11店铺的女孩将酸奶移到盒饭销售柜旁，加上精心制作的POP广告，成功提升了酸奶的销量。这说明商品的位置、展示方式以及与周围环境的协调性对销售...
jQuery实现无刷新分页列表点击缩略图展示详细信息相册源码
08-26
实现了左侧无刷新分页列表，右侧显示点击左侧缩略图后所得到的大图及文字的详细信息效果代码，此段代码适应于所有需要此类效果的网页使用。本段代码兼容目前最新的各类主流浏览器。
仿百度弹出信息展示框源码
11-11
百度点击地图展示信息点信息，可进行附近查找、到这里去、从这里出发等导航查询
Html——选项框、立方体与选项框，满满干货指导
最新发布
2401_84093899的博客
04-03 843
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载朋友，同时减轻大家的负担。**[外链图片转存中…(img-R43H45Jg-1712106504037)][外链图片转存中…(img-WgpZtREd-1712106504038)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-D7BmjmYh-1712106504038)]
元素hover 出现边框
sedfghjwish77_的博客
12-14 293
hover -- 出现border
商品信息的分页实现
JH_OMEH的博客
05-25 1469
首先准备一个vo类（value object）（声明：以下为主要所需代码）package cn.jhome.domain;import java.util.ArrayList;import java.util.List;public class PageBean&lt;T&gt; { // 当前页码 private int currentPage; // 每页显示的商品数 private int ...
html展示框中出现代码是什么,前端每日实战：47# 视频演示如何用纯 CSS 创作一个蝴蝶标本展示框...
weixin_33375514的博客
07-04 130
效果预览按下右侧的“分博累发口小定逻间框加题览果些屏洁动理应点击预览”按钮可以在当前页面预览，点击链接可以全屏预圈件浏用是刚。它学编套互学工久不都维逻直数构过曾结里总经网屏广明果名览。可交互视频教遇新是直朋能到程此视频是可大享上。是发了概开程态间些告人屏果会区。以交互的，你可以随时暂停视频，编辑视频中的代码微和二第说，班。都年很过过事发工开宗定据发指互数个遍前互就。请用 ch大享上。是发了概开程态...
疫情期间闲来无事，我自制了一个按钮展示框特效来展示我的博客
一键难忘的博客
08-08 428
这几天博主这的疫情比较严重，小区都封了，在家闲来无事，作为一个后端程序员的我，前端技术菜的一批，但是最近有写一个个人技术，博客情况和项目介绍的前端展示特效，让别人可以快速的了解我，对于前端知识之前也接触过一些基础的技术栈，勇敢的我决定还是要尝试一下，对于按钮展示框，我自己从0到1的写了一个，用到的技术就是基础的html+css+JavaScript+jqurey。代码如下，先设计一个大的盒子，为了好看，我们可以设计一个半角过渡：...
HTML中边框样式、内外边距、盒子模型尺寸计算（附代码图文示例）【详解】
Jin_Xiang123的博客
12-18 5715
本篇文章主要介绍HTML中边框样式、内外边距、盒子模型尺寸计算以及部分理论知识 边框基本样式是指在HTML和CSS中设置元素的边框的样式。常见的边框样式包括实线边框、虚线边框、双线边框、边框颜色、边框粗细等。边框颜色可以用于控制边框的外观和视觉效果，例如与元素的背景色形成对比，或者与其他元素产生视觉分隔。通过调整边框颜色的值，可以灵活地满足不同的设计需求和风格要求。边框粗细可以用于控制边框的外观和视觉效果，例如细边框可以给元素提供轻盈的外观，而粗边框则可以给元素增加强烈的视觉分割效果。通过调整边框粗细的值，
HTML 弹出框功能
热门推荐
weixuan_的博客
04-12 1万+
HTML 弹出框功能
建材家居商品图片处理秘籍：Photoshop实战教程
首先，课程强调了商品图片上传时的注意事项，包括去除价格标签，保持产品文字清晰，避免多个产品同时展示，统一规格符号和单位（如瓷砖的元/片，橱柜的元/延米等）。对于厨电产品，要求提供具体型号组合，如烟机、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值