dd网商品列表

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量260 收藏
点赞数
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/127455912
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品展示</title>
  <style>
    .ul1>li{
      margin-bottom: 12px;
    }
    .span1{
      margin-left: 10px;
    }
  </style>
</head>
<body>
<div style="position: absolute;left: 15%;display: inline-block;width: 70%">
  <!--style="" 在标签上添加样式-->
  <div style="border: 1px black;border-style: solid">
    <span>你好！欢迎光临当当网[登录|免费注册]</span>
    <span style="float: right">
    <span><img src="img/dd_header_shop.gif"/>购物车|</span>
    <span>个性化推荐|</span>
    <span>礼品卡|</span>
    <span>团购|</span>
    <span>我的当当<img src="img/dd_arrow_down.gif"/>|</span>
    <span>帮助</span>
    </span>
  </div>
  <div>
    <img src="img/dd_logo.gif"/>
    <span style="position: relative;left: 50px;">
        <span style="background-color: beige;display: inline-block;height: 30px">首页 | 图片 | 音乐 | 影视 | 运动 | 服饰 | 家具 | 美妆 | 婴儿 | 食品 | 数码家</span>
    <span>
        <span class="span1">商店街</span>
    <span class="span1">促销</span>
    <span class="span1">当当<img src="img/dd_header_top.png"></span>
    <span class="span1" style="margin-left: 20px">社区</span>
    <span class="span1" style="margin-left: 40px">在线读书</span>
    </span>
    </span>
  </div>
  <div style="background-color: orange;text-align: center;color: white;height: 30px"><span>小说 | 青春 | 历史 | 少儿 | 旅游 | 期刊 | 图书畅销榜 | 新书热卖榜 | 特价书 | 图书促销 | 所有图书分类</span></div>
  <div style="background-color: aliceblue;height: 30px">
    <div style="display: inline-block;position: relative;left: 30px;">
      <input type="text" />
      <input type="button" value="在图书中搜索"/>
      <img src="img/dd_arrow_right.gif"/>
      <span>
            高级搜索 |
            <img src="img/dd_header_search_top.jpg"/>
            雅思 | 建造师 | 中里巴人 | 注会 | 新概念英语 | 更多》
        </span>
    </div>
  </div>
  <div><img src="img/dd_index_top_adver.jpg" width="100%"/> </div>
  <div>您现在的位置 :当当图书 >>小说 >>财经</div>
  <div>
    <div style="display: inline-block;width: 20%;position: relative;top: -630px">
      <div style="background-color: red;color: white">
        <span>浏览同级分类</span>
      </div>
      <div style="background-color: khaki;margin-top: -15px">
        <ul class="ul1">
          <li>中国当代小说(13880)</li>
          <li>中国近代小说(640)</li>
          <li>中国古典小说(1547)</li>
          <li>四大名著(696)</li>
          <li>港澳台小说(838)</li>
          <li>中国当代小说(13880)</li>
          <li>中国近代小说(640)</li>
          <li>中国古典小说(1547)</li>
          <li>四大名著(696)</li>
          <li>港澳台小说(838)</li>
          <li>中国当代小说(13880)</li>
          <li>中国近代小说(640)</li>
          <li>中国古典小说(1547)</li>
          <li>四大名著(696)</li>
          <li>港澳台小说(838)</li>
        </ul>
      </div>
      <div style="margin-top: -20px">
        <img src="img/product_02.gif" width="215px"/>
      </div>
    </div>
    <div style="display: inline-block;width: 79%;border-style: solid;border-color: khaki;border-width: 1px">
      <div style="background-color: coral ">
        <span>排列方式</span>
        <img src="img/dd_arrow_right.gif"/>
        <select>
          <option>按销量 降序</option>
        </select>
        <img src="img/product_icon_01.gif"/>
        <img src="img/product_icon_02.gif"/>
        <img src="img/product_icon_03.gif"/>
        <img src="img/product_icon_04.gif"/>
        <span>每页显示的数量</span>
        <img src="img/dd_arrow_right.gif"/>
        <img src="img/product_icon_20.gif"/>
        <img src="img/product_icon_40.gif"/>
        <div style="display: inline-block;float: right">
          <img src="img/product_page_up.gif"/>
          第1页
          <img src="img/product_page_down.gif"/>
        </div>
      </div>
      <div>
        <div style="margin-top: 10px">
          <div style="display: inline-block;width: 20%">
            <img src="img/product_list_01.jpg" style="position: relative;top: -50px;left: 40px"/>
          </div>
          <div style="display: inline-block;width: 79%">
            <span>私募（首部披露资本博弈秘密的金融小说）</span>
            <hr/>
            <span>顾客评分:</span>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_gray.gif"/>
            <div>作者：郭现杰著</div>
            <div>出版社：花山文艺出版社</div>
            <div>出版时间：2009年08月</div>
            <div>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金一金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。 殊料，以王雨龙为首的私募基金-鑫利投资背信弃义，导致金鼎投资惨败。以致...</div>
            <div style="float: right"><del>￥32.00</del><span class="span1" style="color: red">￥18.90</span><span class="span1">折扣:95折</span><span class="span1">节省：</span><span class="span1">￥13.10</span><span class="span1"><img src="img/product_buy_01.gif"/> </span> </div>
            <div><img src="img/product_buy_02.gif"/> </div>
          </div>
        </div>
        <div >
          <div style="display: inline-block;width: 20%">
            <img src="img/product_list_01.jpg" style="position: relative;top: -50px;left: 40px"/>
          </div>
          <div style="display: inline-block;width: 79%">
            <span>私募（首部披露资本博弈秘密的金融小说）</span>
            <hr/>
            <span>顾客评分:</span>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_gray.gif"/>
            <div>作者：郭现杰著</div>
            <div>出版社：花山文艺出版社</div>
            <div>出版时间：2009年08月</div>
            <div>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金一金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。 殊料，以王雨龙为首的私募基金-鑫利投资背信弃义，导致金鼎投资惨败。以致...</div>
            <div style="float: right"><del>￥32.00</del><span class="span1" style="color: red">￥18.90</span><span class="span1">折扣:95折</span><span class="span1">节省：</span><span class="span1">￥13.10</span><span class="span1"><img src="img/product_buy_01.gif"/> </span> </div>
            <div><img src="img/product_buy_02.gif"/> </div>
          </div>
        </div>
        <div>
          <div style="display: inline-block;width: 20%">
            <img src="img/product_list_01.jpg" style="position: relative;top: -50px;left: 40px"/>
          </div>
          <div style="display: inline-block;width: 79%">
            <span>私募（首部披露资本博弈秘密的金融小说）</span>
            <hr/>
            <span>顾客评分:</span>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_gray.gif"/>
            <div>作者：郭现杰著</div>
            <div>出版社：花山文艺出版社</div>
            <div>出版时间：2009年08月</div>
            <div>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金一金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。 殊料，以王雨龙为首的私募基金-鑫利投资背信弃义，导致金鼎投资惨败。以致...</div>
            <div style="float: right"><del>￥32.00</del><span class="span1" style="color: red">￥18.90</span><span class="span1">折扣:95折</span><span class="span1">节省：</span><span class="span1">￥13.10</span><span class="span1"><img src="img/product_buy_01.gif"/> </span> </div>
            <div><img src="img/product_buy_02.gif"/> </div>
          </div>
        </div>
        <div>
          <div style="display: inline-block;width: 20%">
            <img src="img/product_list_01.jpg" style="position: relative;top: -50px;left: 40px"/>
          </div>
          <div style="display: inline-block;width: 79%">
            <span>私募（首部披露资本博弈秘密的金融小说）</span>
            <hr/>
            <span>顾客评分:</span>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_gray.gif"/>
            <div>作者：郭现杰著</div>
            <div>出版社：花山文艺出版社</div>
            <div>出版时间：2009年08月</div>
            <div>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金一金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。 殊料，以王雨龙为首的私募基金-鑫利投资背信弃义，导致金鼎投资惨败。以致...</div>
            <div style="float: right"><del>￥32.00</del><span class="span1" style="color: red">￥18.90</span><span class="span1">折扣:95折</span><span class="span1">节省：</span><span class="span1">￥13.10</span><span class="span1"><img src="img/product_buy_01.gif"/> </span> </div>
            <div><img src="img/product_buy_02.gif"/> </div>
          </div>
        </div>
        <div>
          <div style="display: inline-block;width: 20%">
            <img src="img/product_list_01.jpg" style="position: relative;top: -50px;left: 40px"/>
          </div>
          <div style="display: inline-block;width: 79%">
            <span>私募（首部披露资本博弈秘密的金融小说）</span>
            <hr/>
            <span>顾客评分:</span>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_gray.gif"/>
            <div>作者：郭现杰著</div>
            <div>出版社：花山文艺出版社</div>
            <div>出版时间：2009年08月</div>
            <div>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金一金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。 殊料，以王雨龙为首的私募基金-鑫利投资背信弃义，导致金鼎投资惨败。以致...</div>
            <div style="float: right"><del>￥32.00</del><span class="span1" style="color: red">￥18.90</span><span class="span1">折扣:95折</span><span class="span1">节省：</span><span class="span1">￥13.10</span><span class="span1"><img src="img/product_buy_01.gif"/> </span> </div>
            <div><img src="img/product_buy_02.gif"/> </div>
          </div>
        </div>
        <div>
          <div style="display: inline-block;width: 20%">
            <img src="img/product_list_01.jpg" style="position: relative;top: -50px;left: 40px"/>
          </div>
          <div style="display: inline-block;width: 79%">
            <span>私募（首部披露资本博弈秘密的金融小说）</span>
            <hr/>
            <span>顾客评分:</span>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_red.gif"/>
            <img src="img/star_gray.gif"/>
            <div>作者：郭现杰著</div>
            <div>出版社：花山文艺出版社</div>
            <div>出版时间：2009年08月</div>
            <div>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金一金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。 殊料，以王雨龙为首的私募基金-鑫利投资背信弃义，导致金鼎投资惨败。以致...</div>
            <div style="float: right"><del>￥32.00</del><span class="span1" style="color: red">￥18.90</span><span class="span1">折扣:95折</span><span class="span1">节省：</span><span class="span1">￥13.10</span><span class="span1"><img src="img/product_buy_01.gif"/> </span> </div>
            <div><img src="img/product_buy_02.gif"/> </div>
          </div>
        </div>
        <div style="float: right">
          <span>
            <img src="img/product_page_up.gif">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">...</a>
            <a href="#">14</a>
            <a href="#">15</a>
            <a href="#">16</a>
            <img src="img/next.gif">
            <span>跳转到</span>
            <input style="width: 10px" type="text">
            <span>页</span>
            <img src="img/OK.gif">
          </span>
        </div>
      </div>

      </div>
    <div style="text-align: center;margin-top: 20px">公司简介 | 诚征英才 |网站联盟 | 百货招商 | 交易条款</div>
    </div>
  </div>

<div style="margin-left: 20%;position:relative;top:1600px">
        <span>Copyfight(c)当当网 2004-2009， All Rights Reserved
            <img src="img/validate.gif"/>
            京ICP证041189号 音像制作经营许可证 京音网8号
        </span>
</div>
</div>

</body>
</html>

qianmingmaoyao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实操：商品列表三级分类的实现方法
燚轩软件科技
08-06 6814
　　对于分类来说，一般包括一级分类，二级分类，三级分类，一般2级分类是比较好做的，大部分网站都是左边点击二级分类，右边显示相对应商品，这就要用到jquery技术了。下面就来为大家详细分析一下该如何实现吧。 　　首先把二级分类给全部遍历出来，Html代码如下： &lt;volist name='cate' id='vo'&gt;  &lt;li &lt;if condition="$Think....
淘宝商品列表以及商品详情数据抓取
冯大洋的博客
08-06 3801
前段时间老师让我爬取淘宝的商品列表以及其商品详情数据，期间遇到了很多问题。最困难的就是淘宝的价格数据是以Ajax异步加载的，这些数据暂时还没有能力获取到。 下面介绍一下基本思路。 首先，通过抓取商品列表的商品ID获取商品的身份标识，然后根据商品ID跳转到具体的商品列表，对其他属性进行抓取。 观察两条商品列表的URL： https://s.taobao.com/search?q=帽...
淘宝直播间商品列表
不可幽禁落霞的博客
03-28 2853
{"api": "", "data": {"hotList": [], "itemList": [{"explained": "false", "goodsIndex": "25", "goodsList": [{"appPromActive": "false", "bulk": "false", "buyCount": "0", "createTime": "0", "duplicate": "true", "extendVal": {"atmosphere": "[]", "categoryLevelL
html列表表单实现商品分类,## HTML基础-列表标签/表格标签
weixin_36370128的博客
06-15 1354
## HTML基础-列表标签/表格标签# 列表标签(无序列表/有序列表/定义列表)# 表格标签# 单元格合并1.什么是列表标签列表标签的作用:给一堆数据添加列表语义,也就是告诉搜索引擎高速浏览器这一堆数据是一个整体2.HTML中列表标签的分类-无序列表(最多)(unordered list)-有序列表(最少)(ordered list)-定义列表(其次)(definition list)无序列表的...
python爬取京东商品列表信息
热门推荐
小月牙
10-30 2万+
爬遍电商之京东篇： 目标是爬取指定商品的商品列表信息，包括商品名，价格，评论数，店铺名 打开京东页面，随便搜一个笔记本，F12打开NetWork开始抓包，翻个3页，遇到断点就按F8执行，然后看到第一个返回内容的ajax请求,是返回了第1页的后30个商品,下面开头名一样的依次返回第2页前30个，第2页后30个，第3页前30个，第三页后30个…别问是怎么知道的，对比一下就行了 看看第一个a...
Bootstrap商品3列网格展示效果
ICode联盟
09-04 514
下载地址基于Bootstrap前端框架的商品网格布局样式，3列网格样式，可以很容易的改为4列、5列。当鼠标悬停在商品网格上，会出现其它小图标，比如加入购物车、星级等。 dd:
商品列表分页和排序功能实现
xyphf的博客
11-24 6208
本节我们实现商品列表的升降序、价格的过滤、商品列表的分页和loading功能 实现排序 既然要实现排序，必然要获取一个排序的参数，通过req.param()来获取前端传过来的参数 let sort = req.param("sort"); let = params = {}; let goodsModel = Goods.find(params); 将前端升序或降序的参数传递过来 声...
制作仿京东商城-商品列表商品筛选功能
在线学习web前端开发教程
01-04 1362
这次实现一个仿京东商城-商品列表商品筛选的功能 一、html代码 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> &l...
vue项目实战-01商品列表模块
言凡的博客
08-15 4165
商品列表模块实现 GitHub地址 商品列表组件拆分 Header组件 Footer组件 面包屑组件 将页面拆分成几个部分，每个部分封装成一个组件； 其他页面可以共用这些组件，这些组件放到src&gt;component目录中； 商品列表可以是一个单独的页面，所以将其放到src&gt;views目录中； src&gt;assets&gt;css 中存放组件相关的静态资源；小图片会...
商品列表筛选功能(完整功能)
Twinkle的博客
06-08 6298
html:&lt;div class="product-list-main"&gt; &lt;ul class="product-list-wrap" id="ul_select"&gt; &lt;li class="select-result"&gt; &lt;dl id="dl_result" class="clearfix"&a
DD DT DL标签使用示例
09-28
在这个例子中，`<dt>` 标签用于显示诸如“商品名称”、“商品简介”等标题，而 `<dd>` 标签则包含对应的具体内容，如商品优惠、名称、简介等。通过CSS样式，可以控制各个元素的排版，使页面看起来更专业、更易读。 ...
dl,dt,dd在什么时候适合使用呢？
09-28
2. **产品目录**：在电商网站上，展示商品列表时，可以用`<dt>`显示商品名称，用`<dd>`展示价格、规格、库存等详细信息。 3. **电影/书籍列表**：在影评或书评网站上，可以使用`<dt>`列出作品名称，`<dd>`包含简介、...
常用的HTML5列表标签
12-14
无序列表常用于显示新闻列表、商品目录或创建导航菜单。 2. 有序列表（Ordered List, `<ol>`） 有序列表则用于表示一组有特定顺序的数据项。与无序列表类似，`<ol>`标签包围`<li>`标签，但列表项会自动编号。这有助...
Bootstrap CSS布局之列表
01-19
定义列表dl dt dd 水平定义列表dl-horizontal ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } 普通列表ul li 有序列表ol li 去点列表class=”list-...
Vue中的高频内置指令：v-text、v-html、v-cloak、v-once、v-pre
PleaSure乐事的博客
08-11 947
Vue——v-text、v-html、v-cloak、v-once、v-pre指令
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 707
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 458
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 507
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 264
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
div+dl+dt+dd结构
09-21
除了用于商品特点的展示，div dl dt dd结构还可以用于展示其他类型的列表，如学校课程和下拉菜单等。通过使用这种结构，可以使信息的展示更加清晰、有序，并且可以为用户提供更好的浏览和查找体验。 总之，div dl ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值