腾讯课堂——IMWeb训练营: Day2 作业

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

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

<!-- 腾讯课堂 IMWeb训练营 Day2 作业-->

<!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>


效果如下图:







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值