前言

今天和大家分享的是商品列表子菜单的实现过程，这个应用在很多平台都有看到，感兴趣的小伙伴可以驻足翻阅一下~

一、结构分析

示例图：

结构的分析：

首先，我们在动手写之前还是先分析结构，大致可分为上下两个部分，下方可再细划

其次，分析我们所要实现的效果——当鼠标悬停在每个商品列表上时，产品详情会伴有过渡效果的弹出。

二、实现过程

1.HTML结构

代码如下（示例）：

  <!-- 外部容器 --><div class="wrap"><!-- 标题 --><div class="title"><span>大家都喜欢买的美容品</span></div><!-- 商品列表 --><ul class="goods-list"><li class="up-box"><a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜&nbsp;&nbsp;35ml</a><!-- 该项下拉框（产品详情） --><div class="down-box"><div class="downbox-inner"><a href="#"><img src="./image/icon-1.jpg" alt="菲奥娜水漾CC霜"><p class="price">¥<em>59.90</em> 最近13403人购买</p></a></div></div></li><li class="up-box"><a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜&nbsp;&nbsp;30ml</a><!-- 该项下拉框（产品详情） --><div class="down-box"><div class="downbox-inner"><a href="#"><img src="./image/icon-2.jpg" alt="菲奥娜水漾CC霜"><p class="price">¥<em>59.90</em> 最近13403人购买</p></a></div></div></li><li class="up-box"><a href="#"><span>3</span>菲奥娜水漾CC霜&nbsp;&nbsp;40g</a><!-- 该项下拉框（产品详情） --><div class="down-box"><div class="downbox-inner"><a href="#"><img src="./image/icon-3.jpg" alt="菲奥娜水漾CC霜"><p class="price">¥<em>59.90</em> 最近13403人购买</p></a></div></div></li><li class="up-box"><a href="#"><span>4</span>DHC蝶翠诗橄榄卸妆油&nbsp;&nbsp;200ml</a><!-- 该项下拉框（产品详情） --><div class="down-box"><div class="downbox-inner"><a href="#"><img src="./image/icon-4.jpg" alt="菲奥娜水漾CC霜"><p class="price">¥<em>59.90</em> 最近13403人购买</p></a></div></div></li><li><a href="#"><span>5</span>倩碧保湿洁肤水2号&nbsp;&nbsp;200ml</a></li><li><a href="#"><span>6</span>比度克细肤淡印霜&nbsp;&nbsp;30g</a></li><li><a href="#"><span>7</span>兰芝(LANEING)夜间修护锁水面膜&nbsp;&nbsp;80ml</a></li><li><a href="#"><span>8</span>SK-II护肤精华露&nbsp;&nbsp;80ml</a></li><li><a href="#"><span>9</span>欧莱雅青春密码活颜精华肌底液</a></li></ul></div>

2.CSS样式

代码如下（示例）：

     body {background-color: #eee7e1;}/* 外部容器样式设置 */.wrap {margin-top: 50px;margin-left: 50px;width: 340px;background-color: #ffffff;}/* 标题部分样式设置 */.title {width: 100%;height: 50px;line-height: 50px;background-color: #e9185a;}.title span {color: #ffffff;margin-left: 15px;font-size: 19px;}/* 商品列表样式设置 */.goods-list>li {height: 39px;line-height: 39px;border-bottom: 2px dashed #a8a5a5;}li span {display: inline-block;width: 36px;height: 36px;line-height: 36px;background-color: #373b3c;border-radius: 50%;text-align: center;color: #ffffff;font-weight: bold;margin-left: 2px;margin-right: 15px;}li:hover span {background-color: #e9185a;}li a {color: #666666;font-size: 15px;}li:hover a {color: #e9185a;}/* 每个li下的下拉框（产品详情）样式设置*//* 将每个li多余的部分隐藏 */.up-box {overflow: hidden;}.up-box:hover {height: 240px;transition: all .5s;}.downbox-inner {width: 190px;margin: 0 auto;}.downbox-inner img {margin: 0 15px;}.downbox-inner p {margin-top: -10px;margin-left: 8px;color: #e9185a}.downbox-inner em {margin: 0 2px;}

总结

以上就是今天所要分享的内容，希望可以帮助到看到这篇文章的你，依旧真挚祝福你平安喜乐，晚安~

CSS——商品列表子菜单的实现相关推荐

HTML5+CSS设计导航栏及其子菜单
HTML界面设计新建一个web项目,在<body></body>标签中创建一个<div></div>,指定class属性="header&q ...
css实现列表下拉菜单_逐行：点击打开下拉列表和菜单的高级CSS技巧
css实现列表下拉菜单 by David Piepgrass 由David Piepgrass 逐行:点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS t ...
html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式属性有很多可以自己去试:circle,disc,decimal ...
HTML .CSS实现商品列表
一.知识点 a.ul无序列表 ol有序列表 dl定义列表 b.css精灵图精灵图(通常被解释为css图像拼合.css贴图定位.css图片精灵.css雪碧图)是一种网页图片应用处理方式.其实就是就是把 ...
html生成无序列表,CSS无序列表创建的标准菜单效果代码
本文实例讲述了CSS无序列表创建的标准菜单效果代码.分享给大家供大家参考.具体如下: 这是一款用LI无序列表创建的标准CSS菜单,这是国外一个网站的CSS制作教程,这里重新整理了一下,去除了广告代码, ...
CSS实战项目之商品列表
HTML代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
android 两列菜单,【Android】实战开发之ListView同一个item显示2列的实现方法(仿2列商品列表)...
Android实战开发中,ListView控件用途十分广泛,各种自定义控件多种多样.当项目要求实现一个2列的商品列表形式的界面,我们首先肯定想到用ListView,然后我们可以使用百度的自定义List ...
jQuery实例——仿京东仿淘宝列表导航菜单
以前看着京东,淘宝的导航做的真好,真想哪一天自己也能做出来这么漂亮功能全的导航菜单.今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样. 功能介绍: 1.鼠标停留导航: ...
美多商城之商品(商品列表页)
四.商品列表页 4.1 商品列表页分析 4.1.1. 商品列表页组成结构分析 1.商品频道分类已经提前封装在contents.utils.py文件中,直接调用即可. 2.面包屑导航可以使用三级分类 ...

CSS——商品列表子菜单的实现

文章目录

前言

一、结构分析

示例图：

结构的分析：

二、实现过程

1.HTML结构

2.CSS样式

总结

CSS——商品列表子菜单的实现相关推荐

最新文章

热门文章