给博客添加新年春联-博客也要挂春联!!
使用前建议
建议handsome主题使用,且盒子模型两边为空,背景纯色
如果使用有问题欢迎评论咨询
效果图
直接上代码
将下面这段
压缩版
代码放入>开发者设置>自定义输出head 头部的HTML代码
<style>.new_year_left{height:100vh;position:fixed;left:40px}.new_year_right{height:100vh;position:fixed;right:40px}.fu_btm{border-top:3px solid #f36666;width:100px;height:80vh;background-repeat:no-repeat;background-size:100% 100%;background-image:url(https://cdn.jsdelivr.net/gh/2085886325/-@master/blog_img/1611492685902-1611492685897.png)}.year_ul{padding:0;margin-top:90px;text-align:center}.year_ul li{width:100px;margin:0 auto;height:9vh;font-family:"华文行楷";font-weight:700;font-size:50px;list-style:none;color:#000}.fu_top{width:100px;height:100px;text-align:center;background-repeat:no-repeat;background-size:100% 100%;background-image:url(https://cdn.jsdelivr.net/gh/2085886325/-@master/blog_img/1611492649338-1611492649329.png)}.fu_top h1{margin:32px auto;width:40px;font-family:"华文行楷";display:inline-block;height:40px;color:#000}</style><div class="new_year_left"><div class="fu_top"><h1>福</h1></div><div class="fu_btm"><ul class="year_ul"><li>一</li><li>帆</li><li>风</li><li>顺</li><li>吉</li><li>星</li><li>到</li></ul></div></div><div class="new_year_right"><div class="fu_top"><h1>福</h1></div><div class="fu_btm"><ul class="year_ul"><li>万</li><li>事</li><li>如</li><li>意</li><li>福</li><li>临</li><li>门</li></ul></div></div>
这里是非压缩版,方便大家根据自己博客情况调节代码
<style>
.new_year_left {
height: 100vh;
position: fixed;
left: 40px;
}
.new_year_right {
height: 100vh;
position: fixed;
right: 40px;
}
.fu_btm {
border-top: 3px solid #f36666;
width: 100px;
height: 80vh;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("https://cdn.jsdelivr.net/gh/2085886325/-@master/blog_img/1611492685902-1611492685897.png");
}
.year_ul {
padding: 0;
margin-top: 90px;
text-align: center;
}
.year_ul li {
width: 100px;
margin: 0 auto;
height: 9vh;
font-family: "华文行楷";
font-weight: bold;
font-size: 50px;
list-style: none;
color: #000;
}
.fu_top {
width: 100px;
height: 100px;
text-align: center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("https://cdn.jsdelivr.net/gh/2085886325/-@master/blog_img/1611492649338-1611492649329.png");
}
.fu_top h1 {
margin: 32px auto;
width: 40px;
font-family: "华文行楷";
display: inline-block;
height: 40px;
color: #000;
}
</style>
<div class="new_year_left">
<div class="fu_top"><h1>福</h1></div>
<div class="fu_btm">
<ul class="year_ul">
<li>一</li>
<li>帆</li>
<li>风</li>
<li>顺</li>
<li>吉</li>
<li>星</li>
<li>到</li>
</ul>
</div>
</div>
<div class="new_year_right">
<div class="fu_top"><h1>福</h1></div>
<div class="fu_btm">
<ul class="year_ul">
<li>万</li>
<li>事</li>
<li>如</li>
<li>意</li>
<li>福</li>
<li>临</li>
<li>门</li>
</ul>
</div>
</div>
ps:博客没什么人阿,我的动力怎么来