仿照中国银行页面进行编写，主要涉及到float，定位

一、静态网页模仿，涉及到html和css

在这次的模仿中，主要利用的是定位和float，在学过flex布局后，会更简单编写。由于当时还对flex不是很清楚，所以就没用flex布局

二、使用步骤

这是中国银行的HTML文件，有需要的可以dd我。

简体中文 繁体中文 English

本网站支持IPv6

全球服务

机构网点 在线客服

</div>

服务热线:  95566

信用卡热线:  4006695566

    <div class="search">
      <input type="text" placeholder="请输入检索关键词" class="jiancha"><span class="iconfont icon-sousuo"></span>

    </div>
  </div>
</div>
<div class="navigation">
  <ul class="list">
    <li>
      <a href="javascript:;">首页</a>
    </li>
    <li class="banking">
      <a href="javascript:;">公司金融</a>

      <div class="second-level">
        <i class="sec-01"><img src="images/小三角.png" alt=""></i>
        <!-- <div class="second-level-menu"> -->
        <ul list style="color:#dadada;">
          <li>
            <a href="javascript:;">. 公司融资服务</a>
          </li>
          <li>
            <a href="javascript:;">. 贸易金融服务</a>
          </li>
          <li>
            <a href="javascript:;">. 公司金融市场服务</a>
          </li>
          <li>
            <a href="javascript:;">. 人民币结算服务</a>
          </li>
        </ul>
        <ul list style="color:#dadada;">
          <li>
            <a href="javascript:;">. 机构结构性存款</a>
          </li>
          <li>
            <a href="javascript:;">. 公司存款服务</a>
          </li>
          <li>
            <a href="javascript:;">. 服务首届消博会</a>
          </li>
          <li>
            <a href="javascript:;">. 服务第三届进博会</a>
          </li>
        </ul>
        <ul list style="color:#dadada;">
          <li>
            <a href="javascript:;">. 养老金服务</a>
          </li>
          <li>
            <a href="javascript:;">. 全球现金管理</a>
          </li>
          <li>
            <a href="javascript:;">. 公告信息</a>
          </li>
          <li>
            <a href="javascript:;">. 优惠活动</a>
          </li>
        </ul list style="color:#dadada;">

      </div>
    </li>

    <li class="person">
      <a href="javascript:;">个人金融</a>
      <div class="thrid-level">
        <i class="sec-02"><img src="images/小三角.png" alt=""></i>
        <ul list style="color:#dadada;">
          <li>
            <a href="javascript:;">
              . 存款与账户
            </a>
          </li>
          <li>
            <a href="javascript:;">
              . 个人贷款
            </a>
          </li>
          <li>
            <a href="javascript:;">
              . 个人理财
            </a>
          </li>
          <li>
            <a href="javascript:;">
              . 个人汇兑
            </a>
          </li>
        </ul>
        <ul list style="color:#dadada;">
          <li>
            <a href="javascript:;">
              . 个人结构性存款
            </a>
          </li>
          <li>
            <a href="javascript:;">
              . 个人交易
            </a>
          </li>
          <li>
            <a href="javascript:;">
              . 出国金融
            </a>
          </li>
          <li>
            <a href="javascript:;">