仿微信图文推送卡片html+css
预览图
<body>
<div class="wx_container">
<div class="banner">
<img src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/common_images/article/411589952959_.pic_hd.jpg">
</div>
<div>
<ul class="">
<li>
<div>
<span>32岁妮妮两端奥丝蓝黛：时代峰峻送来的，睡了多久菲利克斯大姐夫了解</span>
<div class="line"></div>
</div>
<img src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/common_images/article/%E8%8B%B9%E6%9E%9C.png">
</li>
<li>
<div>
<span>32岁妮妮两端奥丝蓝黛：时代峰峻送来的，睡了多久菲利克斯大姐夫了解</span>
<div class="line"></div>
</div>
<img src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/common_images/article/345ec4a4d3589ef.jpg">
</li>
<li>
<div>
<span>32岁妮妮两端奥丝蓝黛：时代峰峻送来的，睡了多久菲利克斯大姐夫了解</span>
<div class="line_last" style=""></div>
</div>
<img src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/common_images/article/%E5%B0%8F%E7%B1%B3.png">
</li>
</ul>
</div>
</div>
</body>
css样式：
<style>
body{
background-color: #f5f5f5;
}
.wx_container{
margin: 14px;
border-radius: 5px;
background-color: #fff;
}
.banner{
width: 100%;
}
.banner img{
width: 100%;
border-radius: 5px 5px 0 0 ;
}
ul li{
display: flex;
justify-content: space-between;
padding: 1em 0.7em 0 0.7em;
line-height: 1.5em;
}
ul li div{
padding-right: 14px;
}
ul li div span{
/*padding-bottom: 1em;*/
overflow: hidden;
height: 3.2em;
display: block;
font-size: 14px;
}
ul li img{
height: 3em;
/*padding: 5px;*/
/*padding: 0.4em;*/
width: 3em;
/*width: 3eem;*/
}
.line{
border-bottom: 1px solid #d0d0d0;
padding-bottom: 1em;
}
.line_last{
padding-bottom: 1em;
}
</style>
4796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
