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

最新推荐文章于 2023-02-16 11:51:40 发布

原创最新推荐文章于 2023-02-16 11:51:40 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#HTML制图 #p标签居中div

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

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