效果展示
css美化代码
.post .entry-content h1{ font-size:25px; font-weight:bold; color: #e50d4c; background-color: #fccad3; border-bottom: 1px solid; padding: 5px 15px; border-left: 5px solid; margin:18px 0px 18px 0px; overflow: hidden; } .post .entry-content h2{ font-size:21px; font-weight:bold; color: #850de8; background-color: #eeeafe; border-bottom: 1px solid; padding: 5px 15px; border-left: 5px solid; margin:18px 0px 18px 0px; overflow: hidden; } .post .entry-content h3{ font-size:17px; font-weight:bold; color: #41b0f4; background-color: #ddf0fe; border-bottom: 1px solid; padding: 5px 15px; border-left: 5px solid; margin:18px 0px 18px 0px; overflow: hidden; } .post .entry-content h4{ font-size:13px; font-weight:bold; color: #20b60b; background-color: #ebfde5; border-bottom: 1px solid; padding: 5px 15px; border-left: 5px solid; margin:18px 0px 18px 5px; overflow: hidden; } .post .entry-content h5{ font-size:10px; font-weight:bold; color: #f1e40f; background-color: #fefeea; border-bottom: 1px solid; padding: 5px 15px; border-left: 5px solid; margin:18px 0px 18px 10px; overflow: hidden; }
代码注释:
.entry-content h5{/*类选择器*/ font-size:10px;/*字体大小*/ font-weight:bold;/*字体加粗,值可以为数字也可以为bold(加粗)*/ color: #f1e40f;/*字体内容颜色*/ background-color: #fefeea;/*背景颜色*/ border-bottom: 1px solid;/*下边框样式:1px为宽度,solid边框样式(有很多样式具体自己查吧),后边还可以加上具体颜色*/ padding使用方法一样: 5px 15px;/*内边距属性:5px为上内边距和下内边距,15px为右内边距和左内边距也可以单独写,具体为:上右下左*/ border-left: 5px solid;/*左边框的样式:和上边的border-bottom使用方法一样*/ margin:18px 0px;/*外边距属性:和上边的padding使用方法一样*/ overflow: hidden;/*当内容显示的内容超出时怎么办:hidden(隐藏超出部分),还有其他的值,自己查一下*/ }
注意:.post .entry-content是指向文章内容位置,大家可以根据自己的主题自定义,我的是:.article-content