自适应图片广告代码+图片右下角带“广告”小字

作者：867800868日期：2024-04-30浏览：6006分类：生活常识

今天全网找广告代码，基本上没有满意的，然后摸索着写了一个，图片广告代码，图片右下角有“广告”字样，广告里面大体位置都有汉字标识，就算不懂代码也可以很轻易上手，喜欢的来看看吧，目前只做了电脑端，手机端可能还需要部分调整。

电脑端截图：

下面是代码：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>图片广告示例</title>  
<style>  
    /* 这里将包含CSS样式，请将其放在<style>标签内 */  
</style>  
</head>  
<body>  
  
<div>  
    <!-- 两个横大图 -->  
    <div>  
        <a href="https://sz116.com/fyxm/33.html">  
            <img src="https://sz116.com/ad/dgg.jpg" alt="大图广告1">  
            <span>广告</span>  
        </a>  
    </div>  
    <div>  
        <a href="https://sz116.com/ad.html">  
            <img src="https://sz116.com/ad/2400x140.png" alt="大图广告2">  
            <span>广告</span>  
        </a>  
    </div>  
  
    <!-- 两排四个小图 -->  
    <div>  
        <div>  
            <div>  
                <a href="https://sz116.com/fyxm/33.html">  
                    <img src="https://sz116.com/ad/shoujizq468x60.jpg" alt="小图广告1">  
                    <span>广告</span>  
                </a>  
            </div>  
            <div>  
                <a href="https://sz116.com/fyxm/3.html">  
                    <img src="https://sz116.com/ad/shoujizq468x60.jpg" alt="小图广告2">  
                    <span>广告</span>  
                </a>  
            </div>  
        </div>  
        <div>  
            <div>  
                <a href="https://sz116.com/fyxm/33.html">  
                    <img src="https://sz116.com/ad/188G.png" alt="小图广告3">  
                    <span>广告</span>  
                </a>  
            </div>  
            <div>  
                <a href="https://sz116.com/fyxm/33.html">  
                    <img src="https://sz116.com/ad/xllk.png" alt="小图广告4">  
                    <span>广告</span>  
                </a>  
            </div>  
        </div>  
    </div>  
</div>  
  
</body>  
</html>

<style>  
.ad-container {  
    display: flex;  
    flex-direction: column;  
    width: 100%;  
    margin-top: 5px; /* 顶部间距 */  
}  
  
.large-ad {  
    margin-bottom: 2px; /* 大图之间的间距 */  
}  
  
.large-ad img, .small-ad img {  
    width: 100%;  
    height: auto;  
    display: block;  
}  
  
.small-ads {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
}  
  
.small-ad-row {  
    width: 100%;  
    display: flex;  
    justify-content: space-between;  
    margin-bottom: 2px; /* 小图行之间的间距 */  
}  
  
.small-ad {  
    flex: 0 0 calc(50% - 1px); /* 减去间距的一半 */  
    margin-bottom: 2px; /* 小图之间的间距 */  
}  
  
.ad-link {  
    position: relative;  
    display: block;  
    overflow: hidden; /* 确保广告标签不会溢出图片 */  
}  
  
.ad-label {  
    position: absolute;  
    right: -4px;  
    bottom: 5px;   
    color: white; /* 文字颜色为白色 */  
    padding: 2px 5px; /* 内边距调整 */  
    border-radius: 3px; /* 圆角 */  
    font-size: 9px; /* 字体大小 */  
}  
</style>

猜你还喜欢

最近发表

Copyright© 手赚网，鄂ICP备2023001650号-10
本站资源均从互联网上收集，仅供学习和交流使用；请遵循相关法律法规；
本站一切资源不代表本站立场，如有侵权、后门、不妥，请联系删除，敬请谅解！联系方式E-mail：suisz@qq.com
关于我们| 广告合作| 我要投稿| 免责声明| XML地图