关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

2020-04-08 19:39:07 45点赞 463收藏 24评论

写在前面

说实话用了很久的evernote,最近又转战印象笔记,但是对于Markdown一直没有去用,因为平时word富文本编辑器用的习惯了,在everynote整理笔记也是在word里面修改好了然后再倒入到笔记里面,所以对Markdown编辑方式使用也不多。

最近一段时间呢,发现值得买的很多大神文章排版很是漂亮,以为是首席生活家的特权,经过询问后呐发现是用CSS做的渲染。

既然大妈允许这么做,这么好的工具当然要用起来,最近一段时间也是在摸索学习,一直在试错,近期还算是取得了一点学习成果,今天呢和大家一起分享一下,一方面让大家的文章更加丰富多彩

如果点赞是读者给与的最高的评价,那么一个好的排版是对读者最大的尊敬,对此我深信不疑。 此处疯狂暗示一波。今天借着这篇文章一起学习下,虽然不能说精通markdown和CSS渲染,但是应对文章的排版呢还是绰绰有余的。

正文开始

一、什么是Markdown?

Markdown 是一种轻量级的「标记语言」,创始人为约翰·格鲁伯,用简洁的语法代替排版,目前被越来越多的知识工作者、写作爱好者、程序员或研究员广泛使用。其常用的标记符号不超过十个,相对于更为复杂的 HTML 标记语言来说,Markdown 十分的轻量,学习成本也不需要太多,且一旦熟悉这种语法规则,会有沉浸式编辑的效果。

在码文的过程中,遇到的常用操作有标题设置、引用、加粗、斜体、下划线、插入超链接、插入图片等操作,这些操作在富文本编辑器里需要一个一个的设置。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

在markdown语言里,用简单的符号就可以编写完成,思路不容易被打断,最后CSS渲染就可以产生我们想要的格式

诸如微信公众号、知乎、今日头条、知识星球等平台只要把代码原文复制进去,用markdownhere渲染就可以完整格式的调整,只要保存好了这个原始文档,到哪里都可以渲染发布。

关于 Markdown语言入门呢,网上很多,做的比较全面的感觉印象笔记关于于markdown语言的解释,每个版本对 Markdown基本是相通的,稍微有一点区别,码文常用的基本是相通的。具体可以参考印象笔记 Markdown 入门指南点击访问,本文相关CSS及主题下载:下载地址,提取码:wre5

说一下在值得买或者微信码文用得比较多语法:

1.标题设置

一级标题、二级标题、三级标题,分别用# ,## ,###,就可以完成三级标题的设置,简单的说就是在标题前面加上一#然后点下空格就完成了。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

2.加粗文本

加粗呢,这里就是强调作用,一般我们在富文本编辑下, 直接用ctrl+B 快捷键可以实现,

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

3.斜体、下划线、删除线、分隔线、引用

上面这些也是用的比较多,在markdown中也可以通过符号语言简单的实现,还是挺好记得,因为语言也不是很难,基本上就是用*,-,等的组合,比如三个*或者三个-,就是下划线,在文字的两端各打一个*就是斜体,各打**就是强调,到时候渲染的时候会自动识别格式。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

4.有序列表&无序列表

在描述或者引用的时候,经常会用到列表,列表分为有序列表和无序列表,这两种列表也是非常容易实现,用下面的代码就可以完成。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

5.超链接和插入图片

超链接的插入语言和图片插入语言差不多得,中括号内是名称,圆弧括号内是地址,因为张大妈发文的时候要求要将网址变成超链接。所以这个在发文中经常遇到,拿出来说以下。

  • 插入超链接: [链接名称](链接地址)

  • 插入图片: ![图片名称](图片地址)

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

关于 Markdown的语言呢,我近期也做了详细的整理,下面分享给大家。

6.现在比较流行的 Markdown 书写平台:

①Typora(Windows 平台)

这个必须放在第一位,原因有三

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

  • 首先呢,Typora将预览框和编辑框整合在一起了,也就是说输入代码语言之后,会自动识别为预览模式,可以看到实际渲染的效果。
    从个人使用的角度上来说,Typora的这种实时预览的模式符合我的使用习惯。左边编辑右边预览的模式,对我来说还是有笔记强烈的割裂感的。在左边完成输入之后,还要移动眼睛到右边查看效果。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

  • 其次,因为是开源的,有很多主题可以下载,找一个合适主题码字还是很舒服的,这里呢一定注意是预渲染模式,我们看到的是将来发布的实际效果。访问地址

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

  • 第三编辑器实时预览模式下呢还兼顾了部分富文本编辑的功能,比如图片的拖拽插入,CTRL+B加粗,ctrl+I斜体,ctrl+U下划线,操作之后,会自动编辑为markdown语言。一定程度上提高了码字效率。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

[主题地址](http://theme.typora.io

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

下载主题之后,解压然后复制到主题文件夹即可。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

②Ulysses(Mac 平台)

也是经典编辑器,不过随着用户的陈定已经变成收费了,免费的这么多,这个就算了。访问地址

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

③Cmd Markdown 编辑阅读器

初学者友好,个人自用,Windows/Mac 都可以,还有网页版主页地址

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

④马克飞象

马克飞象是一款专为印象笔记(Evernote)打造的 Markdown 编辑器,通过精心的设计与技术实现,配合印象笔记强大的存储和同步功能,带来前所未有的书写体验。访问地址

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

⑤Yu Writer

可以利用Yu Writer 自由写作,并在统一的文档库中进行管理,Yu Writer 会自动保存你的写作进度及操作记录,随时回滚至以前版本。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

除了以上几款专门的 Markdown 软件,“有道云笔记” 和 “印象笔记”, Bear(iOS/Mac 平台),也有 Markdown 服务。

二、CSS渲染

上面说完了Markdown文章语言的编写,下面就进入到最后发布的渲染了,这里我们需要用到一个浏览器插件,Markdown here。这款插件将浏览器中编辑器里的 Markdown 语言文本转换成渲染过后的网页文本。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

关于浏览器插件的安装,前面写过一期文章,现在Edge、chrome、firefox、其他 Chromium 内核浏览器都可以安装插件。

『干货集结号』 篇十二:让你『放飞自我』的浏览器拓展分享——如何打造『高效的』冲浪神器~本篇文章来自#大男孩的快乐#征稿活动。晒出你作为一个大男孩的快乐源泉,成功投稿可获得50金币奖励,更有三千元乐高大奖与达人Z计划专属权益等你拿哟~>活动详情戳这里【更多工具】->【扩展程序】,点开就可以了。或者在地址栏输入Chrome://extensions/,按回车打开扩展程序页面,看到右上角有纵笔浮生| 81 评论49 收藏891查看详情

安装完成后,右击插件图标选择选项,进入Markdown here的后台设置。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

在基本渲染CSS,这个选项里面进行参数设置,对于非专业出身的小伙伴,总不能为了码文调个格式还要去学习下CSS语言,当然感兴趣的可以深入学习一下,如果深入学习呢,这里也推荐一个网站,基本的语言都有,本文也是参照此网站,对代码进行的修改。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

本着方便快速使用的精神,我们简单研究下代码,并且研究的过程中呢,对代码进行了标注。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

首先我们先来熟悉一些CSS代码中用到的格式限定,下面这些呢都不用记,只是我们再修改CSS语言的时候,知道修改这个参数会发生什么变化就可以了,常用的也就是修改颜色、标题居中还是居左。了解下面这些的用法之后,拿过一个CSS代码稍微调整一下格式,复制粘贴到Markdown here的后台就可以使用了。

1.码文用到的修改

上面我们提到过,修改格式,一般就是颜色、加粗、下划线、分割线等,首先要在CSS渲染中找到这些主体的部分,然后,再修改里面的控制条件。


  • .markdown-here-wrapper { /*Markdown Here 的全局配置,没有默认值*/

  • strong, b{ /*strong 加粗,用粗体显示,也可以自定义自己的强调方式 */

  • em, i {/*斜体强调---*/ }

  • hr { /*水平线分割---*/}

  • img{/*图片设置*/}

  • del { /*删除线*/}

  • a:link { /* 未被访问的链接 */}

  • a:visited {/* 已被访问的链接 */}

  • a:hover {/* 鼠标指针移动到链接上 */}

  • p { /*段落设置*/}

2.格式限定

  • font-size: 14px; /*字号em默认是相对16px的大小,也可直接用px作单位*/

  • line-height:1.8em; /*行高,行间距,可用百分比,数值倍数,像素设置*/

  • word-spacing: 0; /*字间距*/

  • font-family:/*字间距*/

  • font-style: bold !important; /*字重*/

  • letter-spacing: 0.1em; /*字母间距*/

  • color:#CB0606 !important; /*颜色*/

  • !important用来提高本行代码的优先级,如果前面已经设置了格式,这里加入!important,优先采用此

3.边界限定: 

margin决定了元素的外边界, padding决定是内边界,有四个边界,按照上、右、下、左的顺时针方式定义,例如,margin:12px 10px 14px 0; 的四个属性分别是上、右、下、左,即分别是 margin-top:12px;margin-right:10px;margin-bottom:14px;margin-left:0;

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

当属性后只有三个值时:

  • 第一个值是 padding-top 

  • 第二个值是 padding-right 和 padding-left 的值(因为左右的值相同,所以可以写到一起)

  • 第三个值是 padding-bottom 的值

只有两个值

  • 第一个值是 padding-top 和 padding-bottom 的值

  • 第二个值是 padding-right 和 padding-left 的值

只有一个值 :那就是上下左右的值都相同。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

4.全局设置

这一部分是全局设置,主要设置的是字号,行高,和字间距。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

下面这部分基本上不用修改,也已经做了标注,如果尝试修改也可以试下。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

5.加粗、斜体、水平分割线等的格式设置

这一部分呢主要是加粗、斜体的颜色设置,为了统一风格,和文章整体色调搭配,我们需要对斜体、删除线、等进行颜色调整,颜色代码采用的十六进制 (hex) 表示法进行定义,关于颜色代码我们放到后面说。推荐两个网站,常见的配色基本上都有了。在整理的过程中,将一些常见的颜色注释在了代码里面,基本上满足需求了。

在这些模块里面,我们将这些代码比如,紫色#510E79、笑来绿色#009688、黑色#545454、亮红#FA5151、暗红#CB0606、金色#f79646、笑来金色#BF360C 、深蓝#2e6e9e、灰色BDBDBD、备注灰色#a5a5a5进行替换,渲染后颜色就会变化

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

水平分割线

重点说一下水平分割线的这段代码,我们看到里面是用border来定义的,如果用border是上下两根线,我们在border后面输入一个1PX,分割线其实显示的2px的效果,会有点粗,所以下面将border-top和border-bottom也放进来了,用哪个做分割都可以,选中一个后,把其他的数字改成0就可以了。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

  • hr { /*水平线分割---*/

  • border: 0 solid#BF360C; /*双跟分割线 粗细,solid颜色 #a5a5a5 */

  • border-top:1px solid#BF360C !important;/*上分割线 粗细,颜色#ddd跟随主设定,solid类型-不写是跟随标题主色,替换了显示新颜色 */

  • border-bottom:0 solid#BF360C !important ; /* 下分割线,粗细solid类型-不写是空心,颜色 */

  • margin:1.5em auto;!important; /*外边距*/

6.引用模块

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

border-left这个是引用的左边框,2个像素款,solid后面是竖线的颜色,如果想要改颜色把颜色代码替换掉。 padding内边距,根据上面说的,有两个值的时候,第一个值代表的意思是上下,第二个值是左右,也就效果是,上下内边距为0 ,左右空出10Px。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

引用示例,什么值得买引用示例,什么值得买引用示例,什么值得买引用示例,什么值得买引用示例,什么值得买引用示例,什么值得买引用示例,什么值得买引用示例,什么值得买引用示例,什么值得买引用示例,什么值得买

7.段落设定

上面在整体设定的时候已经对行高、字间距做了定义,这里只是强制设定下字体,是否首行缩进,和段落的边距,如果你觉得过宽或者过窄可以从这里设定。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

  • >p { /*段落设置*/

  • font-size: 14px !important;

  • text-indent:0 ;/*首行缩进*/

  • margin: 1.8em 5px !important;/*上下1.8em、左右5px*/

  • /*页边距用padding属性调整*/

  • }

8.标题格式定义

标题设定这块是用的比较多的,我们把代码摘出来看,一共分成了h1, h2, h3, h4, h5, h6 ,常用的也就前三级标题,后面的标题呢,我们可以给他们赋予颜色或者特别的格式,用来当做多用法的强调,不过整篇文章的颜色不宜过多,颜色过多,会显得比较乱。

在注释这里我将几款常用的颜色也备注上了,可以根据需求设置,其中有几款是李笑来老师代码中的颜色,后面也会分享整个代码。下载地址,提取码:wre5

  • h1, h2, h3, h4, h5, h6 { /*各级标题统一设置紫色#510E79、笑来绿色#009688、黑色#545454、亮红#FA5151、暗红#CB0606、金色#f79646、笑来金色#BF360C 、深蓝#2e6e9e、灰色BDBDBD、备注灰色#a5a5a5*/

  • margin: 15px auto; !important;/*段前、缩进值*/

  • font-style: bold !important; /*字重、加粗?倾斜*/

  • color: #009688 !important; /*颜色*/

  • text-align:left !important; /*标题位置,center,right,left*/

  • }

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

整体设置里面,对边界、字体、颜色、还有标题对齐方式,用的最多的就是颜色和标题对齐方式,从备注中可以看出,有三种对齐方式,做对齐,右对齐和居中,用的较多的就是居中和左对齐,我们这里可以调整所有标题的对齐方式,还有 记住这段代码text-align:left !important; /标题位置,center,right,left/,后面设置每个标题的对齐方式会用到。

9.标题独立设置

上面设置了所有标题的统一格式,这里来到每个标题的独立设置。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

从代码上看,一级标题设置的比较多,设置了字体大小,颜色,和对齐方式,这段代码在这里又出现了,虽然上面我们了所有代码的对齐方式,一级标题我们再使用的时候有时候会居中对齐,有时候会左对齐在这里设置。下面border开头的三行,是标题带的分割线的设置。

  • h1 {

  • font-size:18px !important;

  • color:#CB0606 !important;/*颜色*/

  • text-align:left !important; /*标题位置,center,right,left*/

  • border-top:1px solid#BF360C !important;/* 粗细,颜色#ddd跟随主设定,solid类型-不写是跟随标题主色,替换了显示新颜色 */

  • border-bottom:0 solid#BF360C !important ; /* 粗细solid类型-不写是空心,颜色 */

  • padding:20px 0 0 0 !important;/*内边距,控制标题和间隔线的距离第一个数,控制上划线的距离。上右下左,留白距离、缩进值*/

  • }


  • h2 {

  • font-size:16px !important;

  • color:#009688 !important;

  • }


  • h3 {

  • font-size: 14px;

  • color:#009688 !important; /*颜色*/

为了方便写作,这里我们对一级标题做了个带分割线的效果。其实用的是元素的上下边框功能。第一句是上边框,意思就是横线会在文字的上方出现。

border-top:1px solid#BF360C !important;/* 粗细,颜色#ddd跟随主设定,solid类型-不写是跟随标题主色,替换了显示新颜色 */

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

第二句是下边框,我们可以看到这里数字是0,也就是下边框是关掉的,如果改成1px,则标题的上下都会有横线出现。这个值同时决定了横线的粗细。

第三句呢是用来控制标题文字到横线的距离,这里为了方便修改写出了四个值,上面说到边距的定义方式是从上面开始顺时针,分别是上边距、右边距、下边距和左边距,现在是用上横线的状态,padding:20PX,说面文字到上横线,即上边框的距离是20px,但是如果我们要是用下横线了,就需要把第一个值改为0,第三个值改成某个数值。

  • border-bottom:0 solid#BF360C !important ; /* 粗细solid类型-不写是空心,颜色 */

  • padding:20px 0 0 0 !important;/*内边距,控制标题和间隔线的距离第一个数,控制上划线的距离。上右下左,留白距离、缩进值*/

同样的二级标题和三级标题也是同理修改,如果不需要带横线直接删掉就可以了。

10.关于颜色代码

推荐两个网址:第一个是w3school可点击访问,这个是专业的CSS代码网站,很多语言定义是从这里查的,颜色部分这里都有,可以直接到这里复制。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

第二个是一个配色网站,这里输入某个颜色,会出现相应的配色,这样的话可以很快完成相应颜色的调整。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

整个代码编辑完了之后呢,我们复制粘贴到Markdown here后台。插件会自动保存并同步已做好的代码设置。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

也可以进行效果预览,如果效果不理想,在上面再进行微调。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

将写好的markdown文章放到编辑框里面右击选择转换,或者点击右上角的图标可以完成渲染。也可以一段一段的进行渲染,这样写一部分渲染一部分我感觉是最省力的。

因为在写的过程中,要上传图片。大妈无法拉取图床的图片到平台库,用外部图片不安全,万一有一点图床倒闭,文章中的图片就挂了。 文中相关主题和CSS渲染链接,需要的下载,下载地址,提取码:wre5


11.Paste to Markdown


关于如何将富文本转换成markdown语言,一直在用的一个网址还不错,也分享给大家,复制直接到这个网页粘贴就可以生成markdown语言,然后可以用typora编辑器进行编辑了。访问地址

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

总结


好了今天的分享到这里吧,非码农、非专业人士,硬着脑袋,只为了摆平排版问题,果然这东西写多了容易秃头,如果有问题请指正讨论,感谢支持。

如果喜欢记得点赞哦,如果喜欢我的东西,点个关注啦关于Markdown here CSS渲染的经验分享——让你的文章排版更优美,可读性更高

往期热文推荐:

工具人在线养成计划——这些收藏了绝对会用的『在线工具』已集结完毕~~本篇文章来自#大男孩的快乐#征稿活动。晒出你作为一个大男孩的快乐源泉,成功投稿可获得50金币奖励,更有三千元乐高大奖与达人Z计划专属权益等你拿哟~>活动详情戳这里纵笔浮生| 106 评论12 收藏1k查看详情软件哪里去找?——安全而无广告的『神级下载网站』~~绝对不能错过写在前面作为电脑达人或者效率达人,软件是必不可少之物,工欲善其事必先利其器。而随着太平洋、ZOL之类的网站主键变成流氓的温床,再加上裸奔状态下的某度,简直就是流氓的狂欢。下载软件去官网是最好的,关键是你能从广告里找到官网我就算你赢,再有就是某些国外的神器真的不好找官网。如何找到干净的软件下载网站,如纵笔浮生| 1k 评论241 收藏18k查看详情数据哪里去挖?大数据时代的反向操作~~2 分钟教你『找数据查资料』本篇文章来自#大男孩的快乐#征稿活动。晒出你作为一个大男孩的快乐源泉,成功投稿可获得50金币奖励,更有三千元乐高大奖与达人Z计划专属权益等你拿哟~>活动详情戳这里纵笔浮生| 314 评论33 收藏3k查看详情
展开 收起

Microsoft 微软 Office 365 个人版

Microsoft 微软 Office 365 个人版

229元起

《Nebo》触屏笔记类软件 Windows版

《Nebo》触屏笔记类软件 Windows版

暂无报价

任天堂Switch游戏 NS塞尔达传说 荒野之息 旷野之息 中文现货

任天堂Switch游戏 NS塞尔达传说 荒野之息 旷野之息 中文现货

310元起

Nintendo 任天堂 Switch游戏卡带《大航海时代4 威力加强版 HD》 中文

Nintendo 任天堂 Switch游戏卡带《大航海时代4 威力加强版 HD》 中文

196元起

NS switch 向下走 going under 下行 存档修改金钱技能

NS switch 向下走 going under 下行 存档修改金钱技能

10元起

Day One(日记+笔记)

Day One(日记+笔记)

暂无报价

任天堂Nintendo Switch 塞尔达传说 天空之剑 盒装版游戏实体卡带 海外版卡带

任天堂Nintendo Switch 塞尔达传说 天空之剑 盒装版游戏实体卡带 海外版卡带

319元起

《Cardiograph(心电图仪)》iOS应用软件

《Cardiograph(心电图仪)》iOS应用软件

暂无报价

DaVinci Resolve studio 16 达芬奇多功能视频调色软件 买断式授权 序列号卡片 一号两机 3个工作日内发货

DaVinci Resolve studio 16 达芬奇多功能视频调色软件 买断式授权 序列号卡片 一号两机 3个工作日内发货

2899元起

现货任天堂 Switch游戏卡 NS卡带 幻奏咖啡厅 幻想Enchante 中文

现货任天堂 Switch游戏卡 NS卡带 幻奏咖啡厅 幻想Enchante 中文

328元起

《CanOpener(耳机音质调试)》iOS应用软件

《CanOpener(耳机音质调试)》iOS应用软件

暂无报价

Nintendo 任天堂 超级马力欧 奥德赛 游戏卡带

Nintendo 任天堂 超级马力欧 奥德赛 游戏卡带

286元起

Nintendo 任天堂 Switch系列《哆啦A梦 牧场物语》ns游戏卡 中文正版

Nintendo 任天堂 Switch系列《哆啦A梦 牧场物语》ns游戏卡 中文正版

275元起

【双会员179元】WPS超级会员年卡+百度文库会员年卡 官方卡密

【双会员179元】WPS超级会员年卡+百度文库会员年卡 官方卡密

279元起

AOC 远程云端广告发布系统服务一年 广告机信息发布系统软件

AOC 远程云端广告发布系统服务一年 广告机信息发布系统软件

199元起

【双会员99元】WPS会员年卡+百度文库会员年卡 官方卡密

【双会员99元】WPS会员年卡+百度文库会员年卡 官方卡密

189元起
24评论

发表评论请 登录
  • 最新
  • 最热
评论举报

请选择举报理由

相关好价推荐
查看更多好价

相关文章推荐

更多精彩文章
更多精彩文章
最新文章 热门文章
463
扫一下,分享更方便,购买更轻松