长城证劵---关于长城页面前端代码

一只小朋友123！
已于 2024-06-26 20:15:24 修改
阅读量313
点赞数 3
文章标签：前端
于 2024-06-26 15:36:14 首次发布
本文链接：https://blog.csdn.net/m0_73273541/article/details/139990866
版权
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于长城</title>
</head>

      <style>
        *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body{
  overflow: scroll;
  background-color: #f2f2f2;
}
a{
  text-decoration: none;
}
li{
  list-style: none;
}
.all{
 height: 480px;
 background-color: white;
}
.all1{
 
  width: 1226px;
  height: 480px;
  margin: 0 auto;
  position: relative;
}
.all1 .chance a:hover{
   color: #4c4b4b;
}
.nav li:hover{
  color: #007bc7;
  
}
.nav .jiantou{
  display: flex;
}
.nav .jiantou:hover .span1{
  transform: scaleY(-1);
}
.chance{
display: none;
border-radius: 5px;
position:absolute;
margin-left: -200px;
background-color: rgba(7, 87, 140, 0.8);
width: 1200px;
height: 180px;
margin-top: 58px;
}
.all1 .jiantou:hover .chance{
  display: block;
}
.all1 th a{
margin-left: 60px;
 text-align: center;
 font-size: 15px;
 width: 200px;
 color:rgb(235, 234, 234);
}
.all1 td a{
 text-align: center;
 color:rgb(235, 234, 234);
 font-size: 15px;
 width: 200px;

}
.all1 .jiantou span{
 padding-left: 30px;
}

.logo{
      display: flex;
      align-items: center;
      width: 1226px;
      height: 80px;
      font-size: 18px;
      margin: 0 auto;
}

.geli{
  color: #666666;
  margin-left: 330px;
  margin-right: 20px;
}
.logo a{
  color: #007bc7;
  margin-right: 150px;
}
.logo input{
  font-size: 18px;
  color: #666666;

}
.lantiao{
    width: 1226px;
    height: 2px;
    margin: 0 auto;
    background-color: #007bc7;
}
.nav{
    width: 1226px;
    height: 60px;
    margin: 0 auto;
   
}
.nav ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav li{
  text-align: center;
  line-height: 58px;
  width: 150px;
  height: 58px;
  font-size: 18px;
}

.juzhong {
  display: flex;
  justify-content: center;
  width: 1226;
  height: 300px; 
}
        /* 二 */
        .all2{
        
          width: 1226px;
          height: 1400px;
          margin: 0 auto;
          display: flex;
          
        }

        .longbox{
         
          width: 240px; 
          margin-top: 20px;
          background-color: white;
          transition: all 2s;
        }

        .longbox li{
          display: flex;
          width: 240px;
          height: 60px;
          padding-left: 60px;
          line-height: 60px;
          font-size: 16px;
          color: #666666; 
          border-bottom: 1px solid #ccc9c9;
        }
        .longbox li:hover  {
          color: #007bc7;
          
        }
       
        .longbox .one{
         background-color: #007bc7;
         color: white;
         padding-left: 20px;
         font-size: 20px;
        }
        .longbox .one1 {
          padding-left: 40px;
          color: #007bc7;
          animation: all 2s;
        }
        
        .longbox .one1 .div1{
          padding-left: 100px;
          color: #007bc7;
         
        }
        .gaikuang li{
          width: 240px;
          height: 60px;
          padding-left: 60px;
          line-height: 60px;
          font-size: 16px;
          color: #666666; 
          border-bottom: 1px solid #ccc9c9;
          background-color: white;
          display: none;
          transition: display 2s;
        }
        
        .longbox:hover .div1{
          transform: scaleY(-1);
        }
        .longbox:hover .gaikuang li{
          
          display: block;
        }
        .all3{
         width: 240px;
         height: 15*60px;
        transition: all 1s;
         background-color: white;
        }
        
        .all3 li{
          display: flex;
          width: 240px;
          height: 60px;
          padding-left: 40px;
          line-height: 60px;
          font-size: 16px;
          color: #101010; 
          border-bottom: 1px solid #ccc9c9;
        }
       
        /* 三 */
        .box3{
          width: 940px;
          height: 470px;
          background-color: white;
          margin-top: 20px;
          margin-left: 40px;
        }
        .box3 span{
         display: block;
         margin: 20px 20px;
          color: #666666;
        padding-bottom: 30px;
        }
        .box3 p{
          text-indent: 2em; 
          padding-bottom: 30px;
        }
        .all4{
          display: flex;
          margin-top: 20px;
          height: 365px;
          background-color: #e0e0e0;
              
            }
        .all4 .one{
          margin-left: 100px;
          width: 890px;
          height: 332px;
        }
      
        
        .all4 .two{
          display: flex;
          margin-top: 20px;
          justify-content: space-between;
          width: 330px;
          height: 180px;
        }
        .all4 .two .two1{
        
          width: 134px;
          height: 178px;
          background-color:#d4cfcf;
        }
        th,td a{
          padding-top: 10px;
          text-align: left;
          color: #999;
          font-size: 16px;
          width: 168px;
         
        }

        .all4 .two .two1 img{
          margin-top: 15px;
          margin-left: 15px;
         
        }
        .all4 p{
          text-align: center;
          font-size: 14px;
          color: #999;
        }
      </style>
<body>
    <div class="all">
      <div class="all1">
        <div class="logo">
          <img src="http://www.cgws.com/cczq/images/logo_2.png" alt="">
          <div class="geli">客服热线</div> <a href="#">95514   400-6666-888</a><input type="text" name="name" value="请输入关键字">
        </div> 
       <div class="lantiao"></div> 
        <div class="nav">
          <ul>
            <li><a href="./首页.html">首页</a></li>
            <li>关于长城</li>
            <li class="jiantou">长城业务<span class="span1">\/</span>
              <table class="chance">
                <tr>
                  <th><a href="#">金融产品公式</a></th>
                  <th><a href="#">经济业务</a></th>
                  <th><a href="#">融资业务</a></th>
                  <th><a href="#">港股通</a></th>
                  <th><a href="#">沪伦通</a></th>
                  <th><a href="#">资产管理</a></th>
                </tr>
              </thead>
               <tbody>
                <tr>
                  <td><a href="#">互联网金融</a></td>
                  <td><a href="#">柜台市场(OTC)</a></td>
                  <td><a href="#">投资银行</a></td>
                  <td><a href="#">新三板</a></td>
                  <td><a href="#">私募服务</a></td>
                  <td><a href="#">国际业务</a></td>
                </tr>
  
                <tr>
                  <td><a href="#">长城投资</a></td>
                  <td><a href="#">约定购回</a></td>
                  <td><a href="#">股票期权</a></td>
                  <td><a href="#">资金定投额度</a></td>
                  <td><a href="#">策略交易系统</a></td>
                  <td><a href="#">报价回购</a></td>
                </tr>
                </tbody>
              </table>
              </li>
            <li>网上营业厅</li>
            <li>咨询中心</li>
            <li>我的长城</li>
            <li>投资者关系</li>
            <li>诚聘英才</li>
          </ul>
        </div>
        <!-- 图片居中 -->
        <div class="juzhong"><img src="http://www.cgws.com/cczq/gycc/images/P020191126367063293623.png" ></div>
        <div><a href="#">首页 ></a><a href="#">关于长城 ></a><a href="#">公司概况 ></a><a href="#">公司简介</a></div>
      </div>
      </div>
    </div>
      <!-- 二. -->
       
        <div class="all2">
          <div class="longbox">
            <ul>
              <li class="one">关于长城</li>
              <li class="one1">公司概况<div class="div1">\/</div></li>
              
            </ul>
         
          <ul class="gaikuang">
            <li style="color: #007bc7;">公司简介</li>
            <li>主要股东</li>
            <li>公司董事、监事信息</li>
            <li>公司高级管理人员信息</li>
            <li>营业网点信息公示</li>
            <li>参控股公司</li>
          </ul>
          <!-- </div> -->
          
            <ul class="all3">
              <li>组织结构</li>
              <li>分支机构</li>
              <li>企业文化</li>
              <li>诚聘英才</li>
              <li>基金托管部门高管公示</li>
              <li>服务人员公示</li>
              <li>后台见证人员公示</li>
              <li>费用公示</li>
              <li>债券交易人员公示</li>
              <li>基金销售人员资格查询</li>
              <li>防范利益冲突制度公示</li>
              <li>对外展业系统信息</li>
              <li>业务许可证公示</li>
              <li>投资者资金收付渠道信息</li>
              <li>免责条款</li>
            </ul>
        
      
          </div>
          <div class="box3"><span><strong>公司概况</strong></span>
         <p>1995年，长城证券获中国人民银行批准设立。公司办公地址在广东省深圳市福田区金田路2026号能源大厦南塔楼10-19层，法定代表人：王军。2015年4月，长城证券整体变更设立股份有限公司。2018年10月26日，长城证券股份有限公司首次向社会公开发行股票并在深圳证券交易所上市交易，证券简称“长城证券”，证券代码“002939”。</p>
         <p>截至目前，长城证券拥有员工3000余人，在北京、上海、广州、杭州等地设有十余家分公司，在全国主要城市设有一百余家营业部。公司控股宝城期货有限责任公司、深圳市长城证券投资有限公司、深圳市长城长富投资管理有限公司等多家子公司，同时是长城基金管理有限公司、景顺长城基金管理有限公司两家基金公司的主要股东。</p>
         <p>目前，长城证券的控股股东为华能资本服务有限公司，实际控制人为中国华能集团有限公司。公司其他主要股东包括深圳新江南投资有限公司、深圳能源集团股份有限公司等。</p>
          <p>作为国内较早成立的综合类证券公司之一，经过二十余年的发展壮大，长城证券已经形成了多功能协调发展的金融业务体系。经营范围覆盖：证券经纪；证券投资咨询；与证券交易、证券投资活动有关的财务顾问；证券承销与保荐；证券自营；证券资产管理；融资融券；证券投资基金销售；为期货公司提供中间介绍业务；代销金融产品；证券投资基金托管。</p></div>
          
  
  </body>
</html>