css 标题栏 效果 |vue 全局scss变量

下面给大家介绍两种常用的CSS标题栏效果，希望对大家有所帮助。

/* 第一种：下划线标题栏 */
h1 {
font-size: 24px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/* 第二种：背景色标题栏 */
h2 {
font-size: 18px;
font-weight: 500;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}

首先介绍一下第一种下划线标题栏。这种效果适用于需要强调信息的场合，比如重要的新闻标题或产品名称。大家可以通过给h1标签添加下边框线来实现这种效果。同时，为了让标题看起来更加醒目，大家还可以设置字号和加粗。

接下来是第二种背景色标题栏。这种效果适用于需要突出显示的信息，比如页面的主标题或导航栏。大家可以通过给h2标签添加背景色来实现这种效果。同时，为了让标题看起来更加美观，大家还可以设置字号、文字颜色和圆角边框。