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

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

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

图文并茂版广告代码用到的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://www.ynyn34.com/xuexixd/26.html

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

相关文章

申通快递从山东烟台到上海金桥要多久

申通快递从山东烟台到上海金桥要多久

申通快递从山东烟台龙口到上海金桥高桥公司需要多久?根据莹莹最近发过的一次快递显示,2021年3月21日18点30分钟查到快递发出,由山东龙口公司发往山东烟威集散中心,到3月23日早上9点52分钟到达上海金桥高桥公司,当天就派件了,一共用时2...

CSS制作透明下载按钮(自用款)

CSS制作透明下载按钮(自用款)

先上效果图:用到的CSS代码:.reed .kan blockquote{margin:15px 10px;border:1px #d0d4c8 dashed;background:#f9f...

申通快递从山东龙口到湖北襄阳要多久

申通快递从山东龙口到湖北襄阳要多久

申通快递从山东烟台龙口到湖北襄阳保康县要多久?根据莹莹最近发过的一次快递显示,2021年3月28日17点47分钟查到快递发出,途径山东烟威集散中心,华中地区转运中心,华中襄阳转运中心,最终3月30日达到华中保康公司,当天11点41分完成派件...

鼠标移到图片上图片放大【自用css代码】

鼠标移到图片上图片放大,移出后,图片又缓慢变回原来的样子,自用css代码。img:hover{-webkit-transition:-webkit-transform .3s ease-out 0s;-o-tr...

淘宝天猫店铺卖家延迟发货怎么投诉(亲测有效方法)

淘宝天猫店铺卖家延迟发货怎么投诉(亲测有效方法)

上至六七十岁的老人,下至六七岁的孩子,已经对网购耳熟能详,不仅能节省逛街的时间,还有更多的挑选余地。可在网购的过程中,难免也会碰见一些让人郁闷的事情,比如说:商品详情或者店铺主页明明写了48小时内发货,48小时过去了,订单状态依旧是待发货或...

任推邦邀请码千万别乱填(填错肠子悔青了)

任推邦邀请码千万别乱填(填错肠子悔青了)

任推邦软件作为地推和网推拉新的可靠平台,不少人已做到拉新日入一百元以上,这是怎么做到的呢?作为综合性地推拉新平台里的黑马app,平台本身有着可靠的实力与背景,有自己的官方网站和好多个稳定运营的app,小编测试了几天,也感觉任推邦用户体验很佳...