前言
本来还是一个很简单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; }效果可以参考AE博客其中一篇文章http://www.aeink.com/245.html
总结
使用前请确定自己会css,否则自己去查百度进行调用吧,每个人的文章div class标签都不同,没办法统一
其实每个人都有不同的写文和排版风格,如果你喜欢的话,可以尝试一下。
当然你也可以自己学习一下css常识,搞一个自己喜欢的样式出来。
发表评论: