Yoo趣儿

Yoo趣儿 › Geek › 站长 › 文心一言生成的2横大图2横4小图广告代码 来个大佬看看有 ...

文心一言生成的2横大图2横4小图广告代码 来个大佬看看有没有需要修改的地方

查看 42|回复 2
作者：余神   
演示图电脑端  手机端还没测试


2x4.png (296.06 KB, 下载次数: 0)
下载附件
保存到相册
5小时前 上传

下面是html代码：
[ol]
  •   
  •   
  •   
  •   
  •   
  • 图片广告示例  
  •   
  •     /* 这里将包含CSS样式，请将其放在标签内 */  
  •   
  •   
  •   
  •   
  •   
  •       
  •       
  •          
  •             


    dgg.jpg (20.21 KB, 下载次数: 0)
    下载附件
    保存到相册
    5小时前 上传

      
  •             广告  
  •          
  •       
  •       
  •          
  •             


    2400x140.png (31.08 KB, 下载次数: 0)
    下载附件
    保存到相册
    5小时前 上传

      
  •             广告  
  •          
  •       
  •   
  •       
  •       
  •          
  •               
  •                   
  •                     


    shoujizq468x60.jpg (13.77 KB, 下载次数: 0)
    下载附件
    保存到相册
    5小时前 上传

      
  •                     广告  
  •                   
  •               
  •               
  •                   
  •                      
  •                     广告  
  •                   
  •               
  •          
  •          
  •               
  •                   
  •                     


    188G.png (109.21 KB, 下载次数: 0)
    下载附件
    保存到相册
    5小时前 上传

      
  •                     广告  
  •                   
  •               
  •               
  •                   
  •                     


    xllk.png (106.23 KB, 下载次数: 0)
    下载附件
    保存到相册
    5小时前 上传

      
  •                     广告  
  •                   
  •               
  •          
  •       
  •   
  •   
  •   
  • [/ol]复制代码下面是css：
    [ol]
  •   
  • .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; /* 字体大小 */  
  • }  
  • [/ol]复制代码

    下载次数, 广告

    • 相关帖子

    googlevip   
    我怎么画不出来。怎么使用指令的？
    sufylaw   
    这么厉害吗
    返回列表
    您需要登录后才可以回帖 登录 | 立即注册

    AD1

    热门主题

    热门板块

    问与答分享发现分享创造奇思妙想分享邀请码商业推广优惠信息PythonPHPJavaJavaScriptNode.jsGo语言C++HTML

    公告

    标签|小黑屋|Yoo趣儿

    GMT+8, 2025-1-12 15:47 , Processed in 0.014819 second(s), 13 queries , Gzip On, MemCached On.

    Powered by Discuz! X3.2

    The happiest thing in the world is to strive for an ideal.

    返回顶部