当前位置:首页 > 学习心得 > 正文内容

Css广告代码(图文并茂版)

admin4年前 (2021-09-13)学习心得718

图文并茂版广告代码用到的CSS如下:

.xmlist .list .app{position:relative;padding:10px 5px 8px 80px;border-bottom:1px solid #d7d7d7;}
.xmlist .list .app .rc .stars em{display:inline-block;background:url(images/sart1.png) no-repeat; height:15px;}
.xmlist .list .app .rc .download{ display:inline-block; border:1px solid #a1e3ff; background:#c0eff9; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(3%,#d6f9ff), color-stop(95%,#c0eff9), color-stop(100%,#d2f5f7)); background: -moz-linear-gradient(top, #fff 20%, #d6f9ff 3%, #c0eff9 95%, #d2f5f7 100%); padding: 4px 8px;border-radius: 3px;color: #008fcb;font-size:14px;text-shadow: 1px 1px 2px #f2f2f2;}
.xmlist {
    padding: 10px;
    margin: 8px 0;
    border: 1px dashed #B9AB9E;
    background-color: #FCFAF7;
    font-family: 'Microsoft YaHei',;
    border-radius: 10px;
    color: #111;
    line-height: 20px;
    font-size: 14px;
}
.xmlist .list .app .info p span{margin-right:2px;}
.xmlist .list a{ text-decoration:none;}
.xmlist .list .app .icon{height:60px;width:60px;position:absolute;top:10px;left:10px;border-radius:5px; line-height:60px; font-size:48px; text-align:center; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;}
.xmlist .list .app .name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:0; padding:0; text-indent:0; margin:0 0 10px 0;}
.xmlist .list .app .name a{color:#333;}
.xmlist .list .app .info p{margin-bottom:4px;font-size:13px;color:#666;}
.xmlist .list .app .rc{position:absolute;top:30px;right:8px;width:80px;text-align:left;}
.xmlist .list .app .rc .stars{margin-top:5px; display:inline-block; background:url(images/sart2.png) no-repeat; width:77px; height:13px;}

调用方式:

<div class="xiangguanwen" style="margin:0; text-indent:0;"><h3>【站长亲测】正规 · 给力 <span style="font-size:15px;"></span></h3></div>
<div class="xmlist">
<ul class="list" style="margin:0; padding:0;">
<li class="app" onmouseover="this.style.backgroundColor='#FFF5F0'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="background-color: rgb(255, 255, 255);"><a href="#"><img src="#" width="72" height="72" border="0" class="icon"></a>
<div class="lc">
<h3 class="name"><a href="#" target="_blank">软件名称 - 最火平台<span style="color:#FF0000">Hot!</span></a></h3>
<div class="info">
<p style="text-indent:0; padding:0;">
<span style="color:#CC3366">支持:</span><img src="#" alt="安卓" style=" display:inline"><img src="#" alt="苹果" style=" display:inline"></p>
<p style="text-indent:0; padding:0;">已有<span class="dl-count" style="color:red">31万+人</span>关注 </p></div>
</div>
<div class="rc"> <a href="#" target="_blank" class="download">点击查看</a><span class="stars"><em style="width:100%"></em></span></div> </li>
</ul></div>

最终效果:

Css广告代码(图文并茂版).jpg

扫描二维码推送至手机访问。

版权声明:本文由莹莹笔记发布,如需转载请注明出处。

本文链接:http://ynyn34.com/xuexixd/26.html

标签: CSS学习笔记
分享给朋友:

相关文章

常州方言浅放送

博主住在常州与镇江交界处,属于骑车五分钟就能去镇江买瓶醋的那种。家里说的方言更接近常州话,但是不是纯粹常州话,与老常州不同。毕竟十里不同音嘛,里面还融入了一些丹阳话(母亲是丹阳人)。有空就会放送几条方言,觉得还是挺有趣的哈哈哈哈~【再睡一会...

Nginx屏蔽或禁止指定来源网站访问

最近从统计结果中看到,莹莹笔记被某导航网站收录,正常来说被收录是一件好事,可那个来源的网站每次访问都是只有几秒钟,几乎是进来一下就退出了,可能对方也是在引流,吸引我去关注他的网站,对于这种情况,怎么能容忍呢?直接屏蔽。宝塔面板Nginx配置...

在性格塑造上,是否倾向追求独特

 1、为了独特而独特,听起来就很不独特2、有时候追求独特才是一种不理智的跟风3、独特是相对的,不喜欢跟大众一样,又希望能有一部分小众的群体与自己共鸣~4、我要我炙热的灵魂独一无二5、为了独特而独特,你是奇行种吧6、大家原本就是独一...

时间能留下对自己好的人吗

a、时间是公正且冷漠的,所谓对你好或不好,在时光的冲刷中,都将成为一粒沙砾,能留存下来的往往是你生命中刻骨铭心的人或事,而不取决于他们对你的好坏。b、留不住人的不是时间是我c、“唯一不可阻挡的是时间,它像一把利刃,无声地切开了坚硬和柔软的一...

申通快递在泉州转运中心10天不动

申通快递在泉州转运中心10天不动

记录一下给别人当个参考吧,莹莹的一个小代理在2021年9月22日17点40分,在烟台龙口市发了一个申通快递,到达泉州转运中心之前一直很顺利,第二天天还未亮就已经从青岛转运中心发出了。快递是在9月24日上午8点钟到达的附件泉州转运中心,扫描员...

CSS制作简单好看的阅读全文按钮

CSS制作简单好看的阅读全文按钮

上一次教大家制作阅读全文按钮时,是用到了transition这个过渡属性,实现了从绿色到红色的渐变,并且有0.6秒的延迟展示。今天我们通过gradient这个CSS渐变属性,来制作一个类似效果的阅读全文按钮。.reed .jies...