pc6a学习分享

技术知识分享

分享几个好看的html表格代码 - typecho可用

经常逛博客的应该都知道,小夜大屌MM用的typecho有漂亮的表格。小白也曾经找过插件。始终没有找到。今天看开心小站长的博客里有html表格说明。但是没有细说。他大概也只是为了给自己写笔记把。既然挺好看的,小白就抄过来。写个详细点的教程。


使用方法:

  • 添加CSS到自己任意加载的CSS中;
  • 在写文章的时候使用代码。

1.VPS配置表表格:

  • 效果图;

  • html代码;

    <div class="row">
     <div class="col-xl-4 col-lg-6 col-md-4">
      <div class="panel panel-info">
       <div class="panel-heading">
         日本大阪
       </div>
       <div class="panel-body">
        <ul>
         <li>核心:2核CPU</li>
         <li>内存:1GB</li>
         <li>硬盘:30GB</li>
         <li>流量:不限流量</li>
         <li>带宽:3Mbps</li>
         <li>架构:XenServer</li>
         <li>价格:80元/月</li>
         <li>传送:<a href="https://pc6a.com/go.php?go=" target="_blank" rel="external nofloow">购买链接</a></li>
        </ul>
       </div>
      </div>
     </div>
    </div>
  • 如果是多个表格要并排放,从以下开始复制

    <div class="col-xl-4 col-lg-6 col-md-4"> 
  • CSS代码:

    /*  彩色表格======================================================================================================== */
    .wmcontent .row {
      margin-left:-9px;margin-right:-9px
      }
    .wmcontent .row .col-xl-6, .wmcontent .row .col-xl-4, .wmcontent .row .col-lg-4, .wmcontent .row .col-lg-6, .wmcontent .row .col-md-4 .wmcontent .row .col-md-6 {
      padding-right:10px;padding-left:10px;
      }
    .panel{margin-bottom:10px;margin-top:10px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body{padding:15px 15px 0 18px}
    .panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}
    .panel-heading>.dropdown .dropdown-toggle{color:inherit}
    .panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}
    .panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}
    .panel-default{border-color:#ddd}
    .panel-default>.panel-heading{color:#333;background-color:#f6f6f6;border-color:#eee}
    .panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#eee}
    .panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#eee}
    .panel-success{border-color:#d6e9c6}
    .panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
    .panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}
    .panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}
    .panel-success a {color:#3c763d}
    .panel-info{border-color:#bce8f1}
    .panel-info>.panel-heading{color:#31708f;background-color:#d1ecf1;border-color:#bee5eb}
    .panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bee5eb}
    .panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bee5eb}
    .panel-warning{border-color:#faebcc}
    .panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;border-top-left-radius:3px;border-top-right-radius:3px}
    .panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}
    .panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}
    .panel-warning a {color:#8a6d3b}
    .panel-danger{border-color:#ebccd1}
    .panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1;border-top-left-radius:3px;border-top-right-radius:3px}
    .panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}
    .panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}
    .panel-danger a {color:#a94442}
    .panel-body a{text-decoration:none;padding-right:16px;margin-right:10px;background:url(../images/outlink.png) no-repeat right center}
    .panel-gray{border-color:#f6f6f6;border-radius:3px;}
    .panel-gray>.panel-heading{color:#333;background-color:#f6f6f6;border-color:#f6f6f6;border-top-left-radius:3px;border-top-right-radius:3px}
    .panel-gray>.panel-heading+.panel-collapse>.panel-body{border-top-color:#f6f6f6}
    .panel-gray a {color:#333}
    .panel-green{border-color:#28a745;border-radius:3px;}
    .panel-green>.panel-heading{color:#fff;background-color:#28a745;border-color:#28a745;border-top-left-radius:3px;border-top-right-radius:3px}
    .panel-green>.panel-heading+.panel-collapse>.panel-body{border-top-color:#28a745}
    .panel-green a {color:#28a745}
    .panel-blue{border-color:#00a2ff;border-radius:3px;}
    .panel-blue>.panel-heading{color:#fff;background-color:#00a2ff;border-color:#00a2ff;border-top-left-radius:3px;border-top-right-radius:3px}
    .panel-blue>.panel-heading+.panel-collapse>.panel-body{border-top-color:#00a2ff}
    .panel-blue a {color:#00a2ff}
    .panel-yellow{border-color:#ffc107;border-radius:3px;}
    .panel-yellow>.panel-heading{color:#fff;background-color:#ffc107;border-color:#ffc107;border-top-left-radius:3px;border-top-right-radius:3px}
    .panel-yellow>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ffc107}
    .panel-yellow a {color:#ffc107}
    .panel-red{border-color:#dc3545;border-radius:3px;}
    .panel-red>.panel-heading{color:#fff;background-color:#dc3545;border-color:#dc3545;border-top-left-radius:3px;border-top-right-radius:3px}
    .panel-red>.panel-heading+.panel-collapse>.panel-body{border-top-color:#dc3545}
    .panel-red a {color:#dc3545}
    .panel-dablue{border-color:#17a2b8;border-radius:3px;}
    .panel-dablue>.panel-heading{color:#fff;background-color:#17a2b8;border-color:#17a2b8;border-top-left-radius:3px;border-top-right-radius:3px}
    .panel-dablue>.panel-heading+.panel-collapse>.panel-body{border-top-color:#17a2b8}
    .panel-dablue a {color:#17a2b8}

2.提醒表格:

  • 1.黄色提醒表格 效果图:

  • 1.html代码:

    <div id="sc_warn">莫斯科DataLine Tier-3机房测试IP:46.17.40.85,<a href="https://lg-dtln.justhost.ru/50MB.test" rel="noopener" target="_blank">https://lg-dtln.justhost.ru/50MB.test</a></div>

  • 2.红色提醒表格 效果图:

  • 2.html代码:

    <div id="sc_error">提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。<br />
    投稿链接:<a href="https://pc6a.com" rel="nofollow" target="_blank">点此直达</a> 投稿邮箱:[email protected],网友QQ群:6666</div>

  • 3.黑色虚框 效果图:

  • 3.html代码:

<div id="sc_tips">
<p>以上产品支持在下列数据中心自由切换</p>

<ol>
    <li>US: Los Angeles, California (DC9 CN2GIA) [USCA_9] 洛杉矶CN2 GIA<span style="color: #ff00ff;">【仅CN2 GIA特价方案支持】</span></li>
    <li>US: Los Angeles, California (DC2 QNET) [USCA_2] 洛杉矶QN机房(非CN2 GT)</li>
</ol>
</div>

  • 4.蓝色虚线 效果图:

  • 4.html代码:

<div id="sc_xuk">
<p>CPU占用:CN2 GIA特价(突发2核,1核100%)&gt;KVM常规(突发2核,1核50%)&gt;CN2 GT特价(突发1核,1核25%)【1核100%、1核50%、1核25%指的是1小时平均CPU负载不超能超过的级别】</p>
</div>

  • 5.tips 效果图

  • 5.html代码:

<div id="sc_blue">莫斯科DataLine Tier-3机房测试IP:46.17.40.85,<a href="https://lg-dtln.justhost.ru/50MB.test" rel="noopener" target="_blank">https://lg-dtln.justhost.ru/50MB.test</a></div>

几个不同从上到下分别为:
sc_blue
sc_black
sc_lvb
sc_redb
sc_organge

  • CSS代码:
    /*彩色信息框*/
    #sc_notice {
      color: #7da33c;
      background: #ecf2d6 url('https://wx1.sinaimg.cn/large/8a15dfably1fznj5ojo1gj200q00q0dk.jpg') -1px -1px no-repeat;
      border: 1px solid #aac66d;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
    }
    #sc_warn {
      color: #ad9948;
      background: #fff4b9 url('https://wx3.sinaimg.cn/large/8a15dfably1fznj68b3izj200q00q0b2.jpg') -1px -1px no-repeat;
      border: 1px solid #eac946;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
    }
    #sc_error {
      color: #c66;
      background: #ffecea url('https://wx4.sinaimg.cn/large/8a15dfably1fznj6oayxej200q00q0cn.jpg') -1px -1px no-repeat;
      border: 1px solid #ebb1b1;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
    }
    #sc_tips {
      color: #777;
      background: #eaeaea url('https://wx1.sinaimg.cn/large/8a15dfably1fznj7130pvj200q00q06q.jpg') -1px -1px no-repeat;
      border: 1px solid #ccc;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
    }
    #sc_blue {
      color: #1ba1e2;
      background: rgba(27, 161, 226, 0.26) url('https://wx4.sinaimg.cn/large/8a15dfably1fznj7hprjtj200q00q05h.jpg') -1px -1px no-repeat;
      border: 1px solid #1ba1e2;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
    }
    #sc_black {
      border-width: 1px 4px 4px 1px;
      border-style: solid;
      border-color: #3e3e3e;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
    }
    #sc_xuk {
      border: 2px dashed rgb(41, 170, 227);
      background-color: rgb(248, 247, 245);
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
    }
    #sc_lvb {
      margin: 10px 0;
      padding: 10px 15px;
      border: 1px solid #e3e3e3;
      border-left: 2px solid #05B536;
      background: #FFF;
    }
    #sc_redb {
      margin: 10px 0;
      padding: 10px 15px;
      border: 1px solid #e3e3e3;
      border-left: 2px solid #ED0505;
      background: #FFF;
    }
    #sc_organge {
      margin: 10px 0;
      padding: 10px 15px;
      border: 1px solid #e3e3e3;
      border-left: 2px solid #EC8006;
      background: #FFF;
    }

备注:

如果只需要一种样式,可以单独提取一段CSS。即提取两个}中间的内容即可。

未经允许不得转载:pc6a学习分享 » 分享几个好看的html表格代码 - typecho可用

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 这个很不错,谢谢分享

    ITren (2019-02-03) 回复