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> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0