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

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

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

图文并茂版广告代码用到的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学习笔记
分享给朋友:

相关文章

《了不起的盖茨比》初读后感

①这两天快速翻完了《了不起的盖茨比》,比较可惜的是,我先看了电影,再看的书。没有找到网上评分高的那本,译本是书架上随手拿的。②先看电影的坏处就是容易先入为主。看到书中描写的纸醉金迷、富丽堂皇,脑子里自动显现影片里的画面;看到盖茨比的优雅迷情...

阿里云CentOS服务器安装宝塔面板流程详解(图文教程)

阿里云CentOS服务器安装宝塔面板流程详解(图文教程)

在阿里云购买CentOS服务器成功以后,下一步就该是安装宝塔面板了,具体流程是怎样的呢?1、第一步,在服务器列表页面建立远程连接。2、输入以下命令:sudo -i     &nbs...

快递放在快递超市长时间不拿会怎样(亲身经历的几种结果)

快递放在快递超市长时间不拿会怎样(亲身经历的几种结果)

实体店铺有租金,人工费也贵,网购不仅能够减少开支,还可以省去逛街的麻烦,节省时间,因此好多年轻人都有网购的习惯。我们当地快递员一般都是直接把网购快递寄放在快递超市,方便上班族抽空去取。可能刚给你发送取件短信时,您还记得这事,忙起来就给忘了,...

农业银行怎么取消短信通知服务

农业银行怎么取消短信通知服务

之前一直不知道自己开通了农业银行的收费短信通知服务,直到最近把银行卡里面的钱全部提了出来,银行发来了扣费失败通知,这才知晓。于是乎,抓紧联系了银行客服,按照提供的方法给取消了,特意把方法分享给各位。农业银行的短信通知里面,一共提供了3种取消...

淘宝消消乐限时闯关一分钱兑换礼品的套路

淘宝消消乐限时闯关一分钱兑换礼品的套路

登录淘宝app查看已购订单时,弹出的活动,提示玩淘宝消消乐限时闯关领奖励,可一分钱兑换礼品,没想到的是,还是自己太年轻,终究还是被套路了。首先会让你选择一件礼品,本人选择的是价值最低的那个500g柠檬洗洁精,之前从淘特购买过,大概是三四块钱...

莹莹笔记被百度收录分页

莹莹笔记被百度收录分页

虽说不怎么在意排名、收录、权重之类的东西,莹莹笔记更多的是一个记录本人学习所得、成果、收获的工具。可当得知被百度收录了分页还是很开心的,感觉自己这2个多月的汗水没有白流。还记得七八月份,那时候天气炎热,下班回家本就累的不轻,还要打开电脑,对...