网页excel对比表样式

一：特效
二：特效代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>医流商城|天呈医流_医疗器械|科学器材|家庭保健的电商平台</title>

<style>
*{
    margin: 0;
    padding: 0;
}


body {
    color: #666;
    font: 12px/20px Arial,Verdana,"宋体","Lucida Grande","Lucida Sans Unicode",Helvetica,sans-serif;
}


ul, ol {
    list-style: outside none none;
}

.activity_content {
    margin-bottom: 30px;
}
.ss_top {
    margin-bottom: 20px;
    overflow: auto;
}
.ss_t_left {
    float: left;
    width: 20%;
}
.ss_t_right {
    float: right;
}
.ss_t_right p {
    line-height: 50px;
}
.ss_t_left p {
    line-height: 50px;
}
.open_btn {
    border-radius: 2px;
    color: #fff;
    height: 35px;
    line-height: 35px;
    text-align: center;
    width: 120px;
}
.ss_box {
    position: relative;
}
.ss_box_list {
    float: left;
    height: auto;
    width: 20%;
}
.left_line {
    left: 0;
    position: absolute;
    top: 40px;
    width: 35px;
}
.line_one {
    background-color: #94c653;
    height: 455px;
}
.line_one p {
    padding-top: 150px;
}
.line_two p {
    line-height: 17px;
}
.line_two {
    background-color: #65b8da;
    height: 70px;
}
.line_three {
    background-color: #51bcac;
    height: 175px;
}
.line_three p {
    color: #da0f01;
    padding-top: 60px;
}
.line_div p {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}
.ss_box_t li {
    border-right: 1px solid #eee;
    color: #333;
    font-size: 14px;
    line-height: 35px;
    text-align: center;
}
.ss_box_o li {
    border-right: 1px solid #eee;
    color: #333;
    font-size: 13px;
    line-height: 35px;
    text-align: center;
}
.ss_box_o:hover .ss_b_qian {
    background-color: #ffe7c3;
}
.ss_box_o:hover .ss_b_hui {
    background-color: #fad591;
}
.ss_box_o:hover .ss_box_title {
    background-color: #ff6f02;
    color: #fff;
}
.ss_box_a:hover .ss_b_qian {
    background: rgba(226, 249, 249, 0.9) none repeat scroll 0 0;
}
.ss_box_a:hover .ss_b_hui {
    background: rgba(192, 240, 250, 0.9) none repeat scroll 0 0;
}
.ss_box_a:hover .ss_box_title {
    background-color: #01d1f0;
    color: #fff;
}
.ss_box_b:hover .ss_b_qian {
    background-color: #e0fabb;
}
.ss_box_b:hover .ss_b_hui {
    background-color: #c5f180;
}
.ss_box_b:hover .ss_box_title {
    background-color: #7ec545;
    color: #fff;
}
.ss_box_c:hover .ss_b_qian {
    background-color: #fcc4c5;
}
.ss_box_c:hover .ss_b_hui {
    background-color: #fd8c8e;
}
.ss_box_c:hover .ss_box_title {
    background-color: #da0f01;
    color: #fff;
}
.ss_box_title {
    background-color: #e5e5e5;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.ss_b_qian {
    background-color: #f9f9f9;
}
.ss_b_hui {
    background-color: #f1f3f6;
}
.us-left {
    float: left;
}
.us-right {
    background-color: #fff;
    border: 1px solid #f6f6f6;
    box-shadow: 2px 2px 5px #eee;
    float: left;
    width: 682px;
}
.us-font {
    padding: 15px;
}
.us-font h2 {
    color: #333;
    padding-bottom: 3px;
}
.us-font p {
    line-height: 20px;
}
.us-font .tit {
    font-weight: 600;
    line-height: 30px;
}
.us-font .ptop {
    margin-top: 5px;
}
.sup-well {
    overflow: auto;
}
</style>


     

</head>

<body>



    <div class="activity_content pt_20 warper">
      
        <div class="ss_box">
            <div class="left_line">
                <div class="line_div line_one">
                    <p>
                        站
                        <br>内
                        <br>推
                        <br>广
                    </p>
                </div>
                <div class="line_div line_two">
                    <p>
                        站
                        <br>外
                        <br>推
                        <br>广
                    </p>
                </div>
                <div class="line_div line_three">
                    <p>
                        线
                        <br>下
                        <br>推
                        <br>广
                    </p>
                </div>
            </div>
            <div class="ss_box_list">
                <ul class="ss_box_t">
                    <li class="ss_box_title">服务内容 </li>
                    <li class="ss_b_qian">产品发布</li>
                    <li class="ss_f_red ss_b_hui">企业QQ</li>
                    <li class="ss_b_qian">专题策划</li>
                    <li class="ss_f_red ss_b_hui">首页展位展示</li>
                    <li class="ss_b_qian">关键词内链</li>
                    <li class="ss_f_red ss_b_hui">分销信息的发布</li>
                    <li class="ss_b_qian">采购信息的推送</li>
                    <li class="ss_f_red ss_b_hui">首页新闻推送</li>
                    <li class="ss_b_qian">搜索推广</li>
                    <li class="ss_f_red ss_b_hui">品牌展示</li>
                    <li class="ss_b_qian">分类页广告推荐</li>
                    <li class="ss_f_red ss_b_hui">分类页精品推荐</li>
                    <li class="ss_b_qian">详情页广告推荐</li>
                    <li class="ss_f_red ss_b_hui">微信广告发布</li>
                    <li class="ss_b_qian">QQ 广告发布</li>
                    <li class="ss_f_red ss_b_hui">会展企业LOGO展示</li>
                    <li class="ss_b_qian">线下推广品牌展示</li>
                    <li class="ss_f_red ss_b_hui">校园巡展</li>
                    <li class="ss_b_qian">分销商会议</li>
                    <li class="ss_f_red ss_b_hui">仓储展示</li>
                </ul>
            </div>
            <div class="ss_box_list">
                <ul class="ss_box_o">
                    <li class="ss_box_title">免费版（期限） </li>
                    <li class="ss_b_qian">无限制</li>
                    <li class="ss_f_red ss_b_hui">1个月</li>
                    <li class="ss_b_qian">无</li>
                    <li class="ss_f_red ss_b_hui">1周</li>
                    <li class="ss_b_qian">2个</li>
                    <li class="ss_f_red ss_b_hui">√</li>
                    <li class="ss_b_qian">√</li>
                    <li class="ss_f_red ss_b_hui">一周</li>
                    <li class="ss_b_qian">3天</li>
                    <li class="ss_f_red ss_b_hui">3天</li>
                    <li class="ss_b_qian">无</li>
                    <li class="ss_f_red ss_b_hui">一周</li>
                    <li class="ss_b_qian">无</li>
                    <li class="ss_f_red ss_b_hui">无</li>
                    <li class="ss_b_qian">5000次</li>
                    <li class="ss_f_red ss_b_hui">1次</li>
                    <li class="ss_b_qian">1次</li>
                    <li class="ss_f_red ss_b_hui">无</li>
                    <li class="ss_b_qian">1次</li>
                    <li class="ss_f_red ss_b_hui">无</li>
                </ul>
            </div>
            <div class="ss_box_list">
                <ul class="ss_box_o ss_box_a">
                    <li class="ss_box_title">基础会员（期限） </li>
                    <li class="ss_b_qian">无限制</li>
                    <li class="ss_f_red ss_b_hui">半年</li>
                    <li class="ss_b_qian">1次</li>
                    <li class="ss_f_red ss_b_hui">42天</li>
                    <li class="ss_b_qian">6个</li>
                    <li class="ss_f_red ss_b_hui">√</li>
                    <li class="ss_b_qian">√</li>
                    <li class="ss_f_red ss_b_hui">1个月</li>
                    <li class="ss_b_qian">1个月</li>
                    <li class="ss_f_red ss_b_hui">2周</li>
                    <li class="ss_b_qian">1周</li>
                    <li class="ss_f_red ss_b_hui">3周</li>
                    <li class="ss_b_qian">2周</li>
                    <li class="ss_f_red ss_b_hui">无</li>
                    <li class="ss_b_qian">5000次</li>
                    <li class="ss_f_red ss_b_hui">6次</li>
                    <li class="ss_b_qian">6次</li>
                    <li class="ss_f_red ss_b_hui">6次</li>
                    <li class="ss_b_qian">6次</li>
                    <li class="ss_f_red ss_b_hui">无</li>
                </ul>
            </div>
            <div class="ss_box_list">
                <ul class="ss_box_o ss_box_b">
                    <li class="ss_box_title">标准会员（期限） </li>
                    <li class="ss_b_qian">无限制</li>
                    <li class="ss_f_red ss_b_hui">3个月</li>
                    <li class="ss_b_qian">无</li>
                    <li class="ss_f_red ss_b_hui">1个月</li>
                    <li class="ss_b_qian">4个</li>
                    <li class="ss_f_red ss_b_hui">√</li>
                    <li class="ss_b_qian">√</li>
                    <li class="ss_f_red ss_b_hui">2周</li>
                    <li class="ss_b_qian">1周</li>
                    <li class="ss_f_red ss_b_hui">1周</li>
                    <li class="ss_b_qian">无</li>
                    <li class="ss_f_red ss_b_hui">二周</li>
                    <li class="ss_b_qian">一周</li>
                    <li class="ss_f_red ss_b_hui">无</li>
                    <li class="ss_b_qian">5000次</li>
                    <li class="ss_f_red ss_b_hui">3次</li>
                    <li class="ss_b_qian">3次</li>
                    <li class="ss_f_red ss_b_hui">3次</li>
                    <li class="ss_b_qian">3次</li>
                    <li class="ss_f_red ss_b_hui">无</li>
                </ul>
            </div>
            <div class="ss_box_list">
                <ul class="ss_box_o ss_box_c">
                    <li class="ss_box_title  ">黄金会员（期限） </li>
                    <li class="ss_b_qian">无限制 </li>
                    <li class="ss_f_red ss_b_hui">1年</li>
                    <li class="ss_b_qian">2次</li>
                    <li class="ss_f_red ss_b_hui">60天</li>
                    <li class="ss_b_qian">10个</li>
                    <li class="ss_f_red ss_b_hui">√</li>
                    <li class="ss_b_qian">√</li>
                    <li class="ss_f_red ss_b_hui">2个月</li>
                    <li class="ss_b_qian">2个月</li>
                    <li class="ss_f_red ss_b_hui">4周</li>
                    <li class="ss_b_qian">2周</li>
                    <li class="ss_f_red ss_b_hui">4周</li>
                    <li class="ss_b_qian">4周</li>
                    <li class="ss_f_red ss_b_hui">一次</li>
                    <li class="ss_b_qian">5000条</li>
                    <li class="ss_f_red ss_b_hui">10次</li>
                    <li class="ss_b_qian">10次</li>
                    <li class="ss_f_red ss_b_hui">10次</li>
                    <li class="ss_b_qian">10次</li>
                    <li class="ss_f_red ss_b_hui">无</li>
                </ul>
            </div>
        </div>
    </div>

<div style="clear:both;"></div>

</body></html>
三：源码 http://pan.baidu.com/s/1i53d8MD
posted @ 2017-04-14 15:15 王传明阅读(323) 评论(0) 收藏举报
刷新页面返回顶部
王传明

网页excel对比表样式

公告
