杨小杰Blog(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

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

Young小杰2019-10-12 11:12网站搭建(1)759查询中……小标签: html5 技术教程 原创

前言

本来还是一个很简单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常识,搞一个自己喜欢的样式出来。


评论列表:

  • 沙发

  • 手机扫描二维码
    阅读体验更佳