雷神短歌之HTML布局-优快云博客

本文链接：https://blog.youkuaiyun.com/timnnx/article/details/70201749

本文介绍了一个使用HTML和CSS实现的诗歌布局案例，通过精确的定位和样式设置，展示了如何让文字在图片上竖直排列并居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>

<html>
<head>
   <title>Day2-雷神短歌</title>
   <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
   <style type="text/css">
       #poetry {
           position:absolute; left: 0; right: 0; top: 0; bottom: 0;
           margin: auto;   /* 上一行代码和这一行代码，组合起来实现了div的居中对齐*/
           width: 550px;
           height: 300px;

       }
       img {
           position: relative;
           left: 0px;
           top: 0px;
           width: 550px;
           height: 300px;
           border-radius: 20px;   /* 图片圆角效果 */
           -moz-border-radius: 20px;
           -webkit-border-radius: 20px;
           box-shadow: 2px 2px 3px #aaa;   /* 边框阴影效果 */
           -moz-box-shadow: 2px 2px 3px #aaa;
           -webkit-border-radius: 2px 2px 3px #aaa;
           z-index: -1;   /* 使图片展现次序小于文字，实现文字浮于图片的效果 */
       }
       p {
           font-family: LiSu;
       }
       #p1 {
           position: relative;
           left: 500px;
           top: -300px;
           width: 20px;   /* 通过将宽度设小，实现文字竖直排列 */
           line-height: 24px;
       }
       #p2 {
           position: relative;
           left: 470px;
           top: -390px;
           width: 20px;
           line-height: 24px;
       }
       #p3 {
           position: relative;
           left: 440px;
           top: -480px;
           width: 20px;
           line-height: 24px;
       }
       #p4 {
           position: relative;
           left: 410px;
           top: -585px;
           width: 20px;
           line-height: 24px;
       }
   </style>
</head>

<body>
   <div id="poetry">
       <img src="http://i2.muimg.com/591548/e531ed630569b027.jpg" />
       <p id="p1">隐约雷鸣</p>
       <p id="p2">阴霾天空</p>
       <p id="p3">但盼风雨来</p>
       <p id="p4">能留你在此</p>
   </div>
</body>

</html>

效果如下图：