苏宁难购1

已于 2022-07-12 21:30:31 修改
阅读量130 收藏 1
点赞数
文章标签： html css javascript
于 2022-07-12 21:24:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69289422/article/details/125752181
版权

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁难购</title>
    <style>
        .d1{
            font-size: 13px;
            background-color: #e8e8e8;
            margin-top: -10px;
            margin-left: -5px;
            margin-right: -5px;
            padding: 3px;
            height: 30px;
        }
        .search1{
            position:absolute;
            left:450px;
            top:60px;
            font-size:16px;
            width: 500px;
            height: 40px;
            vertical-align: top;
            border:2px solid #ef873d;
            background-color: #fff;
            color:purple;
            overflow: hidden;
            border-radius:10px 0 0 10px;
            margin-left: 90px;
        }
        .search2 {
            position: absolute;
            top: 60px;
            left: 1002px;
            cursor: pointer;
            width: 120px;
            height:46px;
            line-height: 45px;
            background-color: #ef873d;
            border-radius:0 10px 10px 0;
            font-size:18px;
            color:#fff;
            text-align: center;
        }
        .d2{
            margin-left: 540px;
            margin-top: -20px;
            font-size: 13px;
        }
        .xuan:hover{
            color: #ef873d;
        }
        .xuan{
            text-decoration: none;
            color: #666666;
        }
        .d3{
            margin-left: 170px;
            margin-top: 20px;
            background-color: #ff8800;
            padding-left: 10px;
            padding-top: 10px;
            color: #fff;
            width: 180px;
            height: 30px;
            border-radius:10px 10px 0 0;
        }
        .d4{
            margin-left: 400px;
            margin-top: -30px;
            padding-left: 20px;

        }
        .d5{
            margin-left: 1160px;
            margin-top: -40px;
            background-color: rgba(3, 3, 2, 0.719);
            padding-left: 10px;
            padding-top: 10px;
            color: #f0cfa1;
            width: 180px;
            height: 30px;
            border-radius:10px 10px 0 0;
        }
        .xuan2{
            text-decoration: none;
            color: black;
        }
        .xuan2:hover{
            color: #ef873d;
        }
        .meun:hover{
            background-color: #e3e3e3;
        }
        .hide1{
            display: none;
            height: 100px;
            width: 200px;
            background-color: aqua;
        }
        .s1:hover .hide1{
            display: block;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div style="margin-top: 8px;">
            <span style="width:30px;padding-left:160px;"><a href="#" class="xuan"><span class="s1">网站导航∨</span></a></span><div class="hide1"><div>特色购物</div><div>主题频道</div></div>
            <span style="width:30px;padding-left:30px;"><a href="#" class="xuan">商家入驻∨</a></span>
            <span style="width:30px;padding-left:30px;"><a href="#" class="xuan">客户服务∨</a></span>
            <span style="width:30px;padding-left:30px;"><a href="#" class="xuan">网页无障碍</a></span>
            <span style="width:30px;padding-left:30px;"><a href="#" class="xuan">泰安</a></span>
            <span style="width:30px;padding-left:260px"><a href="#" class="xuan">请登录</a></span>
            <span style="width:30px;padding-left:10px;"><a href="#" class="xuan" style="color: #ff6600;">注册有礼</a></span>
            <span style="width:30px;padding-left:10px;"><a href="#" class="xuan">我的订单∨</a></span>
            <span style="width:30px;padding-left:10px;"><a href="#" class="xuan">我的难购∨</a></span>
            <span style="width:30px;padding-left:10px;"><a href="#" class="xuan">苏宁会员</a></span>
            <span style="width:30px;padding-left:10px;"><a href="#" class="xuan" style="color: #ff6600;">购物车 0∨</a></span>
            <span style="width:30px;padding-left:10px;"><a href="#" class="xuan">易付宝</a></span>
            <span style="width:30px;padding-left:10px;"><a href="#" class="xuan">企业采购</a></span>
            <span style="width:30px;padding-left:10px;"><a href="#" class="xuan">手机苏宁</a></span>
        </div>
    </div>
    <div>
        <img src="su.png" style="width: 190px;height:90px;margin-left: 160px;">
        <input class="search1">
        <div class="search2" href="" ><strong>搜索</strong></div>
    </div>
    <div class="d2">
        <span class="s1" style="text-decoration: none;"><a href="#" class="xuan">手机&nbsp;</a></span><span style="color: #a8a7a7;">|</span>
        <span class="s1" style="text-decoration: none;"><a href="#" class="xuan" style="color: #ff6600;">爆款洗衣机&nbsp;</a></span><span style="color: #a8a7a7;">|</span>
        <span class="s1" style="text-decoration: none;"><a href="#" class="xuan">冰箱&nbsp;</a></span><span style="color: #a8a7a7;">|</span>
        <span class="s1" style="text-decoration: none;"><a href="#" class="xuan" style="color: #ff6600;">奶粉特惠购&nbsp;</a></span><span style="color: #a8a7a7;">|</span>
        <span class="s1" style="text-decoration: none;"><a href="#" class="xuan" style="color: #ff6600;">品质家具购&nbsp;</a></span><span style="color: #a8a7a7;">|</span>
        <span class="s1" style="text-decoration: none;"><a href="#" class="xuan">&nbsp;电视&nbsp;</a></span><span style="color: #a8a7a7;">|</span>
        <span class="s1" style="text-decoration: none;"><a href="#" class="xuan">iPad&nbsp;</a></span><span style="color: #a8a7a7;">|</span>
        <span class="s1" style="text-decoration: none;"><a href="#" class="xuan">热水器&nbsp;</a></span><span style="color: #a8a7a7;">|</span>
        <span class="s1" style="text-decoration: none;"><a href="#" class="xuan">沙发&nbsp;</a></span>
    </div>
    <div>
        <div class="d3">
            <img src="fen.png" style="height: 15px;width: 15px;">
            <strong>分类</strong>
        </div>
        <div class="d4">

            <span style="font-family: YouYuan;font-size: 25px;color: darkred;"><strong>大聚惠</strong></span>
            <span style="margin-left: 20px;"><strong>电器城</strong></span>
            <img src="hot.png" style="height: 15px;width: 15px;">
            <span style="margin-left: 20px;"><strong>手机数码</strong></span>
            <span style="margin-left: 20px;"><strong>苏宁超市</strong></span>
            <span style="margin-left: 20px;"><strong>家居建材</strong></span>
            <span style="margin-left: 20px;"><strong>生活家电</strong></span>
            <span style="margin-left: 20px;"><strong>帮客服务</strong></span>
            <span style="margin-left: 20px;"><strong>金融</strong></span>
        </div>
        <div class="d5">
            公示：协议|规则|证件
        </div>
    </div>
    <div>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="shouji.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">手机</a> / <a href="#" class="xuan2">运营商</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="dianshi.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">家用电器</a> / <a href="#" class="xuan2">帮客</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="shower.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">厨卫</a> / <a href="#" class="xuan2">生活家电</a> / <a href="#" class="xuan2">厨具</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="diannao.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">电脑办公</a> / <a href="#" class="xuan2">相机</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="shafa.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">家具</a> / <a href="#" class="xuan2">家装</a> / <a href="#" class="xuan2">家纺</a> / <a href="#" class="xuan2">灯具</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="bangbangtang.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">食品</a> / <a href="#" class="xuan2">酒水</a> / <a href="#" class="xuan2">生鲜</a> / <a href="#" class="xuan2">特产</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="kouhong.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">美妆</a> / <a href="#" class="xuan2">个护</a> / <a href="#" class="xuan2">清洁</a> / <a href="#" class="xuan2">宠物</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="yingerche.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">母婴</a> / <a href="#" class="xuan2">玩具</a> / <a href="#" class="xuan2">车床</a> / <a href="#" class="xuan2">童装</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="lanqiu.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">运动</a> / <a href="#" class="xuan2">户外</a> / <a href="#" class="xuan2">国米</a> / <a href="#" class="xuan2">骑行</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="qunzi.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">女装</a> / <a href="#" class="xuan2">男装</a> / <a href="#" class="xuan2">内衣</a> / <a href="#" class="xuan2">鞋靴</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="bao.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">箱包</a> / <a href="#" class="xuan2">钟表</a> / <a href="#" class="xuan2">珠宝</a> / <a href="#" class="xuan2">艺术</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="che.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">汽车</a> / <a href="#" class="xuan2">电摩</a> / <a href="#" class="xuan2">汽车用品</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="shu.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">图书</a> / <a href="#" class="xuan2">艺术</a> / <a href="#" class="xuan2">原版</a> / <a href="#" class="xuan2">文学</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="yaoxiang.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">医药健康</a> / <a href="#" class="xuan2">计生情趣</a>
        </li>
        <li class="meun" style="height: 30px;width: 200px;margin-left: 170px;margin-top: 10px;font-size: 14px;list-style: none;padding-top: 10px;">
            <img src="licai.png" style="height: 20px;width: 20px;"> <a href="#" class="xuan2">理财</a> / <a href="#" class="xuan2">分期</a> / <a href="#" class="xuan2">便民</a>
        </li>
    </div>
    <div style="margin-top: -250px;">
        <img src="大屏背景.jpg" style="height: 500px;width: 800px;margin-top: -900px;margin-left: 360px;">
    </div>
</body>
</html>

效果图

隐藏菜单栏还没写但是已学会相关知识点

display：none/*隐藏*/

父：hover .子{display:block;}

但是有个存留问题就是隐藏菜单栏的摆放问题

 目前完成的情况是鼠标悬浮会有阴影，但是重要的隐藏菜单栏没有写完，下一步要进行的是隐藏菜单栏的编写和细节改善。

还有下滑有关推荐的内容也是下一步的计划

又要头秃了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
苏宁抢购茅台项目.zip
11-01
苏宁抢购茅台项目.zip
苏宁易购App抢购茅台.zip
11-01
苏宁易购App抢购茅台.zip
揭秘：“苏宁拼购基地”落地全国的原因
Dolores_111的博客
04-08 391
谈起线下仓库，大家第一个想到的往往都是京东、苏宁，那么这个“苏宁拼购基地”是怎么回事呢？京东、苏宁之所以能够那么快，究其原因是全国遍布的“基地”，这也是它为什么比淘宝普遍贵的原因了。 苏宁拼购和苏宁易购不一样，就像天猫商城和淘宝网的关系类似，苏宁拼购主打的是三线城市、乡镇市场，拼多多为什么火的那么快，一是因为它便宜，二则是因为它的朋友圈营销模式，“拼团”的模式降低了价格，但同时扩大了市场。 为什...
苏宁拼购818“煽风点火” 拿下品质拼购第一品牌
趣味科技v
08-08 248
最近一段时间里，人们对拼多多的各种讨论已经成为了现象级事件。通过低单价商品撬动规模庞大的基础人群购买力，拼多多创立仅仅3年即在资本市场获得了巨大成功，但同时也因假货问题在...
苏宁小店上线社区拼购，物流供应链是其有力竞争武器
京比特的博客
12-29 364
日前，在苏宁易购年货节发布会上，苏宁小店集团商品经营中心总经理鲍俊伟宣布，2019年1月18日，苏宁小店也将上线社区拼购服务，并将面向全国招募100000个团长。 社区拼购市场大，将成为苏宁的又一增长引擎 众所周知，受资本寒冬的影响，各大行业几乎都出现了融资难的情况，更是在今年迎来了融资瓶颈。和其它行业不同的是，社区拼购市场似乎并没有受到所谓资本寒冬的影响。有机构统计，2018年下半年社区...
止血、回血 苏宁易购正在复苏路上
yidiancaijing的博客
10-30 375
扛住二三季度的至暗时刻，苏宁易购正在稳住其基本盘面。 在10月29日苏宁易购披露的2021年前三季度业绩报告中，公司前三季度营收达到1155.74亿元。虽然财务数据上公司仍处于“三十年发展历程中最艰难的时期”，但从其生产经营数据看，苏宁易购正在“回血”中。 经历了大震荡之后，苏宁易购的生产经营活动并没有深陷泥沼，反倒是逐渐在恢复生机。三季度，苏宁易购零售云商品销售规模环比增长33.38%，成为最大亮点。而公司最为核心的电器3C业务商品销售规模在9月出现明显回升，环比8月增长30%。 经营指标的转暖..
苏宁V购 不为拯救 只求改变
weixin_34007291的博客
06-25 107
　　前日，苏宁推出的V购服务意外的引发了不小的争论，没想到这本应该是很普通的一件事情，却激起了自媒体人关于V购能否救苏宁实体店的论战。其实，将V购套上拯救苏宁实体店的帽子有些太大了，V购的意义不是救，而是变。　　苏宁推出V购服务的目的不是用来拯救实体店，而是改变苏宁实体店的服务体系。原因很简单，顾名思义，V购是为VIP用户提供专属的导购服务，而这部分用户仅仅只是少数，苏宁实体...
苏宁安全架构
weixin_30398227的博客
05-04 116
苏宁安全架构是伴随苏宁易购一起成长的，经历了从无到有到逐步完善的过程，期间不管是在技术上还是在管理上，都遇到了非常多的难题，但一旦闭环安全体系完善起来后，安全事件发现、处理效率会得到极大提升。 安全组织架构 首先需要明确安全部门的组织架构，苏宁的安全相关部门目前主要分为管理和研发两大类。由于企业安全不仅包含外部网络攻击防护，还包含企业内部安全威胁检查，所以安全部门非常特殊，必须要有一定的独立性...
苏宁易购实现逆势增长，但它的非电业务更超出意料
03-04 412
文|曾响铃 来源|科技向令说（xiangling0815） 2月26日，苏宁易购在南京举行了“全民焕新节媒体发布会”，在发布会中多次提及苏宁正在打造全场景、全品类的战略思想。 第二天，苏宁易购发布了2018年度业绩快报。数据显示苏宁易购2018年营业收入达到了2453.11亿元，同比增长30.53%，商品销售规模为3371.35亿元，同比增长38.54...
苏宁安全架构演进及实践
04-19 206
一、前言近年来，各类网络安全事件层出不穷，木马病毒、信息泄漏、网络诈骗等等字眼时常见诸媒体，就连年初美国的总统大选都被黑客闹得鸡飞狗跳，网络安全从未像今天这样受到整个社会...
苏宁易购书城爬虫（重点：价格请求的url的构造分析）【Scrapy+Mongodb】
Caiden_Michael
02-09 1603
下载方式提供两种： github下载 腾讯微云下载【密码：54250p】 苏宁易购书城爬虫抓取的内容 图书价格 图书标题 图书购买详情页链接 图书分类 图书作者 图书出版社以及出版日期 直接切入正题，重点是图书价格的构造，所以，开始就先解决图书价格请求的url构造： 这里先列一下分析的本文里分析的页面分别是那几个（如下）： （1）初始分析页面【图书类别分类页】 （2）图书目录页面【这里拿其...
苏宁易购抢购茅台，茅台秒杀.zip
11-01
苏宁易购抢购茅台，茅台秒杀.zip
京东、淘宝、苏宁抢购助手.zip
11-01
京东、淘宝、苏宁抢购助手.zip
基于Auto.js的苏宁淘宝京东大麦抢购插件.zip
11-01
基于Auto.js的苏宁淘宝京东大麦抢购插件.zip
html实现粘贴excel数据，在页面表格中复制
weixin_43805439的博客
06-13 532
Html table 实现Excel多格粘贴
HTML(12)——背景属性
最新发布
m0_74386799的博客
06-20 272
可以只写一个关键字，另外一个方向默认居中，坐标只写一个表示水平方向，垂直方向为居中。contain：等比缩放背景图片以完全。cover：等比缩放背景图片以完全。属性值：水平方向位置，垂直方向位置。作用：背景图不会随着元素的内容滚动。使用背景图实现装饰性的图片效果。属性值:url(背景图URL)坐标：数字+px 正负都可。背景区，可能背景图部分看不见。背景区，可能背景区部分空白。背景图默认是平铺的效果。
HTML ＜meta＞ 标签及其属性介绍
一起coding，一起嗨。
06-17 631
HTML 标签及其属性介绍
Html_Css问答集(3)
白话魔法师
06-14 881
html与css学习中的一些疑问，问答中轻松获取知识。
python苏宁易购抢购脚本
08-25
python苏宁易购抢购脚本是一种使用Python编写的脚本程序，旨在帮助用户在苏宁易购平台上轻松参与抢购活动。该脚本通过模拟用户的操作，在指定的时间点自动打开苏宁易购网页，并填写用户的登录信息。一旦成功登录，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值