css实现套餐价格对比表格效果代码-html代码-BFW代码库

css实现套餐价格对比表格效果代码

代码语言：html

所属分类：表格

代码描述：css实现套餐价格对比表格效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
        @charset "UTF-8";
        * {
        padding:0 0;
        margin:0 0;
    }
    body {
        font-size:18px;
        font-family:"微软雅黑";
        color:#303030;
    }
    img {
        border:none;
    }
    p,ul {
        padding:0;
        margin:0 0;
    }
    ul li {
        list-style:none;
    }
    a {
        color:#4d4d4d;
        text-decoration:none;
    }
    h1,h2,h3,h4 {
        font-weight:normal;
    }
    .mainbox {
        width:1200px;
        margin:100px auto 0 auto;
    }
    .mainbox h2 {
        margin:0px auto;
        font-size:36px;
        line-height:2em;
        text-align:center;
        position:relative;
    }
    .responsive {
        margin:25px 0 0 0;
    }
    .mainbox table {
        border-collapse:collapse;
        border-top:0!important;
        width:100%;
    }
    .mainbox table th {
        color:#fff;
        height:75px;
        min-width:80px;
        max-width:60px;
        white-space:nowrap;
        border:none;
        border-radius:10px 10px 0px 0px;
    }
    .mainbox table th,.mainbox table td {
        text-align:center;
        font-size:16px;
        line-height:30px;
        background:#fff;
    }
    .mainbox .red {
        color:#e40202;
    }
    .mainbox tr:nth-child(2n+1) td {
        background:#f1f1f1;
    }
    .mainbox table td {
        border:1px #e9edf1 solid;
        border-right:1px #d1d1d1 solid;
    }
    .gou {
        display:inline-block;
        width:22px;
        height:22px;
        background:url(//repo.bfw.wiki/bfwrepo/image/5f6c563ecf13b.png);
        background-size:contain;
        background-repeat:no-repeat;
    }
    </style>
</head>

<body>
    <div class="mainbox">
        <h2>服务器年费套餐</h2>
        <div class="responsive">
            <table>
                <tbody>
                    <tr>
                        <th style="background:#e4644a;">服务器年费套餐</th>
                        <th style="background:#8035fb;border-right:2px solid #fff;">至尊版<span style="display:block;font-size:12px; line-height:1em; font-weight:normal;">(品牌加盟推荐型)</span></th>
                        <th style="background:#eb4848;border-right:2px solid #fff;">营销版</th>
                        <th style="background:#f37815;border-right:2px solid #fff;">标准版</th>
                        <th style="background:#fe0597;border-right:2px solid #fff;">基础版</th>
                        <th style="background:#35c6f0;">展示版.........完整代码请登录后点击上方下载按钮下载查看