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;">展示版</th>
                    </tr>
                    <tr>
                        <td>费用（元/年）</td>
                        <td class="red">3880</td>
                        <td class="red">2880</td>
                        <td class="red">1880</td>
                        <td class="red">980</td>
                        <td class="red">498</td>
                    </tr>
                    <tr>
                        <td>上传文件个数</td>
                        <td>60000</td>
                        <td>60000</td>
                        <td>15000</td>
                        <td>7000</td>
                        <td>200</td>
                    </tr>
                    <tr>
                        <td>企业动态网站</td>
                        <td><span class="gou"></span></td>
                        <td><span class="gou"></span></td>
                        <td><span class="gou"></span></td>
                        <td><span class="gou"></span></td>
                        <.........完整代码请登录后点击上方下载按钮下载查看