zoukankan      html  css  js  c++  java
  • 2019.7.17东湖大数据页面二

    html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>东湖大数据</title>
    <link rel="stylesheet" type="text/css" href="psd2.css"/>
    </head>
    <body>
    <header>
    <div class="h_content" class="reg">
    <a href="javascript:void(0)">
    <img src="images/reg.png"/>
    <span>注册</span>
    </a>
    <a href="javascript:void(0)" class="login">
    <img src="images/login.png"/>
    <span>登录</span>
    </a>
    </div>
    </header>
    <div class="search_containr">
    <div class="logo">
    <img src="images/logo.png"/>
    </div>
    <div class="search_content">
    <input type="text" placeholder="按找标题搜索数据" />
    </div>
    <div class="search_right">
    <a href="javascript:void(0)">
    <img src="images/search.png"/>搜索
    </a>
    </div>
    <button>
    <a href="javascript:void(0)">
    上传数据
    </a>
    </button>
    </div>
    <nav>
    <ul>
    <li><a href="javascript:void(0)">首页</a></li>
    <li class="present"><a href="javascript:void(0)">数据变现</a></li>
    <li><a href="javascript:void(0)">免费专区</a></li>
    <li><a href="psd.html">数据众包</a></li>
    <li><a href="javascript:void(0)">数据商店</a></li>
    <li><a href="javascript:void(0)">个人中心</a></li>
    </ul>
    </nav>
    <section>
    <ul>
    <li><span>当前位置:</span></li>
    <li><a href="javascript:void(0)">首页</a></li>
    <li><span>></span></li>
    <li><a href="javascript:void(0)">数据变现</a></li>
    <li><span>></span></li>
    <li><a href="javascript:void(0)">所有分类</a></li>
    </ul>
    <aside>
    <ul>
    <li class="li_0"><a href="javascript:void(0)">
    所有分类</a></li>
    <div class="aside_right">
    <li class="li_1"><a href="javascript:void(0)">
    交通 环境<span>&nbsp;632 ></span></a></li>
    <div class="aside_hover">
    <p>交通 环境</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_2"><a href="javascript:void(0)">
    公众服务<span>&nbsp;&nbsp;412 ></span></a></li>
    <div class="aside_hover">
    <p>公众服务</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_3"><a href="javascript:void(0)">
    健康医疗<span>&nbsp;&nbsp;648 ></span></a></li>
    <div class="aside_hover">
    <p>健康医疗</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_4"><a href="javascript:void(0)">
    金融贸易<span>1456 ></span></a></li>
    <div class="aside_hover">
    <p>金融贸易</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_5"><a href="javascript:void(0)">
    科研应用<span>&nbsp;&nbsp;895 ></span></a></li>
    <div class="aside_hover">
    <p>科研应用</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_6"><a href="javascript:void(0)">
    社交与征信<span>98 ></span></a></li>
    <div class="aside_hover">
    <p>社交与征信</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_7"><a href="javascript:void(0)">
    文娱 音乐<span>&nbsp;&nbsp;&nbsp;62 ></span></a></li>
    <div class="aside_hover">
    <p>文娱 音乐</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_8"><a href="javascript:void(0)">
    知识产权<span>&nbsp;&nbsp;417 ></span></a></li>
    <div class="aside_hover">
    <p>知识产权</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_9"><a href="javascript:void(0)">
    智慧生活<span>2845 ></span></a></li>
    <div class="aside_hover">
    <p>智慧生活</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_10"><a href="javascript:void(0)">
    产业数据<span>&nbsp;&nbsp;711 ></span></a></li>
    <div class="aside_hover">
    <p>产业数据</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    <div class="aside_right">
    <li class="li_11"><a href="javascript:void(0)">
    政府数据<span>&nbsp;&nbsp;569 ></span></a></li>
    <div class="aside_hover">
    <p>政府数据</p>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">劳动与雇佣关系(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    <a href="javascript:void(0)">失业、就业及社会保障(632)</a>
    <a href="javascript:void(0)">社会信息相关数据(632)</a>
    </div>
    </div>
    </ul>
    </aside>
    <div class="section_content">
    <ul class="bord">
    <li><span>标价方式:</span></li>
    <li><a href="javascript:void(0)" class="bord_select">不限</a></li>
    <li><a href="javascript:void(0)">免费</a></li>
    <li><a href="javascript:void(0)">收费</a></li>
    </ul>
    <ul class="bord">
    <li><span>数据格式:</span></li>
    <li><a href="javascript:void(0)" class="bord_select">不限</a></li>
    <li><a href="javascript:void(0)">视频</a></li>
    <li><a href="javascript:void(0)">音频</a></li>
    <li><a href="javascript:void(0)">文本</a></li>
    <li><a href="javascript:void(0)">图像</a></li>
    <li><a href="javascript:void(0)">其他</a></li>
    </ul>
    <ul class="bord">
    <li><span>数据来源:</span></li>
    <li><a href="javascript:void(0)" class="bord_select">不限</a></li>
    <li><a href="javascript:void(0)">企业</a></li>
    <li><a href="javascript:void(0)">政府</a></li>
    <li><a href="javascript:void(0)">公益</a></li>
    <li><a href="javascript:void(0)">个人</a></li>
    <li><a href="javascript:void(0)">其他</a></li>
    </ul>
    <ul class="bord">
    <li><span>数据格式:</span></li>
    <li><a href="javascript:void(0)" class="upda1">销量</a></li>
    <li><a href="javascript:void(0)" class="upda2">最新</a></li>
    <li><a href="javascript:void(0)" class="upda3">价格</a></li>
    </ul>
    <b>
    共为您找到:
    <span>100000</span>
    条数据
    <a href="psd3.html" class="list_1">
    列表
    </a>
    <a href="javascript:void(0)" class="list_2">
    大图
    </a>
    </b>
    </div>
    <div class="section_main">
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/fangjia.png"/></dt>
    <dt class="box_dt1">2016 全国房价指数</dt>
    <dt class="box_dt2"><span>免费</span></dt>
    <dt class="box_dt3">累计交易:150次</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/heimindan.png"/></dt>
    <dt class="box_dt1">个人失信被执行黑名单</dt>
    <dt class="box_dt2"><span>免费</span></dt>
    <dt class="box_dt3">累计交易:150次</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/fangjia.png"/></dt>
    <dt class="box_dt1">2016 全国房价指数</dt>
    <dt class="box_dt2"><span>免费</span></dt>
    <dt class="box_dt3">累计交易:150次</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/fangjia.png"/></dt>
    <dt class="box_dt1">2016 全国房价指数</dt>
    <dt class="box_dt2"><span>免费</span></dt>
    <dt class="box_dt3">累计交易:150次</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/heimindan.png"/></dt>
    <dt class="box_dt1">个人失信被执行黑名单</dt>
    <dt class="box_dt2"><span>免费</span></dt>
    <dt class="box_dt3">累计交易:150次</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/fangjia.png"/></dt>
    <dt class="box_dt1">2016 全国房价指数</dt>
    <dt class="box_dt2"><span>免费</span></dt>
    <dt class="box_dt3">累计交易:150次</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/fangjia.png"/></dt>
    <dt class="box_dt1">2016 全国房价指数</dt>
    <dt class="box_dt2"><span>免费</span></dt>
    <dt class="box_dt3">累计交易:150次</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/gongshang.png"/></dt>
    <dt class="box_dt1">工商诉讼数据</dt>
    <dt class="box_dt2">&yen;<span>500</span></dt>
    <dt class="box_dt3">累计交易:1500.00元</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/heimindan.png"/></dt>
    <dt class="box_dt1">个人失信被执行黑名单</dt>
    <dt class="box_dt2"><span>免费</span></dt>
    <dt class="box_dt3">累计交易:150次</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="box">
    <div class="main_box">
    <dd>
    <dt class="box_img"><img src="images/fangjia.png"/></dt>
    <dt class="box_dt1">2016 全国房价指数</dt>
    <dt class="box_dt2"><span>免费</span></dt>
    <dt class="box_dt3">累计交易:150次</dt>
    </dd>
    </div>
    <div class="main_box0">
    <p>数据来源于统计局,统计了近年来废气中的主要污染物数量。</p>
    <button>
    <a href="javascript:void(0)">查看详情</a>
    </button>
    </div>
    </div>
    <div class="foot">
    <footer>
    <a href="javascript:void(0)" class="num">上一页</a>
    <a href="javascript:void(0)" class="num">1</a>
    <a href="javascript:void(0)" class="num">2</a>
    <a href="javascript:void(0)" class="num">3</a>
    <a href="javascript:void(0)" class="num">4</a>
    <a href="javascript:void(0)" class="num">5</a>
    <a href="javascript:void(0)" class="num">6</a>
    <a href="javascript:void(0)" class="num">7</a>
    <a href="javascript:void(0)" class="num">8</a>
    <a href="javascript:void(0)" class="num">9</a>
    <a href="javascript:void(0)" class="num">下一页></a>
    <span>共100页</span>
    <span class="span0">到第
    <input type="text" />
    </span> 页
    <button>确定</button>
    </footer>
    </div>
    </section>
    <div class="bot">
    <div class="bot_top">
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td class="bot_top_img">
    <a href="javascript:void(0)">
    <img src="images/my.png"/>
    </a>
    </td>
    <td class="bot_top_a">
    <a href="javascript:void(0)">
    关于我们
    </a>
    </td>
    <td class="bot_top_img">
    <a href="javascript:void(0)">
    <img src="images/pt.png"/>
    </a>
    </td>
    <td class="bot_top_b">
    <a href="javascript:void(0)">
    平台功能
    </a>
    </td>
    <td class="bot_top_img">
    <a href="javascript:void(0)">
    <img src="images/zx.png"/>
    </a>
    </td>
    <td class="bot_top_c">
    <a href="javascript:void(0)">
    在线咨询
    </a>
    </td>
    <td class="bot_top_img">
    <a href="javascript:void(0)">
    <img src="images/vx (2).png"/>
    </a>
    </td>
    <td class="bot_top_d">
    <a href="javascript:void(0)">
    东湖大数据交易中心<br />微信公众号
    </a>
    </td>
    </tr>
    </table>
    <table class="bot_top_table">
    <tr>
    <td rowspan="2" class="bot_top_img2"><img src="images/dh (2).png" id="vx"/></td>
    <td class="bot_top_a2"><span>服务热线</span></td>
    <td class="bot_top_b2"><a href="JavaScript:void(0)">数据变现</a></td>
    <td class="bot_top_c2"><a href="JavaScript:void(0)">问题咨询</a></td>
    <td rowspan="4" class="img_ma"><img src="images/ma.png"/></td>
    </tr>
    <tr>
    <td class="bot_top_a2"><span id="phone">400-697-1116</span></td>
    <td class="bot_top_b2"><a href="JavaScript:void(0)">免费专区</a></td>
    <td class="bot_top_c2"><a href="JavaScript:void(0)">合作方式</a></td>
    </tr>
    <tr>
    <td rowspan="2" class="bot_top_img2"><img src="images/qq (2).png"/></td>
    <td class="bot_top_a2"><span>QQ</span></td>
    <td class="bot_top_b2"><a href="JavaScript:void(0)">交易大厅</a></td>
    <td class="bot_top_c2"><a href="JavaScript:void(0)">联系我们</a></td>
    </tr>
    <tr>
    <td class="bot_top_a2"><span id="qq">3218415596</span></td>
    <td class="bot_top_b2"><a href="JavaScript:void(0)">服务商店</a></td>
    <td class="bot_top_c2"><a href="JavaScript:void(0)">用户协议</a></td>
    </tr>
    </table>
    </div>
    <div class="bot_bot">
    <span>©武汉东湖大数据交易中信股份有限公司 Donghu Trading Center for Big Data Co.Ltd
    鄂ICP备15013761号-1
    </span>
    </div>
    </div>
    <a href="#phone"><div class="fixed_1"></div></a>
    <a href="#qq"><div class="fixed_2"></div></a>
    <a href="#vx"><div class="fixed_3"></div></a>
    <a href="#"><div class="fixed_4"></div></a>
    </body>
    </html>

    CSS:

    *{
    margin: 0;
    padding: 0;
    }
    body{
    background-color: #f9f9f9;
    font-size: 14px;
    position: relative;
    }
    .fixed_1,.fixed_2,.fixed_3,.fixed_4{
    background-repeat: no-repeat;
    position: fixed;
    background-color: #15aafb;
    50px;
    height: 50px;
    border-radius: 50px;
    }
    .fixed_1{
    background-position: 5px 12px;
    bottom: 30px;
    right: 5px;
    background-image: url(images/dh.png);
    }
    .fixed_2{
    background-position: 11px 9px;
    bottom: 90px;
    right: 5px;
    background-image: url(images/qq.png);
    }
    .fixed_3{
    background-position: 10px 14px;
    bottom: 150px;
    right: 5px;
    background-image: url(images/vx.png);
    }
    .fixed_4{
    background-position: 8px 16px;
    bottom: 210px;
    right: 5px;
    background-image: url(images/up.png);
    }
    header{
    100%;
    min- 1200px;
    height: 30px;
    border-bottom: 1px solid #dcdcdc;
    background-color: #f8f8f8;
    }
    a{
    text-decoration: none;
    font-size: 14px;
    }
    .h_content{
    1200px;
    height: 30px;
    margin: 0 auto;
    line-height: 30px;
    text-align: center;
    }
    .h_content>a{
    font-size: 12px;
    color: #999;
    float: right;
    49px;
    height: 18px;

    }
    .login{
    margin-right: 19px;
    }
    span{
    margin-left: 5px;
    }
    .search_containr{
    1200px;
    height: 120px;
    margin: 0 auto;
    }
    .logo{
    219px;
    height: 68px;
    margin-top: 28px;
    float: left;
    }
    .search_content{
    margin:33px 0 0 193px;
    float: left;
    }
    .search_right{
    88px;
    height: 36px;
    margin-top: 33px;
    float: left;
    }
    .search_containr>button{
    margin: 33px 0 0 160px;
    background-color: #fff;
    border-style: none;
    128px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid #15aafb;
    background-image: url(images/update.png);
    background-repeat: no-repeat;
    background-position: 15px 7px ;
    }
    .search_containr>button a{
    font-size: 14px;
    color: #15aafb;
    display: inline-block;
    margin-left:8px;
    }
    .search_containr button:hover{
    background-image: url(images/update_hover.png);
    background-color: #15aafb;
    }
    .search_containr>button:hover a{
    color: #fff;
    }
    button img{
    display: inline-block;
    margin: 8px 8px 0 10px;
    float: left;
    }
    .search_content{
    408px;
    height: 32px;
    border: 2px solid #15aafb;
    }
    .search_content>[type="text"]{
    border-style: none;
    padding: 4px 0 0 15px;
    font-size: 14px;
    393px;
    height: 27px;
    }
    .search_right{
    88px;
    height: 36px;
    background-color: #15aafb;
    text-align: center;
    border-bottom-right-radius: 7px;
    }
    .search_right>a,.search_right img{
    color: #ffffff;
    line-height: 36px;
    float: left;
    }
    .search_right img{
    margin: 8px 8px 0 10px ;
    }nav{
    100%;
    min- 1200px;
    height: 40px;
    background-color: #0671d7;
    margin: 0 auto;
    }
    li{
    list-style: none;
    float: left;
    }
    nav>ul{
    margin-left: 350px;
    }
    nav>ul li{
    113px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    }
    nav a{
    color: #fff;
    }
    nav li:hover,.present{
    background-color: #0c59c1;
    }
    section{
    1200px;
    margin: 0 auto;
    }
    section>ul{
    height: 50px;
    }
    section>ul li a,section>ul li span,.bord span{
    color: #333;
    float: left;
    font-size: 14px;
    margin: 15px 5px 0 0;
    }
    aside{
    233px;
    height: 575px;
    background-color: #f5f5f5;
    float: left;
    }
    aside>ul li a{
    197px;
    height: 49px;
    display: block;
    color: #5a5a5a;
    line-height: 49px;
    font-size: 16px;
    margin-left: 37px;
    }
    aside>ul li a span{
    color: #5a5a5a;
    font-size: 14px;
    margin: 0 60px;
    }
    .li{
    background-color: #15AAFB;
    }
    .li>a{
    color: #FFFFFF;
    }
    aside>ul li:hover{
    background-color: #FFFFFF;
    }
    aside>ul li:hover a{
    color: #003f98;
    }
    aside>ul li:hover span{
    color: #15AAFB;
    }
    aside>ul li{
    background-position: 10px 13px;
    background-repeat: no-repeat;
    }
    .aside_right{
    234px;
    }
    .aside_hover>p{
    display: block;
    height: 42px;
    220px;
    border-bottom: 1px solid #EEEEEE;
    line-height: 42px;
    margin-left: 30px;
    color: #003f98;
    }
    .aside_hover>a{
    display: block;
    height: 40px;
    220px;
    line-height: 42px;
    margin-left: 30px;
    color: #000000;
    }
    .aside_hover>a:hover{
    color: #15aafb;
    }
    .aside_hover{
    280px;
    height: 527px;
    box-shadow: 0 0 5px 2px #EEEEEE;
    display: none;
    background-color: #FFFFFF;
    margin: 49px 0 0 234px;
    position: absolute;
    }
    .aside_right:hover>.aside_hover{
    display: block;
    }
    .li_0{
    background-image: url(images/suoyou.png);
    background-color: #15AAFB;
    }
    .li_0 a{
    color: #FFFFFF;
    }
    .li_0:hover{
    background-color: #15AAFB;
    }
    .li_0:hover a{
    color: #FFFFFF;
    }
    .li_1{
    background-image: url(images/jiaotong.png);
    }
    .li_1:hover{
    background-image: url(images/jiaotong_hover.png);
    }
    .li_2{
    background-image: url(images/gongzhong.png);
    }
    .li_2:hover{
    background-image: url(images/gongzhong_hover.png);
    }
    .li_3{
    background-image: url(images/jiankang.png);
    }
    .li_3:hover{
    background-image: url(images/jiankang_hover.png);
    }
    .li_4{
    background-image: url(images/jinrong.png);
    }
    .li_4:hover{
    background-image: url(images/jinrong_hover.png);
    }
    .li_5{
    background-image: url(images/keyan.png);
    }
    .li_5:hover{
    background-image: url(images/keyan_hover.png);
    }
    .li_6{
    background-image: url(images/shejiao.png);
    }
    .li_6:hover{
    background-image: url(images/shejiao_hover.png);
    }
    .li_7{
    background-image: url(images/wenyu.png);
    }
    .li_7:hover{
    background-image: url(images/wenyu_hover.png);
    }
    .li_8{
    background-image: url(images/zhishi.png);
    }
    .li_8:hover{
    background-image: url(images/zhishi_hover.png);
    }
    .li_9{
    background-image: url(images/zhihui.png);
    }
    .li_9:hover{
    background-image: url(images/zhihui_hover.png);
    }
    .li_10{
    background-image: url(images/chanye.png);
    }
    .li_10:hover{
    background-image: url(images/chanye_hover.png);
    }
    .li_11{
    background-image: url(images/zhengfu.png);
    }
    .li_11:hover{
    background-image: url(images/zhengfu_hover.png);
    }
    .section_content{
    960px;
    height: 250px;
    float: left;
    background-color: #fff;
    padding: 15px 0 15px 0;
    margin-left: 7px;
    }
    .section_content>ul{
    880px;
    height: 50px;
    margin: 0 40px 0 40px;
    }
    .bord{
    border-bottom: 2px dotted #f9f9f9;
    }
    .bord_select{
    background-color: #15aafb;
    }
    .section_content li span{
    font-weight: bold;
    display: inline-block;
    text-align: center;
    line-height: 10px;
    }
    .section_content li a{
    display: inline-block;
    text-align: center;
    line-height: 25px;
    color: #000;
    padding: 0 5px 0 5px;
    margin: 7px 10px 0 5px;
    height: 25px;
    }
    .section_content li a:hover{
    background-color: #15aafb;
    }
    .section_content .upda1{
    background-repeat: no-repeat;
    padding: 0 20px 0 5px;
    background-position: 38px 7px;
    border: 1px solid #15aafb;
    background-image: url(images/down_hover.png);
    background-color: #15aafb;
    }
    .section_content .upda2{
    background-image: url(images/down.png);
    background-repeat: no-repeat;
    padding: 0 20px 0 5px;
    background-position: 38px 7px;
    border: 1px solid #15aafb;
    }
    .section_content .upda2:hover{
    background-image: url(images/down_hover.png);
    }
    .section_content .upda3{
    background-image: url(images/down.png);
    background-repeat: no-repeat;
    padding: 0 20px 0 5px;
    background-position: 38px 7px;
    border: 1px solid #15aafb;
    }
    .section_content .upda3:hover{
    background-image: url(images/down_hover.png);
    }
    .section_content>b{
    display: inline-block;
    920px;
    margin: 15px 40px;
    }
    .section_content>b span{
    color: #ffa200;
    }
    .list_1,.list_2{
    color: #000000;
    float: right;
    font-weight: 100;
    margin: 0 40px 0 0;
    position: relative;
    50px;
    text-align: right;
    }
    .list_1{
    background-image: url(images/liebiao.png);
    background-repeat: no-repeat;
    }
    .list_2{
    background-image: url(images/datu_hover.png);
    background-repeat: no-repeat;
    color: #ffa200;
    background-position: 3px 3px;
    }
    .list_1:hover{
    background-image: url(images/liebiao_hover.png);
    color: #ffa200;
    background-position: 4px 3px;
    }
    .section_main{
    967px;
    float: left;
    margin: 10px 0 0 0px;
    }
    .main_box,.main_box0,.box{
    234px;
    height: 270px;
    margin: 0 3px 7px 4px;
    float: left;
    }
    .main_box,.main_box0{
    background-color: #FFFFFF;
    }
    .box_img,.box_dt1,.box_dt2,.box_dt3{
    text-align: center;
    }
    .box_img{
    margin-top: 40px;
    }
    .box_dt1{
    font-size: 16px;
    margin-top: 25px;
    }
    .box_dt2{
    font-size: 12px;
    color: #ffa200;
    margin-top: 20px;
    }
    .box_dt2 span{
    font-size: 18px;
    }
    .box_dt3{
    font-size: 12px;
    color: #c6c6c6;
    margin-top: 10px;
    }
    .main_box0{
    box-shadow: 0 0 7px 2px #EEEEEE ;
    display: none;
    position: absolute;
    background-color: rgba(255,255,255,.9);
    }
    .main_box0 p{
    display: block;
    175px;
    margin: 70px auto 50px;
    }
    .main_box0 button{
    100px;
    height: 30px;
    border: 1px solid #15AAFB;
    background-color: #FFFFFF;
    border-radius: 5px;
    margin-left: 65px;
    }
    .main_box0 button a{
    color: #15AAFB;
    }
    .main_box0 button:hover{
    background-color: #15AAFB;
    }
    .main_box0 button:hover a{
    color: #FFFFFF;
    }
    .main_box:hover{
    cursor: pointer;
    }
    .box:hover>.main_box0{
    display: block;
    }
    .foot{
    960px;
    height: 120px;
    clear: both;
    float: right;
    }
    footer{
    750px;
    height: 30px;
    margin: 40px 140px;
    position: absolute;
    }
    .num{
    border: 1px solid #ccc;
    background-color: #EEEEEE;
    color: #000000;
    padding: 5px 10px;
    }
    .num:hover{
    background-color: #15aafb;
    color: #FFFFFF;
    }
    footer span{
    display: inline-block;
    margin-left: 35px;
    }
    .span0{
    display: inline-block;
    margin-left: 20px;
    }
    footer [type="text"]{
    27px;
    height: 27px;
    }
    footer>button{
    50px;
    height: 30px;
    margin-left: 10px;
    background-color: #e5e5e5;
    border-style: solid;
    }
    .bot{
    clear: both;
    100%;
    min- 1200px;
    height: 340px;
    background-color: #212930;
    }
    .bot_top{
    1200px;
    height: 300px;
    margin: 0 auto;
    }
    .bot_top table{
    1200px;
    margin: 0 auto;
    padding-top: 20px;
    }
    .bot_top_img{
    60px;
    height: 70px;
    }
    .bot_top_a{
    350px;
    height: 100px;
    }
    .bot_top_b{
    270px;
    height: 100px;
    }
    .bot_top_c{
    260px;
    height: 100px;
    }
    .bot_top_d{
    200px;
    height: 100px;
    }
    .bot_top a,.bot_top span{
    font-size: 18px;
    color: #FFFFFF;
    }
    .bot_top_a2,.bot_top_b2,.bot_top_c2,.bot_top_img2{
    border-right: 1px solid #2b333a;
    }
    .bot_top_table span,.bot_top_table a{
    color: #7a889c;
    font-size: 14px;
    }
    .bot_top_img2{
    39px;
    height: 30px;
    }
    .bot_top_a2{
    336px;
    height: 30px;
    }
    .bot_top_b2{
    315px;
    height: 30px;
    }
    .bot_top_c2{
    304px;
    height: 30px;
    }
    .img_ma{
    166px;
    height: 139px;
    }
    .bot_top_table a:hover{
    color: #fff;
    }
    .bot_bot{
    100%;
    height: 40px;
    background-color: #1c2227;
    line-height: 40px;
    text-align: center;
    }
    .bot_bot span{
    color: #57595e;
    }

  • 相关阅读:
    元素的属性
    表单
    Array数组类
    string类
    js数据类型以及原型分析
    this
    有关兼容性的解决
    单位
    滚动条 和 背景位置及绝对定位
    圣杯布局 和 双飞翼布局
  • 原文地址:https://www.cnblogs.com/awei313558147/p/11217819.html
Copyright © 2011-2022 走看看