仿淘宝商品界面（html div+css)
2024-06-11 05:44:04
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>仿淘宝的产品分类菜单</title><style>body {text-align:center;font-family:"宋体"; margin:0; padding:0;font-size:12px; color:#000;overflow-x:hidden}div,form,img,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;text-align:left;}.Nav{border-top:2px solid #c00}.Nav .Navlf{width:358px;float:left;display:inline;margin:0px;padding:0px;border:1px solid #d8d8d8;border-top:none;border-left:none;position:relative;}.Navlf .Navleft{width:350px;float:left;display:inline;height:450px;margin:0px;margin-left:2px;padding:0px;}.Navleft a:visited{color:#333}.Nav_head1{margin:0px;position:relative;z-index:99;float:left;display:inline;}.Nav_head1 li{padding:0px;position:relative;float:left; display:inline-block;height:auto;line-height:22px;}.Nav_head1 a{padding:0 10px 0 0;display:block;color:#333}.Nav_head1 a:hover{text-decoration:none;background:#fff}.Nav_head1 :hover > a{color:#f60;text-decoration:none;background:#fff}.Nav_head1 ul{border:2px solid #fff;border-top:0px;position:absolute;font:normal 12px/22px arial;display:inline;padding:0 0px 6px 0px;overflow:hidden;left:0; height:120px;width:273px;word-wrap:break-word;word-break:break-all;}.Nav_head1 ul li{padding:1px 0px 0px 0px;line-height:23px;margin-left:10px;margin-right:-2px;left:left;white-space:nowrap}.Nav_head1 ul li h3{ font-size:14px; font-weight:bold; margin:0; padding:0;}.Nav_head1 table {position:absolute;top:0;left:0;}.Nav_head1 ul a, .Nav_head1 ul a:visited {color:#333;padding:0 1px 0 2px;background:none;}.Nav_head1 ul a:hover{color:#fff;background:#30528F;text-decoration:none;}.Nav_head1 ul :hover > a {color:#fff;background:#30528F}.Nav_head1 li:hover ul,.Nav_head1 a:hover ul{margin:-2px;display:inline;visibility:visible;height:auto;border:2px #c00 solid;padding:2px; background:#ffe}</style></head><body><div class="Nav"><div class="Navlf"><div class="Navleft"><div style="width:300px;float:left; position:relative;left:0px;right:0px; z-index:0;height:306px;display: inline-block;"><ul id="menu" class="Nav_head1" style="z-index:9999;"><li style="z-index:9998" id="cid_284"><a href=""><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul style="top:0px;"><li><h3><a href="">ASP源码</a></h3></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="">CMS整站</a></li><li><a href="">音乐视频</a></li><li><a href="">其它分类</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li style="z-index:9997" id="cid_636"><a href=""><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul style="top:100px;"><li><h3><a href="">PHP源码</a></h3></li><li><a href="">Ajax相关</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="">CMS系统</a></li><li><a href="">音乐视频</a></li><li><a href="">其它分类</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li style="z-index:9996" id="cid_291"><a href=""><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul style="top:200px;"><li><h3><a href="">DELPHI源码</a></h3></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><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li style="z-index:9995" id="cid_509"><a href=""></a></li></ul></div></div></div></div></body></html>仿淘宝商品界面（html div+css)相关推荐
- html+css简单仿制淘宝商品界面
一.主要思路 二.完整代码 三.最终效果 一.主要思路 1.写一个大盒子,将内部分为如图几个部分,分别写对应的内容 2.首先给整个盒子宽高,传进图片后调整图片宽高 3.重点在于"找同款&qu ...
- 仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
- 仿淘宝商品浏览界面， 向上拉查看详情
最新项目中有展示类似淘宝商品详情的功能,主要实现 向上拉查看详情,百度一搜,发现有大神已经实现这个效果了 http://blog.csdn.net/zhongkejingwang/article/d ...
- Android 仿淘宝商品详情页下拉足迹Demo
DropDownMultiPager 仿淘宝等商品详情页下拉足迹效果SimpleDemo 可colne之后看MainActivity的调用,方便二次开发 依赖 compile 'com.nineold ...
- Android开发之仿淘宝商品详情页
看到有人在问如何实现淘宝商品详情页效果,手痒了就撸了一个,献上效果图 大致梳理一下思路,这里不提供源码 状态栏透明使用开源库StatusBarCompat,为了兼容手机4.4 dependencies ...
- 仿淘宝商品详情-点击显示大图,可滑动
现在在做一个商城类的项目: 大家都用过淘宝,需求就是要求仿淘宝的效果做一个, 直接上图 用到了一个项目PhotoView 大家运行一下看最后一个项目,把单一的图片显示改成VIewpager就好.
- 仿淘宝商品详情页图片滑动并且数字也跟着变化
今天遇到需求需要做个淘宝那样的商品详情页如图(这里只差放图片了)支持移动端,当然用的是swiper.js支持左右滑动 上代码 html代码 <div class="swiper-con ...
- vue.js客服系统实时聊天项目开发（十八）仿淘宝商品页面点在线客服传递产品卡片...
我们在使用淘宝的时候,在商品页面点击在线客服,跳转到客服聊天页以后,会浮动出当前产品信息,可以把产品信息发给客服 现在我们也实现了类似功能,可以带着产品信息进聊天页面 在访客聊天连接中,加入extra ...
- 移动端实现swiper轮播的图片视频播放video，仿淘宝商品详情的视频播放（兼容ios和android）
前段时间项目里需要,实现仿淘宝图片视频切换的功能,在网上找了很久,根据网上所收集的信息,最后整合实现项目需求,这里兼容了ios和android,直接拿来用即可,这里是用来记录学习使用的,大家有什么问题 ...
最新文章
- 用D3.js 十分钟实现字符跳动效果
- Failed to load JavaHL Library（windows和mac）
- saspython知乎_python学习笔记---linux/windows调用sas程序
- Node.js 文件系统流pipe到Http响应流中
- SQL语句执行效率及分析(note)
- [Node.js] 使用nodejs操作mysql数据库
- linux screen 命令是 ssh 的有效补充
- C++socket编程（八）：8.2简单的基于UDP的客户端和服务端
- 关于C++中的 多态 问题
- 正则表达式判断ip格式
- @IT老司机 云服务、BI大数据、协同办公等五大技术选型研讨会，震撼来袭！
- log4j.properties的配置与详细说明
- 配置企业管理系统，什么样的工作流才有用
- 单片机c语言延时1ms函数,单片机c语言延时函数用int与char有延时差吗？
- 在Ubuntu 22.04上安装WRF-Chem模型4.4版本和KPP
- Python 跑深度学习遇到的一些问题集锦
- xshell报错-要继续使用此程序,您必须应用最新的更新或使用新版本
- ESP8266串口WiFi扩展板详解
- HCS12X微控制器的外部总线接口介绍
- 使用WireShark查看TCP的三次握手