学信网首页

最新推荐文章于 2024-07-11 17:28:05 发布

钱难有，好想有钱

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量1k

点赞数 7

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_69075518/article/details/127795595

版权

1.html

轮播图用动画效果，无js

<!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>
    <link rel="stylesheet" href="../css/头部.css">
    <link rel="stylesheet" href="../css/主体部分.css">
    <link rel="stylesheet" href="../css/底部.css">
  <link rel="stylesheet" href="../download/font_3715470_7618s86muzl/iconfont.css">
</head>
<body>
   <!-- 头部 -->
    <header>
       <div class="img"> </div>
       <div class="wz">
          
        <h3><a href="#">中国高等教育学生信息网(学信网)</a></h3>
         <p>教育部学历查询网站、教育部高校招生阳光工程指定网站、全国硕士研究生招生报名和调剂指定网站</p>
       </div>
       <div class="denlu">
           <ul>
               <li><a href="#">注册</a></li>
               <li><a href="#">登录</a></li>
               <li><a href="#" class="last">English</a></li>
           </ul>
       </div>
       <input type="checkbox" name="" class="btn" id="">
       <script>
           // 获取元素
           var light = document.querySelector(".btn")
           var flag = 0;
           // 添加点击事件
           light.onclick = function () {
               if (flag == 0) {
                   // 获取body 并且改变 背景颜色
                   document.body.style.backgroundColor = 'rgba(63,17,32,.4)'
                   // 重新赋值 flag
                   flag = 1
               } else {
                   document.body.style.backgroundColor = '#fff'
                   flag = 0
   
               }
           }
       </script>
    </header>
   
    <!-- 导航 -->
    <nav>
      <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">学籍查询</a></li>
          <li><a href="#">学历查询</a></li>
          <li><a href="#">学位查询</a></li>
          <li><a href="#">在线验证</a></li>
          <li><a href="#">出国教育背景服务</a></li>
          <li><a href="#">图像校对</a></li>
          <li><a href="#">学信档案</a></li>
          <li><a href="#">高考</a></li>
          <li><a href="#">研招</a></li>
          <li><a href="#">港澳台招生</a></li>
          <li><a href="#">征兵</a></li>
          <li><a href="#">就业</a></li>
          <li><a href="#">学职平台</a></li>
      </ul>
    </nav>
    <!-- 主体 -->
    <section>
      <!-- 主体轮播图 -->
         <div class="bd-img">
            <div class="slide">
                <input type="radio" name='pic' id='pic1' checked>
            <input type="radio" name='pic' id='pic2'>
            <input type="radio" name='pic' id='pic3'>
            <div class="labels">
              <label for="pic1"></label>
              <label for="pic2"></label>
              <label for="pic3"></label>
            </div>
                <ul class="list">
                  <li class="item">
                    <img src="../图片/LOGO.jpg" alt="1">
                  </li>
                  <li class="item">
                    <img src="../图片/3.jpg" alt="1">
                  </li>
                  <li class="item">
                    <img src="../图片/2.jpg" alt="1">
                  </li>
                  <li class="item">
                    <img src="../图片/LOGO.jpg" alt="1">
                  </li>
                </ul>
              </div>
         </div>
         <!-- 主体文字部分 -->
         <article class="con">
             <div class="leftarticle">   <!-- 左侧文字部分 -->
             <h4> <a href="#"><span class="notpad">二十大报告关于教育的这些话，掷地有声</span> <span>这些方面，擘画中国未来发展</span></a></h4>
                <ul>
                 <li>
                    <a href="#"><span class="notpad">2023年考研网上报名时间为10月5日至25日</span><span>管理规定</span><span>考生诚信考试承诺书</span></a>
                 </li>
                 <li> <a href="#"><span class="notpad">2023年高考报名时间及方式查询</span><span>全国中小企业网上百日招聘高校毕业生活动</span></a></li>
                 <li> <a href="#"><span class="wz1">全国同等学力人员申请硕士学位管理工作信息平台迁移公告</span></a></li>
                 <li> <a href="#"><span class="wz1">国内学位信息查询与认证服务调整公告</span></a></li>
                 <li class="list"> 
                     <ul>
                        <li > <a href="#" class="lp">套号学历涉嫌违法</a></li>
                        <li> <a href="#">学信网招聘</a></li>
                        <li> <a href="#">新媒体矩阵</a></li>
                        <li> <a href="#">【新闻】</a></li>
                        <li> <a href="#">专题汇总</a></li>
                    </ul>
                 </li>
             </ul>
             </div>
             <div class="rightarticle"><!-- 右侧文字列表部分 -->
                 <div class="rightarticle-header">
                     <h2>教育资讯</h2>
                     <a href="#"> 更多</a>
                 </div>
                 <ul>
                   <li> <a href="#">教育报国，勇毅前行!优秀教师代表热议党的二十大1111</a></li>
                   <li> <a href="#">这些方面，擘画中国未来发展</a></li>
                   <li> <a href="#">二十大报告中关于教育的这些话，掷地有声!</a></li>
                   <li> <a href="#">2022年第12次全国教育系统疫情防控工作视频调度会1111</a></li>
                   <li> <a href="#">湖南工商大学:交叉融合培养数智型管理</a></li>
                   <li> <a href="#">新农科:从"提档升级"到“交叉融合”</a></li>
                 </ul>
             </div> 
         </article>
         <!-- 主体中间导航部分 -->
         <div class="sectionnav  con"> 
           <div class="sectiontupiao">
                 <span class="iconfont  icon-zhifeiji"></span>
                 <p>快速入口</p>
           </div>
           <div class="shajiao"></div>
           <div class="secnavwz">
               <ul>
                   <li><a href="#">学籍学历信息管理平台</a></li>
                   <li><a href="#">来华留学生学籍学历管理平台</a></li>
                   <li><a href="#">学位授予信息报送（备案)系统</a></li>
                   <li><a href="#">全国同等学力人员申请硕士学位管理工作信息平台</a></li>
                   <li><a href="#">全国万名优秀创新创业导师库</a></li>
                   <li><a href="#">毕业论文查重</a></li>
                   <li><a href="#">电子成绩单验证</a></li>
                   <li><a href="#">师范生管理信息系统</a></li>
                   <li><a href="#">第二学士学位招生信息平台</a></li>
                   <li><a href="#">安全家——职场安全早班车</a></li>
               </ul>
           </div>
         </div>
         <!-- 主体九宫格 -->
         <div class="secjiao">
           <div class="secjiaobox">
               <div class="sectop">
                <h3> <span class="iconfont icon-jianli"></span> <span>学籍学历学位</span></span></h3> 
                <p>高等教育学籍/学历/学位信息查询、验证、认证</p>
               </div>
               <ul>
                 <li><a href="#">学籍查询</a></li>
                 <li><a href="#">学籍验证</a></li>
                 <li><a href="#">学历查询</a></li>
                 <li><a href="#">学历验证</a></li>
                 <li><a href="#">学历认证</a></li>
                 <li><a href="#">学位查询</a></li>
                 <li><a href="#">学位验证</a></li>
                 <li><a href="#">学位认证</a></li>
               </ul>
           </div>  
           <div class="secjiaobox">
            <div class="sectop">
             <h3> <span class="iconfont  icon-jianli"></span><span> 学籍学历学位</span></h3> 
             <p>高等教育学籍/学历/学位信息查询、验证、认证</p>
            </div>
            <ul>
              <li><a href="#">学籍查询</a></li>
              <li><a href="#">学籍验证</a></li>
              <li><a href="#">学历查询</a></li>
              <li><a href="#">学历验证</a></li>
              <li><a href="#">学历认证</a></li>
              <li><a href="#">学位查询</a></li>
              <li><a href="#">学位验证</a></li>
              <li><a href="#">学位认证</a></li>
            </ul>
        </div>    
        <div class="secjiaobox">
          <div class="sectop">
           <h3> <span class="iconfont  icon-jianli"></span> <span>学籍学历学位</span></h3> 
           <p>高等教育学籍/学历/学位信息查询、验证、认证</p>
          </div>
          <ul>
            <li><a href="#">学籍查询</a></li>
            <li><a href="#">学籍验证</a></li>
            <li><a href="#">学历查询</a></li>
            <li><a href="#">学历验证</a></li>
            <li><a href="#">学历认证</a></li>
            <li><a href="#">学位查询</a></li>
            <li><a href="#">学位验证</a></li>
            <li><a href="#">学位认证</a></li>
          </ul>
      </div>   
      <div class="secjiaobox">
        <div class="sectop">
         <h3> <span class="iconfont  icon-jianli"></span> <span>学籍学历学位</span></h3> 
         <p>高等教育学籍/学历/学位信息查询、验证、认证</p>
        </div>
        <ul>
          <li><a href="#">学籍查询</a></li>
          <li><a href="#">学籍验证</a></li>
          <li><a href="#">学历查询</a></li>
          <li><a href="#">学历验证</a></li>
          <li><a href="#">学历认证</a></li>
          <li><a href="#">学位查询</a></li>
          <li><a href="#">学位验证</a></li>
          <li><a href="#">学位认证</a></li>
        </ul>
    </div>   
    <div class="secjiaobox">
      <div class="sectop">
       <h3> <span class="iconfont  icon-xueli"></span> <span>学籍学历学位</span></h3> 
       <p>高等教育学籍/学历/学位信息查询、验证、认证</p>
      </div>
      <ul>
        <li><a href="#">学籍查询</a></li>
        <li><a href="#">学籍验证</a></li>
        <li><a href="#">学历查询</a></li>
        <li><a href="#">学历验证</a></li>
        <li><a href="#">学历认证</a></li>
        <li><a href="#">学位查询</a></li>
        <li><a href="#">学位验证</a></li>
        <li><a href="#">学位认证</a></li>
      </ul>
  </div>   
  <div class="secjiaobox">
    <div class="sectop">
     <h3> <span class="iconfont  icon-xueli"></span> <span>学籍学历学位</span></h3> 
     <p>高等教育学籍/学历/学位信息查询、验证、认证</p>
    </div>
    <ul>
      <li><a href="#">学籍查询</a></li>
      <li><a href="#">学籍验证</a></li>
      <li><a href="#">学历查询</a></li>
      <li><a href="#">学历验证</a></li>
      <li><a href="#">学历认证</a></li>
      <li><a href="#">学位查询</a></li>
      <li><a href="#">学位验证</a></li>
      <li><a href="#">学位认证</a></li>
    </ul>
</div>   
<div class="secjiaobox">
  <div class="sectop">
   <h3> <span class="iconfont  icon-xueli"></span> <span>学籍学历学位</span></h3> 
   <p>高等教育学籍/学历/学位信息查询、验证、认证</p>
  </div>
  <ul>
    <li><a href="#">学籍查询</a></li>
    <li><a href="#">学籍验证</a></li>
    <li><a href="#">学历查询</a></li>
    <li><a href="#">学历验证</a></li>
    <li><a href="#">学历认证</a></li>
    <li><a href="#">学位查询</a></li>
    <li><a href="#">学位验证</a></li>
    <li><a href="#">学位认证</a></li>
  </ul>
</div>   
<div class="secjiaobox">
  <div class="sectop">
   <h3> <span class="iconfont  icon-xueli"></span> <span>学籍学历学位</span></h3> 
   <p>高等教育学籍/学历/学位信息查询、验证、认证</p>
  </div>
  <ul>
    <li><a href="#">学籍查询</a></li>
    <li><a href="#">学籍验证</a></li>
    <li><a href="#">学历查询</a></li>
    <li><a href="#">学历验证</a></li>
    <li><a href="#">学历认证</a></li>
    <li><a href="#">学位查询</a></li>
    <li><a href="#"></a></li>
    <li><a href="#">学位验证</a></li>
    <li><a href="#">学位认证</a></li>
  </ul>
</div>   
<div class="secjiaobox">
  <div class="sectop">
   <h3> <span class="iconfont  icon-xueli"></span> <span>学籍学历学位</span></h3> 
   <p>高等教育学籍/学历/学位信息查询、验证、认证</p>
  </div>
  <ul>
    <li><a href="#">学籍查询</a></li>
    <li><a href="#">学籍验证</a></li>
    <li><a href="#">学历查询</a></li>
    <li><a href="#">学历验证</a></li>
    <li><a href="#">学历认证</a></li>
    <li><a href="#">学位查询</a></li>
    <li><a href="#"></a></li>
    <li><a href="#">学位验证</a></li>
    <li><a href="#">学位认证</a></li>
  </ul>
</div>  
 </div>
 <!--主体字体图标 -->
 <div class="zttp">
     <div class="zttpbox">
       <h4>
         <span class="iconfont icon-zaixiankaoshi"></span>
        
         <span>在线考试系统</span>
       </h4>
       <p> 在线笔试及视频考试</p>
     </div>
     <div class="zttpbox">
      <h4>
        <span class="iconfont  icon-shipinmianshi"></span>
       
        <span>远程面试系统
          </span>
      </h4>
      <p> 高校招生远程面试</p>
    </div>
    <div class="zttpbox">
      <h4>
        <span class="iconfont icon-lunwendabian"></span>
        <span>
          毕业生论文查重
          </span>
      </h4>
      <p> 毕业论文相似性检测(本科、硕士、博士)</p>
    </div>
    <div class="zttpbox">
      <h4>
        <span class="iconfont  icon-huabanfuben"></span>
       
        <span>电子成绩单验证 </span>
      </h4>
      <p> 高校学生在校成绩单验证</p>
    </div>
    <div class="zttpbox">
      <h4>
        <span class="iconfont icon-haoyou"></span>
        <span>教育部人才服务网 </span>
      </h4>
      <p> 教育部直属单位公开招聘平台</p>
    </div>
    <div class="zttpbox">
      <h4>
        <span class="iconfont  icon-xueli1"></span>
        <span>第二学士学位招生</span>
      </h4>
      <p> 全国普通高校第二学士学位招生信息平台</p>
    </div>
    <div class="zttpbox">
      <h4>
        <span class="iconfont icon-a-zu17657"></span>
        <span>导师人才库</span>
      </h4>
      <p> 全国万名优秀创新创业导师人才库</p>
    </div>
    <div class="zttpbox">
<span class="ss"><a href="#">名单查询</a><a href="#">证书查询</a></span>
      <h4>
        <span class="iconfont icon-tutor"></span>
       
        <span>“校企行”创业就业导师</span>
      </h4>
      <p>导师人才库"“校企行”创业就业导!</p>
    </div> 
 </div>
 <div class="weixin">
 <div class="weixintop  con">
  <h2>官方微博·微信</h2>
   <span><a href="#">更多</a></span>
 </div>
   <div class="erwm">
     <div class="weixintw">
      <img src="../图片/chsi-ewm.jpg" alt="1">
      <p>学信网</p>
     </div>
     <div class="weixintw">
      <img src="../图片/chsi-ewm.jpg" alt="1">
      <p>阳光高考</p>
     </div>
     <div class="weixintw">
      <img src="../图片/chsi-ewm.jpg" alt="1">
      <p>研招网</p>
     </div>
     <div class="weixintw">
      <img src="../图片/chsi-ewm.jpg" alt="1">
      <p>国家大学生就业服务平台</p>
     </div>
     <div class="weixintw">
      <img src="../图片/chsi-ewm.jpg" alt="1">
      <p>学职平台</p>
     </div>
   </div>
 </div>
 <!-- 友情链接 -->
 <div class="youqin">
     <h2>友情链接</h2>
     <div class="jinlin">
        <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>  
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li class="list1"><a href="#"></a></li>
        </ul>
     </div>
 </div>
    </section>
    <footer>
      <ul class="list2">
        <li><a href="#">中心简介</a></li>
        <li><a href="#">网站简介</a></li>
        <li><a href="#">版权声明</a></li>
        <li><a href="#">网站宣传</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">招聘信息</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">学信十周年</a></li>
        <li><a href="#">大事记</a></li>
      </ul> 
        <ul class="list3">
        <li>
          <p> 客服热线:010-67410388</p>
          <p>主办单位:教育部学生服务与素质发展中心</p>
        </li>
        <li>
          <p>京ICP备19004913号-1</p>
          <p>客服邮箱:kefuifchsi.com.cn(将#替换为@)</p>
        </li>
        <li>
          <p>Copyrightc 2003-2022学信网All Rights Reserved</p>
          <p>京公网安备11010202009747号 </p>
        </li>
      </ul>
    </footer>
</body>
</html>

2.css

*{
    margin: 0;padding: 0;
    text-decoration: none;
    list-style: none;
}
.btn {
    position: absolute;
    top: 10px;
    right: 110px;
    transform: translate(-50%, -50%);
    appearance: none;
    outline: none;
    z-index: 22;
    display: block;
  }
  .btn::before {
    content: "";
    position: absolute;
    width: 110px;
    height: 40px;
    background: #05c46b;
    border-radius: 20px;
    box-sizing: 0 3px #000;
  }
  .btn::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-sizing: 0 3px gray;
    background: white;
    transition: all 0.3s ease-in-out;
  }
  /* 当btn 被点击触发 */
  .btn:checked::before {
    background: gray;
  }
  /* 当btn 被点击触发 */
  
  .btn:checked::after {
    left: 72px;
  }
/* 头部设置 */

header{
 width: 1180px;
 margin:0 auto ;
 display: flex;
 padding-left: 10px;
position: relative;
}
.img{
height: 100px;
width: 100px;
background: url(../图片/1.png) ;

}
.denlu{
width: 165px;
}
.wz{
    flex: 1;
    display: flex;
    flex-direction: column;
   justify-content: center;
 box-sizing: border-box;
 padding-left: 10px;
}
.wz>h3{
    margin-bottom: 13px;
}
.denlu>ul{
   display: flex;
   justify-content: space-around; 
   width: 165px;
   align-items:center;
   height: 100px;
}
.denlu li{
    margin-top: 40px;
   
}
h3>a{
    color: #2D2D2D;
}
h3+p{
    color: #8890A5;
}
.denlu li>a{
    color: #88AED7;
    padding-right: 8px;
    border-right:1px solid #E6EAF0 ;
}
.denlu li>a:hover{
    text-decoration: underline;
}
.denlu li>.last{
    border: 0px;
}
/* 导航部分 */
nav{
    width:100%;
    height: 50px;
    line-height: 50px;
    background-color: #00bac7;
    min-width: 1180px;
}
nav>ul{
    width: 1180px;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
}
nav li{
   padding:0px 12px;
}
nav a{
    color: white;
}
nav li:hover{
   background-color: #00AAB7;
}

/* 主体部分 ---背景图像部分 */
.bd-img{
    margin: 0 auto;
    width: 1180px;
   
}
div.slide {
  width:1180px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  position: relative;
}
.slide li img{
    width: 1180px;
}
li.item {
  width: 1180px;
  height: inherit;
  box-sizing: border-box;
  font-size: 4rem;
  text-align: center;
  float: left;
}
ul.list {
  width: calc(1180px* 4);
  height: inherit;
  position: relative;
  z-index: -1;
  animation: move 5s ease 1s infinite;

}
@keyframes move {
  0% {
    transform: translate(calc(0 * 1180px));
  }
  33% {
    transform: translate(calc(-1 * 1180px));
  }
  66% {
    transform: translate(calc(-2 * 1180px));
  }
  100% {
    transform: translate(calc(-3 * 1180px));
  }
}
.slide:hover .list{
  animation: none;
}
input {
  display: none;
}
.labels {
  position: absolute;
  bottom: 40px;
  /* 注意层级 */
  z-index: 1;
  width: inherit;
  justify-content: center;
  display: none;
}
.labels label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 10px;
  border: .1rem solid #fff;
  background-color: transparent;
  box-sizing: border-box;
  cursor: pointer;
}
input[id=pic1]:checked ~ .labels label[for=pic1],
input[id=pic2]:checked ~ .labels label[for=pic2],
input[id=pic3]:checked ~ .labels label[for=pic3] {
  background: rgb(255,80,0);
  border: .1rem solid #fff;
}
input[id=pic1]:checked ~ ul.list{
  transform: translate(calc(0 * 1180px));
}
input[id=pic2]:checked ~ ul.list {
  transform: translate(calc(-1 *1180px));
}
input[id=pic3]:checked ~ ul.list {
  transform: translate(calc(-2 * 1180px));
}
.slide:hover {
  /* 鼠标经过手型 */
  cursor: pointer;
}
.slide:hover .labels {
  /* 鼠标经过才展示小圆点 */
  display: flex;
}
/* <!-- 左侧文字部分 --> */
article{
  width: 1180px; 
  margin: 0 auto;
  margin-top: 30px;
}
/* 清除浮动 */
.con::after{
content: "";
display: block;
clear: both;
visibility: hidden;
width: 0px;
height: 0px;
}
.leftarticle{
display: flex;
float: left;
width: 690px;
margin: 0 auto;
flex-direction: column;
justify-content: space-around;
margin-top: 25px;
}
h4, .leftarticle>ul>li{
  padding: 10px 0px;
}
.list>ul{
  display: flex;
  width: 514px;
  justify-content: space-between;
}
li .wz1{
  color: #00BAC7;
  font-size: 20px;
}
h4>a{ 
color: #DF4840;
font-size: 20px;
}
h4+ul a{
  color:black;
}
.notpad{
  margin-right:10px ;
}
.leftarticle span:not(.wz1 , .notpad){
  border-left: 1px solid #D5D2DB;
  padding:0px 10px;
  height: 16px;
}
.list ul a:not(.lp){
 padding-left: 10px;
 border-left: 1px solid #D5D2DB;
}
.list ul a:hover, .leftarticle>ul>li span:not(.wz1):hover {
  color: #00BAD2;
}
/* <!-- 右侧文字列表部分 --> */
.rightarticle{
  width: 415px;
  float: right;
  display: flex;
  height: 280px;
  flex-direction:column ;
}
.rightarticle-header{
 margin-bottom:22px ;
 margin-top: 20px;
}
.rightarticle-header>h2{
  float: left;

}
.rightarticle-header>a{
  float: right;
  margin-top: 7px;
  color: #2A3839;
}
.rightarticle>ul{
  display: flex;
  flex-direction: column;
  width: 375px;
  height: 203px;
  justify-content:space-between;
 
}
.rightarticle>ul>li{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* 右侧小圆球设置 */
.rightarticle>ul>li::before{
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius:50% ;
  background-color: #FF9B62;
  vertical-align: middle;
}
/* 右侧超链接部分 */
.rightarticle a{
  color: black;
}
.rightarticle a:hover{
  color:#00BAD2 ;
}
/* 主体导航部分 */
.sectionnav{
width: 1180px;
margin: 0 auto;
position: relative;
margin-top: 40px;
}
.sectiontupiao{
float: left;
text-align: center;
background-color: #45BEC3;
height: 70px;
width:130px ;
border-radius: 10px;
box-sizing: border-box;
padding-top: 5px;
}
.sectiontupiao>.icon-zhifeiji{
font-size:30px;
font-weight: bold;
color: rgba(0, 0, 130, .7);
}
.icon-zhifeiji+p{
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
}
.shajiao{
    border: 10px solid transparent;
    border-left:10px solid #45BEC3 ;
    width: 0px;
    position: absolute;
    left: 130px;
    top: 50%;
    margin-top: -11px;
}
.secnavwz ul{
   width: 1050px;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
   height: 70px;
   align-items: center;
   justify-content: space-around;
   align-content: center;
   padding-left: 40px;
   padding-right: 30px;
   font-size: 14px;
}
.secnavwz ul li{
  margin-top: 5px;
  padding: 3px 0px;
}
.secnavwz li>a{
    color: black;
}
.secnavwz li>a:hover , .secjiaobox>ul>li>a:hover{
    color: #00BAC7;
}
/* 主体九宫格 */
.secjiao{
    width: 1180px;
    margin: 0 auto;
    /* background-color:#F2F4F8; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
    
}
.secjiao>.secjiaobox{
    width: 31%;
    /* background-color: white; */
}
.secjiaobox>.sectop{
    box-sizing: border-box;
    border: 15px solid #A7D6DB;
    border-bottom: transparent ;
    padding-left: 18px;
    position: relative;
   padding-top: 20px;
}
.secjiaobox p{
    font-size: 15px;
    margin-top: 10px;
}
.secjiaobox .iconfont{
font-size: 35px;
color: #26B887;
}
.secjiaobox h3>span:nth-child(2){
    position: absolute;
    top: 26px;
    left: 58px;
    color: #2A3839;
}
.secjiaobox>ul{
    display: flex;
    flex-direction:column-reverse;
    flex-wrap: wrap;
    height:100px ;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
   
}
.secjiaobox>ul>li{
    width: 33%;
    line-height: 33px;
    font-size: 18px;
}
.secjiaobox>ul>li>a{
    color: #374546;
}

/* 主体字体图标 */
.zttp{
  width: 1180px;
  /* background-color: #F2F4F8; */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  margin-top: 80px;
}
.zttpbox{
  width: 23%;
  margin-top: 40px;
  /* background-color: white; */
  padding:20px 0px;
  transition: all .5s;
  position: relative;
  box-shadow: 0px 0px 10px rgba(73, 64, 64, .4);
}
.zttpbox .iconfont{
  display: block;
  font-size: 40px;
  color: #32A8DA;
  margin-bottom: 10px;
}
.zttpbox p{
  font-size: 14px;
}
/* .zttpbox:hover{
  transform: scale(1.1);
} */
.zttpbox:hover{
  transform: translateY(-6px);
}
.zttpbox:nth-child(8)>span{
  position: absolute;
  display: block;
  width: 100%;
  box-sizing: border-box;
  transition: 0s;
  background-color: #6E7073;
  opacity: .6;
 line-height: 140px;
 text-align: center;
 top: 0px;
 left: 0px;
visibility: hidden;
}
.zttpbox:nth-child(8)>span a{
  color: white;
  font-size: 20px;
  padding-left: 10px;
}
.zttpbox:nth-child(8)>span a:hover{
  text-decoration: underline;
  color: #00BAD2;
}
.zttpbox:hover p , .zttpbox:hover h4{
  color: #32A8DA;
}
.zttpbox:hover .ss{
  visibility: visible;
}
/* 官网微信 */
.weixin{
  width:1180px;
  background-color: #F2F4F8;
  margin: 0 auto;
  margin-top: 60px;
  position: relative;
  z-index: -1;
}
.weixintop{
  position: relative;
}
.weixintop h2{
  float: left;
}
.weixintop span{
  float: right;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.erwm{
  margin-top: 30px;
  display: flex;
  width: 1180px;
  justify-content: space-around;
}
.weixintw{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  align-items: center;
  background-color: white;
  font-size: 14px;
  padding: 30px;
  position: relative;
  z-index: -1;
}
.weixintw p{
    margin-top: 10px;
}
/* 友情链接 */
.youqin{
  width: 1180px;
  margin: 0 auto;
  margin-top: 60px;
}
.jinlin>ul{
 display: flex;
 flex-wrap: wrap;
 margin-top: 20px;
}
.jinlin>ul>li{
  width: 15%;
  height: 40px;
  margin-right:19.5px;
  margin-top: 20px;
  background-color: saddlebrown;
  background: url(../图片/精灵图.png);
}
.jinlin li:nth-child(2){
  background-position: -3px;
}
footer{
    width: 100%;
    background-color: #403E3F;
    margin-top: 60px;
    position: relative;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
footer ul{
    display: flex;
    font-size: 14px;
}
.list2{
    margin-top: 20px;
}
.list2 li{
    line-height: 40px;
    text-align: center;
    padding: 0px 15px;
}
.list2 li a{
    color: white;
    
}
.list2 a:hover{
    text-decoration: underline;
    
}
.list3{
    margin-top: 30px;
    margin-bottom: 20px;
}
.list3 li{
    padding:0px 30px;
    color: white;
    line-height: 30px;
    border-right: 1px solid white;
}
.list3 li:nth-child(3){
    border: 0px;
}