使用前建议

建议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：博客没什么人阿，我的动力怎么来

版权属于：不冷

本文链接：https://www.buleng.xyz/archives/129/

转载时须注明出处及本声明

最后修改：2023 年 03 月 19 日 07 : 53 PM
© 允许规范转载
如果觉得此文章有用，请随意打赏