京东左侧导航栏的制作

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

这次是使用ul+li进行编写

代码展示：

<!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;
        }

        /* 设置容器样式 */
        ul{
            /* 设置宽高 */
            width: 190px;
            height: 450px; 
            /* 设置背景颜色 */
            background-color: #fff;
            /* 设置边距 */
            padding: 10px 0;
            
        }
        /* 设置内部菜单样式 */
        ul > li{
            /* 设置高度 */
            height: 25px;
            /* 设置边距 */
            padding-left: 18px;
            /* 去除空隙 */
            font-size: 0;
            /* 设置高度居中 */
            line-height: 25px;
        }

        li > a{
            /* 设置字体大小 */
            font-size: 14px;
            /* 清除下划线 */
            text-decoration: none;
            /* 改变字体颜色 */
            color: #333;
            
        }
        /* 设置字体悬停效果 */
        a:hover{
            color: #c81623;
        }

        /* 设置背景悬停效果 */
        li:hover{
            background-color: #d9d9d9;
        }
        ul > li > .xie{
            color: rgb(99, 99, 99);
            /* 设置斜杠大小 */
            font-size: 12px;

            /* 设置内边距 */
            padding: 0 2px;
        }

    </style>
</head>
<body>
    
    <ul>

        <li>
            <a href="">家用电器</a>
        </li>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <li>
            <a href="">工业品</a>
        </li>
    </ul>
</body>
</html>

其他思想与第一个基本一致。

DHPYX
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery仿京东左侧物品导航栏
lgdshr123的博客
09-28 1万+
1、HTML和样式部分 style type="text/css"> html{color:#666;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;
京东商城左侧弹出式菜单设计制作
08-17
相信大家找了好久了以，现在分享出来，京东商城左侧弹出式菜单设计制作
京东左侧菜单
Scodow的博客
11-30 834
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东左侧菜单</title> <script src="JS/jquery-1.12.4.js"></script> <style> *{ padding: 0; ...
原生js实现移动端京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)
Henry的博客
09-08 1462
原生js实现京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)
将JD左侧导航图中的斜杠变小的简单方法
Ada_X25025的博客
11-29 133
.left-nav .item{font-size:12px;}（父元素即18个div为一个整体nav）根据继承的样式，子元素即每个超链接里的字体和斜杠（超链接外，div里）会变成12px,由于 .item a{font-size：14px;}每个超链接里面的字体会单独变成14px,由于斜杠在div的里面超链接的外面，所以斜杠保持原状为12px,也就是看起来斜杠变小了。 笔记来源：https://www.bilibili.com/video/BV1XJ411X7Ud?p=56 P56,进度条： 34.
仿京东的左侧菜单
11-30
仿京东的左侧菜单，非常好用，大家都来试一下吧
vc动态添加的左侧导航栏工具
07-11
"vc动态添加的左侧导航栏工具"是一个专为Visual C++（VC++）开发者设计的实用程序，它允许在运行时动态创建和管理左侧导航栏。这个工具为用户提供了一种灵活的方式，可以根据用户操作或程序需求切换不同的导航项，极...
左侧导航栏
03-27
标题 "左侧导航栏" 暗示我们正在讨论的是网页设计中的一个重要元素，通常在页面左侧显示，用于引导用户在网站或应用中导航。这种设计模式常见于许多现代Web应用程序和管理界面，它帮助用户快速访问不同的功能和信息...
C# winform侧边栏 左侧导航栏 导航控件
04-25
参考网站导航UI设计的winform侧边导航栏，内有vs2017的demo,支持2.0框架。总体扁平化设计，图标、大小位置、文字颜色、样式等可灵活控制,详细请看代码。 注：项的呈现非树形结构，能力有限，有些问题无法解决，但不...
jQuery制作下划线导航栏动画特效
07-31
而使用jQuery制作下划线导航栏动画特效可以提升用户体验，使交互更具吸引力。本篇文章将详细解析如何使用jQuery实现这种效果。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了...
html+css侧边伸缩导航栏
01-26
在创建一个具有吸引力和交互性的网站时，侧边伸缩导航栏是一个常见的设计元素，它提供了一种高效且直观的浏览体验。在这个主题中，我们将深入探讨如何使用 HTML 结构和 CSS 样式来实现一个可伸缩的侧边导航栏。 ...
html：制作简易京东导航栏
astar2022的博客
06-30 3611
又是让人头秃的一天！
针对目前出现的一些问题的解释（自己理解，有待检验是否正确）
qq_41633396的博客
04-11 117
出现改字体大小时，字会由原来的一行变为两行 例如：下面改字体大小前 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
仿京东左侧菜单 hover效果-简易demo
weixin_30808575的博客
11-04 2378
简单描述： 用到的知识点 css 中的绝对定位 以及 Js 中的事件冒泡（或事件委托） 1 .cont{display:inline-block;width:200px;height:200px;border:1px solid red;position:absolute;left:150px;top:2px;display:none;} 1 <div style="b...
仿京东左侧菜单弹出html代码,相仿京东左侧菜单
weixin_33185844的博客
05-30 1160
Furniture* {margin:0; padding:0;}html {color:#434343; background-color:#fff;}body{color:#434343;font-family:Arial,宋体;line-height:20px; font-size:12px;height: 100%;width: 100%; word-break:normal; backg...
前端学习笔记（HTML&CSS）（06）CSS盒子模型练习
weixin_44263871的博客
05-08 303
前端学习笔记（HTML&CSS）（05） 练习一：图片列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
京东左侧导航条练习笔记
Bai_mengxia的博客
03-07 164
盒子小结：1.京东左侧导航条练习
仿京东左侧菜单弹出html代码,一个类似京东网页左侧菜单扩展的特效代码
weixin_36302268的博客
05-30 764
Furniture* {margin:0; padding:0;}html {color:#434343; background-color:#fff;}body{color:#434343;font-family:Arial,宋体;line-height:20px; font-size:12px;height: 100%;width: 100%; word-break:normal; backg...
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、付费专栏及课程。

余额充值