3accfcc39fbba4edfdea2ace151a221a
文章样式美化保姆级教学

<div class="output_wrapper" id="output_wrapper_id" style="font-size: 15px; color: rgb(62, 62, 62); line-height: 1.8; word-spacing: 2px; letter-spacing: 2px; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center center;"><blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;">
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 0px;">一个坚持原创的小专栏。分享编程知识,提升工作效率,致力于通过简单的语言,把编程这点事讲清楚。涵盖内容:java、设计模式、kafka、leetcode高频题、机器学习等等</p>
</blockquote>
<p class="toc" id="tocid_0" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.7em 0px; margin-left: 25px;"><span class="toc_item" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; display: block;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><a href="#h1" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">1.背景</a></span></span><span class="toc_item" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; display: block;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><a href="#h2" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">2.步骤</a></span></span><span class="toc_item" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; display: block;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><a href="#h21" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">2.1 准备</a></span></span></span><span class="toc_item" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; display: block;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><a href="#h22" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">2.2 实操</a></span></span></span><span class="toc_item" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; display: block;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><a href="#h23" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">2.3 注意</a></span></span></span><span class="toc_item" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; display: block;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><span class="toc_left" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-left: 25px;"><a href="#h24" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">2.4 提升</a></span></span></span></p>
<h2 id="h1" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.4em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">1.背景</span></h2>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.7em 0px;">  今天来教大家一个小技巧,用于实现像本文一样的文章样式,以及如何自定义文章样式。</p>
<h2 id="h2" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.4em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">2.步骤</span></h2>
<h3 id="h21" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">2.1 准备</span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid rgb(239, 235, 233); border-right: 20px solid transparent;"> </span></h3>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.7em 0px;">  首先我们需要做一些准备工作。<br>  1.<strong style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; font-weight: bold; color: rgb(233, 105, 0);">了解markdown格式</strong>,markdown中支持html语句,我们可以通过这种特性去定制一些样式。(即使是不为了修改样式,我也会建议你使用markdown来编写博客,这样可以实现一篇博客发给多个网站,不用调整样式)<br>  我们可以将网页的组成,简单理解成:文本(html)+样式(css)+脚本(js),<br>  2.<strong style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; font-weight: bold; color: rgb(233, 105, 0);">简单了解一下html、css</strong>。这有助于你对文章样式进行<strong style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; font-weight: bold; color: rgb(233, 105, 0);">定制</strong>(不了解也没关系,并不会影响你实现本文的文章样式)</p>
<h3 id="h22" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">2.2 实操</span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid rgb(239, 235, 233); border-right: 20px solid transparent;"> </span></h3>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.7em 0px;">  这里我们需要借助一个markdown在线编辑器,<strong style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; font-weight: bold; color: rgb(233, 105, 0);">md2All</strong>。<br>  http://md.aclickall.com/<br>  接下来我会简单的介绍一下它的使用,首先我们的markdown中的语法,是和html一一对应的,比如<strong style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; font-weight: bold; color: rgb(233, 105, 0);">###</strong>就对应着<strong style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; font-weight: bold; color: rgb(233, 105, 0);">html</strong>中的h3标签,所以我们只需要修改h3标签的css,就可以改变markdown默认的样式。<br>  <strong style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; font-weight: bold; color: rgb(233, 105, 0);">接下来我们就开始实现本文的样式</strong>,点击图中的一键排版。<br></p><figure style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><img src="https://images.xiaozhuanlan.com/photo/2020/d780d3eb37ee87e16254311ae2bd26d3.png" alt="" title="" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; display: block; margin: 0px auto; max-width: 100%;"><figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;"></figcaption></figure><br>  然后我们在排版样式中选择综合示例,这个时候我们就得到了一个本文的排版样式<br><figure style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><img src="https://images.xiaozhuanlan.com/photo/2020/9c5eb07deb2454f5d6d7113d9dcb658c.png" alt="" title="" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; display: block; margin: 0px auto; max-width: 100%;"><figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;"></figcaption></figure><br>  接下来我们需要在Md2All中编写我们的博客,编写完成后,点击上方的<strong style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; font-weight: bold; color: rgb(233, 105, 0);">[复制]</strong>按钮。<br>  我们复制出来的,是这篇博客生成的html。由于markdown支持html语法,所以我们直接将复制出的内容粘贴到我们想要发表文章的网站上就可以了。<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.7em 0px;"></p>
<h3 id="h23" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">2.3 注意</span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid rgb(239, 235, 233); border-right: 20px solid transparent;"> </span></h3>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.7em 0px;">  这里涉及到一个上传图片的问题,给大家分享一个小技巧,我们可以在任意一个我们想发文章的平台上,将我们的图片上传。得到一个url,然后在将它粘进Md2All中,就可以省去我们自己上传图片到图床的步骤了。</p>
<h3 id="h24" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">2.4 提升</span><span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid rgb(239, 235, 233); border-right: 20px solid transparent;"> </span></h3>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.7em 0px;">  最后呢,这只是套用了别人写好的样式,当我们学会了html,css后,就可以自己定义样式了,希望大家都能定制出自己想要的样式。另外,一个比较严重的问题就是有些网站对markdown的兼容做的并不是很好,导致可能会出现问题,还得请大家发完文章看一下,有所斟酌</p>
<p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.7em 0px;"><strong style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; font-weight: bold; color: rgb(233, 105, 0);">  最后,期待您的订阅和点赞,专栏每周都会更新,希望可以和您一起进步,同时也期待您的批评与指正!</strong></p></div>

© 著作权归作者所有
这个作品真棒,我要支持一下!
一个坚持原创的小专栏。分享编程知识,提升工作效率,致力于通过简单的语言,把编程这点事讲清楚。涵盖内容:java、设...
0条评论
top Created with Sketch.