一段简单的CSS美化h1,h2,h3,h4,h5,h6代码,很简单css美化功能。
使用的是比较简单的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;}
使用的是before这种伪元素进行美化的,由于该样式富含机械性,下面只举例一个,孟坤博客效果
h3:before{ font-weight: 600; position: absolute; top: 0; left: -15px; content: '#'; color: #eb5055; } h3{position: relative;}
大前端模版香效果
这个样式对块化的界面显示会好看很多
h3{ margin: 15px 0 15px -20px; padding: 0 25px; border-left: 5px solid #51aded; background-color: #f7f7f7; font-size: 18px; line-height: 40px; }
本文转载自:精准像素:11px.cn ,感谢作者分享实用知识