使用HTML制作一张图片解决方案

博主在无法找到美工帮助下,使用HTML和CSS自行设计了一款朋友圈风格的广告位招租图片,分享了代码实现过程及最终效果。

效果图

最近看短视频,看到一个微信的朋友圈的图片上面有个广告招租的文字,觉得挺好玩的,博主就想找美工朋友帮忙制作一下这张图,无奈美工小伙伴,脾气比较大,博主无果后,就自己用HTML画了出来记录一下,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: absolute;
            left: 350px;
        }
        .itm {
            background-color: black;
            width: 414px;
            height: 736px;
            position: relative;
        }

        p {
            font-weight: bolder;
            width: 100%;
            font-size: 55px;
            font-family: "楷体";
            color: aliceblue;
            position: absolute; top: 50%; right: -15%; transform: translateY(-65%);
        }
    </style>
</head>

<div class="itm">
    <p>广告位招租</p>
</div>
</body>
</html>

效果图如下:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明哥.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值