欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

css教程

3段h1标题CSS美化代码

css教程 我的站长站 2020-08-14 共234人阅读

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

3段h1标题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;
}
相关专题
css
css
2021-09-24 78

css是前端开发中的样式语言,学好CSS可以帮助开发出漂亮的模板,css专题为您整理本站所有css相关信息,包含css模板下载,css使用教程分享和css示例代码....

标签 CSS代码
相关推荐
  • CSS代码
  • 左侧固定宽度,右侧随浏览器自适应宽度的CSS代码

    左侧固定宽度,右侧随浏览器自适应宽度的布局在后台框架、左图右文的样式中经常用到。左边固定200PX,右侧宽度随浏览器缩放自动调整大小,我的站长站分享几种实现方法,代码尽量精简,只留关键代码。方法1、左浮动,右margin-left比较推荐的方法,兼容性高,代码也...

    css教程 38 1年前
  • css3海浪波浪动态效果代码

    HTML代码建立一个div,id为wavesDIV,之后使用svg绘制一个图形出来,此时这个图形还是不会懂的,我们需要使用animation来让他动起来<div id="wavesDIV" style="display: block;"> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlin...

    css教程 81 2年前
  • CSS+JS简单的底部浮动搜索框效果代码

    一段CSS+JS简单的底部浮动搜索框效果代码,实现PC移动端底部浮悬代码。CSS代码<style type="text/css">* {margin:0px; padiing:0px;}.login_alert{position:fixed;bottom:0px;left:0px;width:100%;z-index:9999;}.login_alert_close{position:absolut...

    css教程 131 3年前
  • 3段h1标题CSS美化代码
    3段h1标题CSS美化代码

    一段简单的CSS美化h1,h2,h3,h4,h5,h6代码,很简单css美化功能。使用的是比较简单的css样式美化的h1{padding: 0px 20px;border-left: 10px solid #ed515191;background-color: rgba(208, 208, 208,...

    css教程 234 3年前
  • CSS3高光划过效果代码教程

    我们常常看到的高光划过效果,其实用CSS就能实现,CSS3高光划过效果代码教程方法CSS3高光划过效果代码.logo-wrapper { position: relative; font-size:2em; font-weight:700; line-height:39px; overflow:hidden; margin:0;}.logo-wr...

    css教程 99 3年前