柯林图文列表特效

崔健发表于 代码 2016-03-01 00:02:39 -0500

添加代码到css或wml里

<style>
div.list7{width:100%; background:#6E6E6E; :inline-block; padding:0; margin:0 auto; }/总体宽度/

div.list7 ul { list-style-type:none;}

div.list7 ul li {width: 306px; margin: 0px 5px 10px; border: 2px solid rgb(255, 255, 255); border-radius: 10px 10px 10px 10px; box-shadow: 3px 3px 3px 2px rgba(50, 50, 50, 0.75); background-color: rgb(133, 142, 148);}/
列表内边框等属性/

div.list7 ul li p.cont7_tit{ color:#fff; background:#858E94 font:600 14px/2 “宋体“; padding:0px; padding-left:5px;}/
内容标题/

div.list7 ul li a{ text-decoration:none; color:#fff; font:800 16px/2 “宋体“; }

div.list7 ul li a:hover{ text-decoration:underline;}

/
修改内容宽度高度可以改变显示效果效果↓↓↓/

div.list7 ul li a .cont{ padding:0; background:#fff; padding:5px 0 10px 5px;}/
内容的高度/

/
修改图片宽度高度可以改变显示效果效果↓↓↓/

div.list7 ul li a .cont img{padding:1px;
:block; float:left; border: solid 1px #ccc;}/图片样式/

div.list7 ul li a .cont span{color:#000; float:left; height:100px; width:160px; :inline-block; font:400 16px/1.5 “宋体“; padding: 1px 5px 2px 7px; margin-left:8px; border: 1px solid rgb(204, 203, 203);border-radius: 5px 5px 5px 5px; background: -moz-linear-gradient(center top , rgb(234, 233, 233), rgb(255, 255, 255)) repeat scroll 0% 0% transparent;text-align: left;overflow: hidden; word-wrap: break-word;}/缩略内容/

div.list7 ul li a .cont span label{word-wrap:break-word;
:block;}/时间的样式/br/>
</style>

调用时:[@article=0_3_0_0_7*100*100]

演示:

«Newer      Older»
Comment:
Name:

Back to home


Subscribe | Register | Login | N