h1 h2 h3 h4 html,美化h1,h2,h3,h4,h5,h6教程

前言

本来还是一个很简单css美化功能，很多同学在问，小杰就收集和整理一下吧

收集

1、小杰博客所用的样式

使用的是比较简单的css样式美化的h1{padding: 0px 20px;border-left: 10px solid #ed515191;background-color: rgba(208, 208, 208, 0);font-size: 19px;line-height: 30px;color: cornflowerblue;font-weight: bold;margin: 5px 0;}h2{padding:0px 20px;border-left: 10px solid #BF51ED91;background-color: rgba(208, 208, 208, 0);font-size:18px;line-height: 30px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}h3{padding:0px 20px;border-left: 10px solid #6495ed91;background-color: rgba(208, 208, 208, 0);font-size:17px;line-height: 27px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}h4{padding:0px 20px;border-left: 10px solid #e2aa2b91;background-color: rgba(208, 208, 208, 0);font-size:16px;line-height: 24px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}h5{padding:0 20px;border-left: 10px solid #64c1c191;background-color: rgba(208, 208, 208, 0);font-size:15px;line-height: 21px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}

效果如下：

这是h1

这是h2

这是h3

这是h4

这是h5

2、孟坤博客

使用的是before这种伪元素进行美化的，由于该样式富含机械性，下面只举例一个h3:before{

font-weight: 600;    position: absolute;    top: 0;    left: -15px;    content: '#';    color: #eb5055;}h3{position: relative;}

效果可以去孟坤博客查看

3、大前端模版

这个样式对块化的界面显示会好看很多h3{

margin: 15px 0 15px -20px;    padding: 0 25px;    border-left: 5px solid #51aded;    background-color: #f7f7f7;    font-size: 18px;    line-height: 40px;}

总结

使用前请确定自己会css，否则自己去查百度进行调用吧，每个人的文章div class标签都不同，没办法统一

其实每个人都有不同的写文和排版风格，如果你喜欢的话，可以尝试一下。

当然你也可以自己学习一下css常识，搞一个自己喜欢的样式出来。

收藏 | 0点赞 | 0

打赏