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

最新推荐文章于 2024-08-13 01:30:21 发布

明哥.

最新推荐文章于 2024-08-13 01:30:21 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： HTML制图 p标签居中div

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.youkuaiyun.com/weixin_40845165/article/details/83930889

博主在无法找到美工帮助下，使用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>

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