【CSS】ArticleIntro手机专用脚本示范

admin

手机网站示例（mms）案例（msspace）显示效果：


DIV脚本：
<div class="news">$func_article(navi=Navigator,para=News,rows=4,summ=3,pics=1,date=101,title=11,list=4)$</div>

CSS：

#ArticleIntro ul li .thumbs{ width:120px; height:120px;}
#ArticleIntro ul li .thumbs img{ max-width:120px; max-height:120px;}
#ArticleIntro ul li .detail{ height:118px; overflow:hidden;}
#ArticleIntro ul li .detail .title{ display:block; width:242px; height:32px; overflow:hidden;}
#ArticleIntro ul li .detail .title a{ display:block; font-size:18px; font-weight:bold; white-space:nowrap; overflow-x:auto;}
#ArticleIntro ul li .detail .intro{ height:75px; overflow:hidden;}
.LongDatePlus{ float:left; padding:5px; border:1px solid #eee; margin-right:10px; background:#f4f4f4; text-align:center; margin-bottom:20px;}
.LongDatePlus .dd{ display:block; font-size:24px; font-weight:bold; line-height:28px; padding:10px 0; background:#666; color:#fff;}

.news #ArticleIntro ul .Summary{ display:inline-block; width:100%;}
.news #ArticleIntro .Summary .thumbs{ display:block; width:100%; height:180px; overflow:hidden;}
.news #ArticleIntro .Summary .thumbs a{ display:block; font-size:0;}
.news #ArticleIntro .Summary .thumbs img{ width:320px; max-width:inherit; max-height:inherit;}
.news #ArticleIntro .Summary .detail{ margin:10px;}
.news #ArticleIntro .Summary .detail .title{ width:100%;}
.news #ArticleIntro .Summary .detail .title a{ display:block; font-size:18px; font-weight:bold;}
.news #ArticleIntro .enter{ display:none;}
<!--附加内容：子页CSS脚本修正，本行可删除-->
.LongDate{ font-size:12px; line-height:16px;}
.body #ArticleIntro ul li .detail{ height:128px; overflow:hidden;}
.body #ArticleIntro ul li .detail .title{ width:auto; overflow-x:auto;}