发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程 CSS代码

1. 使用CSS样式美化H1标题，首先需要为H1标签添加一个类名，例如：`

这是一个美丽的标题

`。 2. 接下来，在CSS文件中定义这个类名的样式，可以使用伪元素`::before`和`::after`来添加装饰效果，例如：`.beautiful-title::before { content: ""; display: inline-block; width: 10px; height: 2px; background-color: #333; margin-right: 10px; vertical-align: middle; } .beautiful-title::after { content: ""; display: inline-block; width: 2px; height: 10px; background-color: #333; margin-left: 10px; vertical-align: middle;

一段简单的CSS美化h1,h2,h3,h4,h5,h6代码，很简单css美化功能。

使用的是比较简单的CSS样式美化的

h1{padding:0px20px;border-left:10pxsolid#ed515191;background-color:rgba(208,208,208,0);font-size:19px;line-height:30px;color:cornflowerblue;font-weight:bold;margin:5px0;}h2{padding:0px20px;border-left:10pxsolid#BF51ED91;background-color:rgba(208,208,208,0);font-size:18px;line-height:30px;color:cornflowerblue;font-weight:bold;margin:5px0;}h3{padding:0px20px;border-left:10pxsolid#6495ed91;background-color:rgba(208,208,208,0);font-size:17px;line-height:27px;color:cornflowerblue;font-weight:bold;margin:5px0;}h4{padding:0px20px;border-left:10pxsolid#e2aa2b91;background-color:rgba(208,208,208,0);font-size:16px;line-height:24px;color:cornflowerblue;font-weight:bold;margin:5px0;}h5{padding:020px;border-left:10pxsolid#64c1c191;background-color:rgba(208,208,208,0);font-size:15px;line-height:21px;color:cornflowerblue;font-weight:bold;margin:5px0;}

使用的是before这种伪元素进行美化的，由于该样式富含机械性，下面只举例一个，孟坤博客效果

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

大前端模版香效果

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

h3{margin:15px015px-20px;padding:025px;border-left:5pxsolid#51aded;background-color:#f7f7f7;font-size:18px;line-height:40px;}

相关专题