将JD左侧导航图中的斜杠变小的简单方法

最新推荐文章于 2024-07-21 12:12:15 发布
最新推荐文章于 2024-07-21 12:12:15 发布
阅读量133 收藏 1
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ada_X25025/article/details/110356449
版权

在这里插入图片描述
.left-nav .item{font-size:12px;}（父元素即18个div为一个整体nav）根据继承的样式，子元素即每个超链接里的字体和斜杠（超链接外，div里）会变成12px,由于 .item a{font-size：14px;}每个超链接里面的字体会单独变成14px,由于斜杠在div的里面超链接的外面，所以斜杠保持原状为12px,也就是看起来斜杠变小了。

方法2：
看了JD源码上将每个斜杠单独放在span标签里，再对span设置width，height，padding

笔记来源：https://www.bilibili.com/video/BV1XJ411X7Ud?p=56

P56,进度条： 34:00

感受：细节！！

不要叫我名字
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习（420）：京东制作页面27左侧分类下
歌谣的博客
01-15 447
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4644
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
京东左侧导航栏的制作
qq_61466402的博客
03-19 1259
这次是使用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"&
GUI框架学习----------各个界面的大小设定
qq_1335857320的博客
08-12 2637
第一点:如何设计各个界面的大小 第一步:把每一个界面的依次提取出来，进行相关的对比。找到其中通用性的东西 第二步: 在command_ctrl_size中，写出通用的宏  和 函数方便以后调用  ，主要界面的size用全局变量表示。   第三步:在分辨率发生改变的时候，依次传递信号，使得每一个子页面都能响应:即编写相应的move_ctrl函数    第二点:界面的数据流 每一个...
一个小兔子的大数据见解2
weixin_42224258的博客
02-20 3602
Big Data 阿里的大数据解决方案 MAXCOMPUTE DATAWORKS QUICKBI 1、Vmware增强 2、 1.1、VMware 虚拟网络设备 1.1.1、虚拟网卡、虚拟交换机 虚拟网卡：宿主机有自己的网卡，通常在这个路径在（控制面板\网络和 Internet\中可以找到），可以看到好几个网卡，我们可以配置网卡中的信息，例如ip地址等。 而虚拟机中的网卡，就叫做虚拟网卡，...
前端知识体系-全栈系列（图谱+大纲）
热门推荐
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
01-25 1万+
前端知识体系（图谱） 前端工程化体系 node 主流技术栈 大纲 React Vue Angular JavaScript TypeScript 跨平台技术 大纲 跨端技术发展的三个阶段 Hybrid ReactNative Flutter weex 小程序 快应用 ionic Cordova 性能优化和监控 前端知识体系（大纲） 前端工程化体系 基础设施 规范化 前端标准（基础） W3C SPA DOM BOM XHTML XML JSON JSONP HTTP
Python总复习-下
花开如雨的博客
10-21 6168
目录 人工智能总目录网页链接 文章目录目录9、Python-web前端Day01-HTML-页面1. Web1. 什么是WEB2. 组成3. Web 服务器4. 浏览器2. HTML 概述1.HyperText Markup Language2. 标记3. 网页3. HTML基础语法1. 标签/标记2. HTML标签介绍3. 完整的网页结构4. 网页头部设置5. 网页主体内容6. 列表标签7. 列表的标签属性8. 列表的嵌套9. 标签的层级结构10. 图像与超链接标签Day02笔记1. 图片与超链接
仿京东首页
见贤思齐
08-27 683
仿京东首页一、整体布局二、代码及知识点通用样式2.1 J_event(顶部通栏的广告) 一、整体布局 J_event(顶部通栏的广告) 快捷导航栏shortcut header 内容区域jd 底部footer 二、代码及知识点 通用样式 *{ margin: 0; padding: 0; } 2.1 J_event(顶部通栏的广告) <div class="J_even...
Python网络爬虫基础
qq_52421831的博客
08-08 2078
python爬虫技术
掌握C++编程中反斜杠续行符的使用方法
01-20
3) 用“//”只能注释当前行的语句，想要将下一行一起注释掉，则可以在该行最后加上反斜杠。 另外，反斜杠除了强制换行的作用之外，还有转义符的意思。如：“\n”表示换行符，”\t” “\b”等，此时反斜杠表示转义，...
Python3.6-MySql中插入文件路径,丢失反斜杠的解决方法
12-16
在Python3.6中，当尝试将文件路径插入到MySQL数据库时，可能会遇到一个问题：路径中的反斜杠（\）会被自动转义，导致丢失。这是因为反斜杠在字符串中通常用于转义特殊字符，例如`\n`表示换行，`\t`表示制表符。在SQL...
URL中斜杠/和反斜杠\的区别小结
10-25
主要介绍了URL中斜杠/和反斜杠的区别小结,纯属个人总结,相对长篇大论较容易理解,需要的朋友可以参考下
php输出反斜杠的实例方法
01-02
按常规写法，我们要输出反斜杠，那就在输出字符串里直接写上反斜杠的符号，但这样可以吗？我们尽管试一下。 运行这个代码的页面，发现页面报错了，报的是语法错误。 为什么会这样，从php文档里我们可以看到，这个...
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 888
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
[HTML]一文掌握
最新发布
CSDN20221005的博客
07-21 532
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
每日60秒新闻早报单页文字版HTML源码
2401_86030425的博客
07-17 282
每日60秒新闻早报单页文字版的，这个很早就有了，最近有用户问我这个怎么实现，其实很简单的只是一个单页而已，这个是PHP版的会将头部图片缓存到本地然后在展示可防止接口信息泄露。
动漫风格动漫404网站维护HTML源码
爱酷码的博客
07-21 465
动漫风格动漫404网站维护HTML源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面。
第一章、算法中的时间复杂度分析
Zjs15630471263的博客
07-20 688
想必打算学习算法的同学听说过这样一个概念：程序≈数据结构+算法。其中数据结构是实现程序的基本框架。而运用算法就是优化程序执行时间或空间上的必要措施。即寻找一个方法使程序的性能达到最优解。
用java方法去除json中带斜杠
11-28
以下是两种Java方法去除JSON中带斜杠的例子： 1. 使用String.replace()方法去除反斜杠 ```java // 现有一个json字符串 String s = "{\"job\":{\"setting\":{\"restore\":{\"maxRowNumForCheckpoint\":0,\"isRestore\":false,\"restoreColumnName\":\"\",\"restoreColumnIndex\":0},\"errorLimit\":{\"record\":100},\"speed\":{\"bytes\":0,\"channel\":1}}}}"; // 解析前去除反斜杠，将反斜杠替换为空字符串 s = s.replace("\\", ""); // 对该字符串做处理 JSONObject jsonObject = JSONObject.parseObject(s);System.out.println(jsonObject); ``` 2. 使用StringEscapeUtils.unescapeJava()方法去除反斜杠 ```java import org.apache.commons.text.StringEscapeUtils; // 现有一个json字符串 String s = "{\"job\":{\"setting\":{\"restore\":{\"maxRowNumForCheckpoint\":0,\"isRestore\":false,\"restoreColumnName\":\"\",\"restoreColumnIndex\":0},\"errorLimit\":{\"record\":100},\"speed\":{\"bytes\":0,\"channel\":1}}}}"; // 解析前去除反斜杠 s = StringEscapeUtils.unescapeJava(s); // 对该字符串做处理 JSONObject jsonObject = JSONObject.parseObject(s); System.out.println(jsonObject); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值