logo

CSS

浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。

Panel


基本使用

文字组合列表

文字组合列表

标题一

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

标题一

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

查看更多
<div class="panel">
    <h3 class="panel-hd">
        文字组合列表
    </h3>
    <div class="panel-bd">
        <div class="media-box">
            <div class="media-box-bd">
                <h4 class="media-box-title">标题一</h4>
                <p class="media-box-desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</p>
            </div>
        </div>
        <div class="media-box">
            .......
        </div>
    </div>
    <div class="panel-ft">
        <span class="panel-ft-link">查看更多</span>
        <span class="fc fc-direction-right text-assistant"></span>
    </div>
</div>                                                  
        

图文组合列表

图文组合列表

标题一

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

标题一

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

查看更多
<div class="panel">
    <h3 class="panel-hd">
        图文组合列表
    </h3>
    <div class="panel-bd">
        <div class="media-box">
            <div class="media-box-hd">
                <span class="fa-stack fa-lg">
                <span class="icon-square icon-stack-2x icon-lightblue"></span>
                <i class="fc fc-task fc-stack-1x fc-inverse"></i>
                </span>
            </div>
            <div class="media-box-bd">
                ......
            </div>
        </div>
        <div class="media-box">
        ......
        </div>
    </div>
    <div class="panel-ft">
        ......
    </div>
</div>                                                  
        

文字列表附来源

文字列表附来源

标题一

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

  • 文字来源
  • 时间
  • 其他信息
<div class="panel">
    <h3 class="panel-hd">文字列表附来源</h3>
    <div class="panel-bd">
        <div class="media-box">
            <div class="media-box-bd">
                <h4 class="media-box-title">标题一</h4>
                <p class="media-box-desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</p>
                <ul class="media-box-info">
                    <li class="media-box-info-meta">文字来源</li>
                    <li class="media-box-info-meta">时间</li>
                    <li class="media-box-info-meta">其他信息</li>
                </ul>
            </div>
        </div>
    </div>
</div>                                                  
        

实例演示

实例演示见zujian-list.shtml中panel列表

侧栏导航