请选择 进入手机版 | 继续访问电脑版

弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 3395|回复: 2

ArticleSummary.CSS示范脚本

[复制链接]
发表于 2014-8-15 15:16:55 | 显示全部楼层 |阅读模式
纵排无列效果
#ArticleSummary ul li{ display:block; margin-bottom:10px; clear:both; height:100px; overflow:hidden;}
#ArticleSummary ul li .thumbs{ float:left; display:block; width:160px; height:100px;}
#ArticleSummary ul li .thumbs img{ width:150px; height:100px;}
#ArticleSummary ul li .detail{ display:block;}
#ArticleSummary ul li .detail .atext{ font-weight:bold; color:#333}
#ArticleSummary ul li .detail .intro{ line-height:20px;}
#ArticleSummary ul li .detail .enter{ display:none;}

横排一行多列效果
#ArticleSummary ul{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
#ArticleSummary ul li{ display:flex; flex-flow: column wrap; margin:0px 10px 30px 10px;}
#ArticleSummary ul li .thumbs{ height: 200px; overflow: hidden;}
#ArticleSummary ul li .thumbs img{ width:100%; height: 100%;}
#ArticleSummary ul li .detail{ display:block;}
#ArticleSummary ul li .detail .atext{ display: block; font-weight:bold; text-align: center; line-height: 2.5em;}
#ArticleSummary ul li .detail .intro{ line-height:20px;}
#ArticleSummary ul li .detail .enter{ display:none;}
回复

使用道具 举报

 楼主| 发表于 2017-1-8 22:04:41 | 显示全部楼层
范例一(ito):
ARTICLE_TOKENITO.jpg
CSS:
#ArticleSummary li{ height:100px; overflow:hidden; margin-bottom:20px;}
#ArticleSummary li .thumbs{ float:left; display:block; width:100px; height:100px; margin-right:30px; overflow:hidden;}
#ArticleSummary li .thumbs img{ width:100px;}
#ArticleSummary li .detail .title a{ font-size:16px;}
#ArticleSummary li .detail .intro{ color:#666;}
#ArticleSummary li .detail .intro .enter{ display:block; text-align:right;}
#ArticleSummary li .detail .intro .enter a{ display:inline-block; padding:5px 10px; background:#d8d8d8; border-radius:5px; text-transform:capitalize; color:#666;}

改进版:
ARTICLE_TOKENITO_ANIMATE.jpg
#ArticleSummary li{ height:100px; overflow:hidden; margin-bottom:20px;}
#ArticleSummary li .thumbs{ float:left; display:block; width:100px; height:100px; margin-right:30px; overflow:hidden;}
#ArticleSummary li .nopic{ display:none;}
#ArticleSummary li .thumbs img{ width:100px;}
#ArticleSummary li .detail .title a{ font-size:16px;}
#ArticleSummary li .detail .intro{ color:#666;}
#ArticleSummary li .detail .intro .enter{ display:block; text-align:right;}
#ArticleSummary li .detail .intro .enter a{ display:inline-block; padding:5px 10px; background:#d8d8d8; border-radius:5px; text-transform:capitalize; color:#666;}

whstjs改进版
whstjs.jpg
#ArticleSummary ul{ counter-reset:me;}
#ArticleSummary ul li{ padding-bottom:30px; margin-bottom:30px; clear:both; border-bottom:1px dotted #f0f0f0;}
#ArticleSummary ul li .thumbs{ float:left; display:block; width:160px; height:100px;}
#ArticleSummary ul li .thumbs img{ width:150px; height:100px;}
#ArticleSummary ul li .nopic{ display:none;}
#ArticleSummary ul li .detail{ display:block;}
#ArticleSummary ul li .detail .atext{ display:block; font-weight:bold; color:#333; font-size:20px; line-height:1.2em; padding-bottom:10px;}
#ArticleSummary ul li .detail .intro{ line-height:20px; color:#666;}
#ArticleSummary ul li .detail .enter{ display:none;}
#ArticleSummary ul li:before{ float:left; content:counter(me); min-width:24px; min-height:12px; counter-increment:me; background:#f8f8f8; color:#000; font-weight:bold; border-right:2px solid #f33; text-align:center; padding:2px; margin-right:30px; margin-bottom:40px;}


回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-5-21 08:43:35 | 显示全部楼层

tengange.css

tag.jpg
DIV:
<div class="bg-black-1 p-b-60">
    <div class="container">$func_tabstrip(navi=tag,para=Case,title=10,disp=2,tabs=5,subimg=1,subemeo=1,mode=3,rows=3,list=5)$</div>
</div>

CSS:
<!--tag.Navigator.css-->
#tag .RowsTitle{ text-align:center; position:relative;}
#tag .RowsTitle .CLeft{ display:block; width:50%; margin:0 auto; height:40px; border-bottom:1px solid #CCC; position:absolute; z-index:80; top:100px; left:0; right:0;}
#tag .RowsTitle .CRight{ display:block; width:20px; height:40px; border-bottom:2px solid #c00; position:absolute; z-index:90; top:100px; left:50%; margin-left:-10px;}
#tag .RowsTitle .Title{ text-align:center; position:relative;}
#tag .RowsTitle .Title .cn{ position:relative; z-index:100; top:72px; font-size:24px; color:#c00; font-weight:bold; text-shadow:0px 0px 5px #fff;}
#tag .RowsTitle .Title .en{ font-family:impact; font-size:72px; opacity:.1; color:#888; text-transform:uppercase;}
<!--tag.ArticleSummary.Css-->
#ArticleSummary ul{ display: flex; flex-flow: row wrap; justify-content: space-between;}
#ArticleSummary ul li{ width: 32%; height: 350px; margin-bottom: 2em;}
#ArticleSummary ul li .thumbs{ display: block; width: 100%; height:calc(100% - 6em);}
#ArticleSummary ul li .thumbs a{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
#ArticleSummary ul li img{ padding: 0.5rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; max-width: 100%; height:100%;}
#ArticleSummary ul li .detail{ display: block; height: 5em; margin: 10px; text-align:center; overflow: hidden;}
#ArticleSummary ul li .detail .title a{ font-size:large; padding-top: 10px;}
#ArticleSummary ul li .detail .intro{font-size: x-small; color: #666;}
#ArticleSummary ul li .detail .intro .enter{ display: none;}
<!--tag.tabstrip.css-->
#TabStrip{ margin-top:18px;}
.TabNavTitle{ display:flex; flex-flow: row wrap; justify-content:center; align-items: center; text-align:center;}
.TabTitle{ display: inline-flex; margin: 5px;}
.TabTitle a { display: block; padding: 10px 20px; background:#c00; color: #fff;}
.TabNavContent{ margin-top:30px;}
.TabNavContent #ArticleSummary ul li .detail{ text-align: left;}
.TabNavContent #ArticleSummary ul li .detail .title a{ color:#fff;}
.TabNavContent #ArticleSummary ul li .detail .intro{ line-height: 1.8em;}
自适应:
@media (max-width: 1200px){
    #tag .RowsTitle .CLeft,#tag .RowsTitle .CRight{ top: 68px;}
    #tag .RowsTitle .Title .cn{ top:62px; }
    #tag .RowsTitle .Title .en{ font-size:56px;}
}
@media (max-width: 992px) {
    .p-b-60{ padding-bottom: 50px;}
}
@media (max-width: 768px) {
    .p-b-60{ padding-bottom: 40px;}
}
@media (max-width: 576px) {
    .p-b-60{ padding-bottom: 30px;}
    #tag .RowsTitle .CLeft{ width: 80%;}
}
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-3-28 22:07 , Processed in 0.113930 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表