京东左侧导航栏

最新推荐文章于 2023-11-10 18:17:09 发布
最新推荐文章于 2023-11-10 18:17:09 发布
阅读量629 收藏 6
点赞数 4
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61466402/article/details/123591870
版权

目录

效果：

代码展示

 核心部分

1.斜杠与文字之间的空隙的清除：

2.:hover

3.去除浏览器的默认样式

效果：

代码展示

​
<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .left-nav {
            /* 设置容器大小 */
            width: 190px;
            height: 450px;
            /* 设置边距 */
            padding: 10px 0;
            /* 设置背景颜色 */
            background-color: #fff;
        }

        /* 设置内部菜单样式 */
        .left-nav .item {
            /* 设置每一行的高度 */
            height: 25px;
            /* 设置文字居中 ,只需让其高度与父元素的高度相同*/
            line-height: 25px;
            /* 设置边距 */
            padding-left: 18px;
            /* 解决a标签与span标签之间的空隙 */
            font-size: 0;
        }

        /* 设置鼠标移入效果 */
        .item:hover {
            background-color: #d9d9d9;
        }

        /* 设置字体 */
        .item a {
            /* 设置字体大小 */
            font-size: 14px;
            /* 设置字体颜色 */
            color: #333;
            /* 去除下划线 */
            text-decoration: none;

        }

        .item .xie {
            /* 设置斜线大小 */
            font-size: 12px;
            /* 设置斜线颜色 */
            color: rgb(99, 99, 99);
        }



        .item a:hover {
            color: #c81623;
        }
    </style>

</head>

<body>
    <!-- 创建一个外部的容器，nav(div),div(div),ul(li) -->
    <nav class="left-nav">
        <div class="item">
            <a href="">家用电器</a>
        </div>

        <div class="item">
            <a href="">手机</a>
            <span class="xie">/</span>
            <a href="">运营商</a>
            <span class="xie">/</span>
            <a href="">数码</a>
        </div>

        <div class="item">
            <a href="">电脑</a>
            <span class="xie">/</span>
            <a href="">办公</a>
        </div>

        <div class="item">
            <a href="">家居</a>
            <span class="xie">/</span>
            <a href="">家具</a>
            <span class="xie">/</span>
            <a href="">家装</a>
            <span class="xie">/</span>
            <a href="">厨具</a>
        </div>

        <div class="item">
            <a href="">男装</a>
            <span class="xie">/</span>
            <a href="">女装</a>
            <span class="xie">/</span>
            <a href="">童装</a>
            <span class="xie">/</span>
            <a href="">内衣</a>
        </div>

        <div class="item">
            <a href="">美妆</a>
            <span class="xie">/</span>
            <a href="">个护清洁</a>
            <span class="xie">/</span>
            <a href="">宠物</a>
        </div>

        <div class="item">
            <a href="">女鞋</a>
            <span class="xie">/</span>
            <a href="">箱包</a>
            <span class="xie">/</span>
            <a href="">钟表</a>
            <span class="xie">/</span>
            <a href="">珠宝</a>
        </div>

        <div class="item">
            <a href="">男鞋</a>
            <span class="xie">/</span>
            <a href="">运动</a>
            <span class="xie">/</span>
            <a href="">户外</a>
        </div>

        <div class="item">
            <a href="">房产</a>
            <span class="xie">/</span>
            <a href="">汽车</a>
            <span class="xie">/</span>
            <a href="">汽车用品</a>
        </div>

        <div class="item">
            <a href="">母婴</a>
            <span class="xie">/</span>
            <a href="">玩具乐器</a>
        </div>

        <div class="item">
            <a href="">食品</a>
            <span class="xie">/</span>
            <a href="">酒类</a>
            <span class="xie">/</span>
            <a href="">生鲜</a>
            <span class="xie">/</span>
            <a href="">特产</a>
        </div>

        <div class="item">
            <a href="">艺术</a>
            <span class="xie">/</span>
            <a href="">礼品鲜花</a>
            <span class="xie">/</span>
            <a href="">农资绿植</a>
        </div>

        <div class="item">
            <a href="">医药保健</a>
            <span class="xie">/</span>
            <a href="">计生情趣</a>
        </div>

        <div class="item">
            <a href="">图书</a>
            <span class="xie">/</span>
            <a href="">文娱</a>
            <span class="xie">/</span>
            <a href="">教育</a>
            <span class="xie">/</span>
            <a href="">电子书</a>
        </div>

        <div class="item">
            <a href="">机票</a>
            <span class="xie">/</span>
            <a href="">酒店</a>
            <span class="xie">/</span>
            <a href="">旅游</a>
            <span class="xie">/</span>
            <a href="">生活</a>
        </div>

        <div class="item">
            <a href="">理财</a>
            <span class="xie">/</span>
            <a href="">众筹</a>
            <span class="xie">/</span>
            <a href="">白条</a>
            <span class="xie">/</span>
            <a href="">保险</a>
        </div>

        <div class="item">
            <a href="">安装</a>
            <span class="xie">/</span>
            <a href="">维修</a>
            <span class="xie">/</span>
            <a href="">清洗</a>
            <span class="xie">/</span>
            <a href="">二手</a>
        </div>

        <div class="item">
            <a href="">工业品</a>
        </div>
    </nav>
</body>

</html>

​

 核心部分

1.斜杠与文字之间的空隙的清除：

font-size:0;行内级元素之间，换行会被解释成空格。在父级元素添加font-size：0可以除去间隙

2.:hover

鼠标悬停在字上时，块级元素背景变化，字体颜色也变化，使用：hover{color},：hover{back-ground-color}进行改变

3.去除浏览器的默认样式

*{margin:0;padding:0}

li{list-style:none}

img{vertical-align:top;border:none}

DHPYX
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
京东首页Html+css+javascript代码
04-15
用前端三语言简单实现京东首页搭建，实现了导航栏和轮播图功能，对购物网站搭建框架有了基本的了解。
京东左侧导航条
object6的博客
11-08 706
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东的左侧导航</title> <link rel="stylesheet" href="./reset.
京东分类导航js
sosadtoday的博客
11-28 751
动态生成页面的操作
layui实现左侧导航树形菜单
TestXzing的博客
07-11 2633
今日金句在上篇博客中，我们学习了layui的入门，还实现了后台的登陆注册，今天我们就来完成后台首页的重要组成部分——左侧导航树形菜单
竖直菜单 html,jQuery实现的网页竖向菜单效果代码
weixin_29061997的博客
06-16 510
本文实例讲述了jQuery实现的网页竖向菜单效果代码。分享给大家供大家参考。具体如下：这是一款基于jQuery实现竖向的网页菜单代码，可折叠展开的二级网页菜单，修改一下可用在后台管理中，显示在左侧的那种管理菜单。jquery加入后方便实现了菜单展开和合拢的功能，还加入了少许动画效果，兼容性好。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/...
html 左侧 树形菜单,vue左侧菜单,树形图递归实现代码
weixin_39620943的博客
06-01 585
学习vue有一段时间了，最近使用vue做了一套后台管理系统，左侧菜单需求是这样的，可以多层，数据由后台传递。也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。效果图如下所示：先说说遇到的坑，由于是子父组件，当时传递使用的是子父组件的传递，但是这时候只能获取到第一层的数据，第二层往后获取不到数据，踩了一下午坑以后才知道，子组件使用了递归组件，这时候他已经不能往父组件传递了，子...
jquery 京东左侧导航代码
11-07
"jQuery 京东左侧导航"就是一种常见的实现方式，它模仿了京东商城网站的左侧导航栏，通过鼠标悬停在导航项上时，右侧会弹出详细分类的展示层，提供更丰富的信息导航。本文将详细介绍这一功能的实现原理和关键知识点...
jQuery模仿京东/天猫商品左侧分类导航菜单效果
01-19
当鼠标滑过任意一栏导航分类时，就会出现相关详细分类模块，例如： 当鼠标移出蓝色框以外的区域，就会恢复默认的效果显示！然而使用jQuery的鼠标滑过事件，用得比较多的就是mouseover()和mouseout(),或者是他们两个...
京东分类导航html
03-25
1. **悬浮导航**：这种导航栏始终保持在屏幕的一侧（通常是左侧），即使用户滚动页面，导航也会固定在屏幕顶部或底部，确保用户随时可以访问分类。这种设计提高了用户的导航效率，无需不断滚动回到页面顶部寻找分类...
jQuery京东首页左侧菜单导航
11-20
在“jQuery京东首页左侧菜单导航”这个主题中，我们将深入探讨如何利用jQuery技术来实现类似京东首页左侧那种动态、交互式的导航菜单。 首先，让我们了解京东首页左侧菜单的基本特点。这种菜单通常包含多个层级，...
仿京东商品左侧分类导航菜单JS特效代码.zip
07-11
该资源是一个用于创建类似京东商品左侧分类导航菜单的JavaScript特效代码。这个代码库基于jQuery库构建，旨在提供一种大气且用户友好的导航体验。在实际应用中，此导航菜单不仅能够展示不同类别的商品，还支持展开...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
weixin_70320000的博客
07-09 1116
跟着尚硅谷老师的练习，记录一下自己做的内容，查漏补缺。目录一、京东左侧导航栏 1、第一次自己做的代码（未看老师讲解视频前做的）：总结： 2、看完老师视频后跟着写的代码：注意点及总结删除行内元素间的空白的方法二、网易新闻列表1、自己做的结构2、看视频后做的代码.........
html+css+javascript打造网页内容浮动导航菜单
最新发布
Purpleendurer@CSDN
11-10 1749
前段时间把“圳品”信息发布到网站上了，内容包括四大块： 按分布区域统计分析 按产品类别统计分析 按认定时间统计分析 河池市“圳品”清单 导致网页很长，有同事反映说查看起来不是很方便，于是决定加上一个网页内容浮动导航菜单，把上面这四大块列为菜单项，用户点击相应的菜单项，就跳转到相应的内容，并且提供关闭和收缩、展开导航菜单的功能。
html中向上的菜单怎么写,向上展开的多级CSS菜单
weixin_39967670的博客
05-30 466
向上展开的多级CSS菜单#nav,#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; backgroun...
html纯css实现导航栏下拉菜单（带下拉三级菜单）
weixin_44432032的博客
09-29 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title></title> <style> * { margin: 0; padding: 0; } body, html { font
html网页网站顶部自适应导航栏，菜单栏
热门推荐
免费网络加-速-器游戏加/速/器
07-03 4万+
html & js： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>...
HTML左边栏菜单（响应式）设计
未来的专栏
08-11 2162
本节介绍金蜘蛛网页设计器的左边栏菜单（响应式）控件的使用。左边栏菜单（响应式）是一个树形的菜单，可以支持三级树结点，自动适应手机和电脑显示。效果见本站文档的左边的树。
三级菜单页面布局_三级菜单的最快导航布局
weixin_26732881的博客
08-02 2689
三级菜单页面布局 重点 (Top highlight)When users navigate an interface, there’s a need for speed. The faster it is for them to find what they’re looking for, the more time they’ll save on their task. 用户导航界面时，需要提...
使用bootstrap制作简单的左侧导航栏
qq_36589992的博客
06-24 8786
打开百度，搜索bootstrap菜鸟联盟从左侧菜单中找到导航栏，随便找个案例，点击尝试一下，粘贴以下代码，即可看见效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 默认的导航栏</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-
pc端京东顶部导航栏变色代码
11-06
PC端京东顶部导航栏变色的代码可以使用HTML、CSS和JavaScript来实现。 首先，在HTML中创建顶部导航栏的结构，例如： ``` <nav id="topNav"> <ul> <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> </nav> ``` 接下来，在CSS中设置导航栏的样式，包括背景色、文字颜色等： ``` #topNav { background-color: #fff; /* 默认背景色 */ } #topNav ul { list-style: none; margin: 0; padding: 0; display: flex; } #topNav li { margin-right: 20px; } #topNav li a { text-decoration: none; color: #333; /* 默认文字颜色 */ } #topNav li.active { background-color: #e4393c; /* 选中项背景色 */ } #topNav li.active a { color: #fff; /* 选中项文字颜色 */ } ``` 最后，在JavaScript中添加交互逻辑，通过给选中的导航项添加一个"active"类来改变样式： ``` <script> var navItems = document.querySelectorAll("#topNav li a"); for (var i = 0; i < navItems.length; i++) { navItems[i].addEventListener("click", function() { var currentItem = document.querySelector("#topNav li.active"); if (currentItem) { currentItem.classList.remove("active"); } this.parentNode.classList.add("active"); }); } </script> ``` 这样，当点击导航项时，会给点击的导航项添加"active"类，从而改变其背景色和文字颜色，达到顶部导航栏变色的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值