西安工商学院官网

糯米汤圆～

已于 2024-11-08 21:48:53 修改

阅读量260

点赞数 5

文章标签： html css

于 2024-11-08 21:48:28 首次发布

本文链接：https://blog.youkuaiyun.com/2401_82745210/article/details/143635212

版权

HTML：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>西安工商学院</title>

    <link rel="stylesheet" href="../css/resert.css" />

    <link rel="stylesheet" href="../css/common.css" />

    <link rel="stylesheet" href="../css/Goun.css" />

    <link rel="stylesheet" href="../iconfont/iconfont.css" />

  </head>

  <body>

    <!-- 三部分 -->

    <!------------------------------------ 一、头部 ------------------------------------------------------->

    <div class="header">

        <div class="Goun_header">

          <!-- 头部topmost 标签 + 检索 -->

            <div class="topmost">

            <!-- 西安工商学院标签 -->

              <div class="topmost_logo">

              <!-- target="_blank"，点击标签，页面进行跳转新页面 -->

              <a href="https://www.bxait.cn/" target="_blank"></a>

            </div>

            <!-- 检索 -->

            <div class="topmost_retrieval">

              <input class="topmost_retrieval_color" type="text" name="" id="" />

              <!-- title：鼠标悬浮出现文本 -->

              <button class="topmost_retrieval_color" title="请点击，开始检索">

                检索

              </button>

            </div>

          </div>



        <div class="below">

            <!-- 9个li标签 -->

            <ul>

              <li class="leibiao" id="shouye">

                <a href="https://www.bxait.cn/" id="color">首页</a>

              </li>



              <!-- --------------------------------------------------------------- -->



              <li class="leibiao" id="li_1">

                <a href="#" id="color">学校概况</a>

                <!-- 下拉菜单 -->

                <div class="below_clearfix" id="below_clearfix_color">

                  <!-- 图片+ul 5 -->

                  <div class="below_clearfix_img">

                    <img src="../img/宿舍.png" alt="" />

                  </div>



                  <ul class="caidan">

                    <li id="caidan_1">

                      <a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm"

                        >学校简介</a

                      >

                    </li>

                    <li id="caidan">

                      <a href="https://www.bxait.cn/xygk/xzjy/A480102index_1.htm">

                        校长寄语

                      </a>

                    </li>

                    <li id="caidan">

                      <a href="https://www.bxait.cn/xygk/xyld/A480103index_1.htm"

                        >学校领导</a

                      >

                    </li>

                    <li id="caidan">

                      <a href="https://www.bxait.cn/xygk/xyfg/A480104index_1.htm"

                        >学校风光</a

                      >

                    </li>

                    <li id="caidan">

                      <a href="https://www.bxait.cn/xygk/xxbs/A480105index_1.htm"

                        >学校标识</a

                      >

                    </li>

                  </ul>

                </div>

              </li>



              <!-- -------------------------------------------------------------------------- -->



              <li class="leibiao" id="li_1">

                <a href="#" id="color">组织机构</a>

                <div class="below_clearfix">

                  <!-- 图片+ul 5 -->

                  <div class="below_clearfix_img">

                    <img src="../img/宿舍2.png" alt="" />

                  </div>



                  <ul class="caidan">

                    <li id="caidan_1 ">

                      <a href="#">党群机构 </a>

                      <div class="sjlm clearfix">

                        <ul id="sjlmfl" class="sjlmfl">

                          <li class="subnavzlmmm subnavzlmmm_li_1">

                            <a href="#" id="chuxian">纪委</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">工会</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">党委组织部</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">党委宣传部</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">党委教师工作部</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">党委学生工作部</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">校团委</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">机关党总支</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">信息工程学院党组织</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">经济与管理学院党组织</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">艺术与传媒学院党组织</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">机电工程学院党组织</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">人文学院党组织</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">通识教育学院党组织</a>

                          </li>

                        </ul>

                      </div>

                    </li>

                    <li id="caidan">

                      <a href="https://www.bxait.cn/xygk/xzjy/A480102index_1.htm">

                        行政部门

                      </a>

                      <div class="sjlm clearfix">

                        <ul id="sjlmfl" class="sjlmfl">

                          <li class="subnavzlmmm subnavzlmmm_li_1">

                            <a href="#">校长办公室</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">人事处</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">财务处</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">教务处</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">学生处</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">图文信息中心</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">发展规划处</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">招标与采购办公室</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">后勤保卫处</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">基建处</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">教学质量保障中心</a>

                          </li>

                        </ul>

                      </div>

                    </li>

                    <li id="caidan">

                      <a href="https://www.bxait.cn/xygk/xyld/A480103index_1.htm"

                        >二级学院</a

                      >

                      <div class="sjlm clearfix">

                        <ul id="sjlmfl" class="sjlmfl">

                          <li class="subnavzlmmm subnavzlmmm_li_1">

                            <a href="#">信息工程学院</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">经济与管理学院党组织</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">艺术与传媒学院</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">人文学院</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">国际教育学院</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">继续教育学院</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">创新创业学院（乡村振兴人才学院）</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">马克思主义学院</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">通识教育学院</a>

                          </li>

                          <li class="subnavzlmmm">

                            <a href="#">机电工程学院</a>

                          </li>

                        </ul>

                      </div>

                    </li>

                  </ul>

                </div>

              </li>

              <li class="leibiao" id="li_1">

                <a href="#" id="color">教育教学</a>

                <div class="below_clearfix">

                  <!-- 图片+ul 5 -->

                  <div class="below_clearfix_img">

                    <img src="../img/宿舍2.png" alt="" />

                  </div>



                  <ul class="caidan">

                    <li id="caidan_1">

                      <a href="#">本科教育 </a>

                    </li>

                    <li id="caidan">

                      <a href="#">职业教育与继续教育</a>

                    </li>

                    <li id="caidan">

                      <a href="#">检验与科研</a>

                    </li>

                    <li id="caidan">

                      <a href="#">教学动态</a>

                    </li>

                  </ul>

                </div>

              </li>

              <li class="leibiao" id="li_1">

                <a href="#" id="color">国际教育</a>

                <div class="below_clearfix">

                  <!-- 图片+ul 5 -->

                  <div class="below_clearfix_img">

                    <img src="../img/宿舍2.png" alt="" />

                  </div>



                  <ul class="caidan">

                    <li id="caidan_1">

                      <a href="https://gjjyxy.bxait.cn/">国际教育学院 </a>

                    </li>

                    <li id="caidan">

                      <a href="https://gjjyxy.bxait.cn/bzszt/A5305index_1.htm">

                        专（本）硕直通

                      </a>

                    </li>

                  </ul>

                </div>

              </li>

              <li class="leibiao" id="li_1">

                <a href="#" id="color">学生服务</a>

                <div class="below_clearfix below_clearfix_teshu">

                  <!-- 图片+ul 5 -->

                  <div class="below_clearfix_img">

                    <img src="../img/宿舍2.png" alt="" />

                  </div>



                  <ul class="caidan">

                    <li id="caidan_1">

                      <a href="https://xsfw.bxait.cn/xgdt/B8901index_1.htm"

                        >学工动态

                      </a>

                    </li>

                    <li id="caidan">

                      <a

                        href="https://xsfw.bxait.cn/xsh/xshjj/B890201index_1.htm"

                      >

                        学生会

                      </a>

                    </li>

                    <li id="caidan">

                      <a

                        href="https://xsfw.bxait.cn/xszz/dxszzglzxjj/B890301index_1.htm"

                        >学生资助</a

                      >

                    </li>

                    <li id="caidan">

                      <a

                        href="https://xsfw.bxait.cn/xljk/dxsxljkjyzxjj/B890401index_1.htm"

                        >心理健康</a

                      >

                    </li>

                    <li id="caidan">

                      <a href="https://xsfw.bxait.cn/zlxz/B8905index_1.htm"

                        >资料下载</a

                      >

                    </li>

                  </ul>

                </div>

              </li>

              <li class="leibiao" id="li_1">

                <a href="#" id="color">招生就业</a>

                <div class="below_clearfix below_clearfix_teshu">

                  <!-- 图片+ul 5 -->

                  <div class="below_clearfix_img">

                    <img src="../img/宿舍2.png" alt="" />

                  </div>



                  <ul class="caidan">

                    <li id="caidan_1">

                      <a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm"

                        >党群机构

                      </a>

                    </li>

                    <li id="caidan">

                      <a href="http://zs.bxait.cn/"> 招生网 </a>

                    </li>

                    <li id="caidan">

                      <a href="http://bxait.cn.bysjy.com.cn/">就业网</a>

                    </li>

                  </ul>

                </div>

              </li>

              <li class="leibiao" id="li_1">

                <a href="#" id="color">人才招聘</a>

                <div class="below_clearfix below_clearfix_teshu">

                  <!-- 图片+ul 5 -->

                  <div class="below_clearfix_img">

                    <img src="../img/宿舍2.png" alt="" />

                  </div>



                  <ul class="caidan">

                    <li id="caidan_1">

                      <a href="https://rsc.bxait.cn/rczp/B2204index_1.htm"

                        >招聘公告

                      </a>

                    </li>

                    <li id="caidan">

                      <a href="https://rsc.bxait.cn/rczp/lxfs/B220402index_1.htm">

                        联系我们

                      </a>

                    </li>

                  </ul>

                </div>

              </li>

              <li class="leibiao" id="li_1">

                <a href="https://xyh.bxait.cn/" id="color">校友会</a>

              </li>

            </ul>

          </div>

          <div class="clearfix"></div>

        </div>

      </div>

    </div>

  </div>

    <!------------------------------------ 二、身体 ------------------------------------------------------->

    <class="Goun_body">

        <div class="Goun_body_1">

          <!-- <a href="https://www.bxait.cn/lbt/webinfo/2024/03/1712606718408373.htm">

          <img src="../img/body1.jpg" alt="" />

        </a> -->

          <!-- 图 ul>li -->

          <ul>

            <li>

              <a

                href="https://www.bxait.cn/lbt/webinfo/2024/03/1712606718408373.htm"

              >

                <img src="../img/body1.jpg" alt="" />

              </a>

            </li>

            <!-- <li>

            <a

              href="https://www.bxait.cn/lbt/webinfo/2024/03/1712606718408373.htm"

            >

              <img src="../img/图二.png" alt="" />

            </a>

          </li> -->

            <!-- <li>

            <a

              href="https://www.bxait.cn/lbt/webinfo/2024/03/1712606718408373.htm"

            >

              <img src="../img/图三.jpg" alt="" />

            </a>

          </li> -->

          </ul>





          <!-- 箭头 -->

          <!-- 上一张 prew -->

          <a href="#" class="prew">

            <!-- <i class="iconfont"></i> -->

          </a>

          <!-- 下一张 next -->

          <a href="#" class="next">

            <i class="iconfont"></i>

          </a>





          <!-- 圆点 -->

          <ol>

            <li></li>

            <li class="active"></li>

            <li></li>

          </ol>

        </div>








        <!-- Goun_body_2 -->

        <!-- 新闻动态 -->

          <div class="Goun_body_2">

            <!-- 板心居中 -->

            <div class="wrapper_body">

              <div class="Goun_body_2_newsbg">

                <div class="title_level">

                  <div class="title_h3">

                    <img src="https://www.bxait.cn/lib/template/static/picture/title5.png" alt="">

                  </div>

                  <div class="subtitle" style="color: #fff;">

                    忆往昔，桃李不言，自有风雨话沧桑；看今朝，鹿鸣于野，更续诗篇誉三秦!

                  </div>

                </div>

                <div class="Goun_body_2_newCon_box">

                  <!-- 左 -->

                  <div class="Goun_body_2_newCon_left">

                    <div class="ncl_btm">

                    </div>

                  </div>



                  <!-- 右 -->

                  <div class="Goun_body_2_newCon_right">

                    <div class="blog_list fl l">

                      <!-- 列表 -->

                       <ul>

                        <li>

                          <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1732680447660085.htm" target="_self">

                            <span class="blog_Rmore">

                              <b>【主题论坛】AI+赋能中国建造 焕新升级...

                              </b>

                              <span>第四届全国智能建造学科建设与工程实践发展论坛在陕西西安成功举办，本届论坛由住建部新型建筑工业化集成建造工程技术研究中心、中国建设教育协会主办。</span>

                            </span>

                            <span class="blog_Rtim">

                              <b>07</b>

                              <em>2024-11</em>

                            </span>

                          </a>

                        </li>

                       

                        <li>

                          <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1732680447018383.htm" target="_self">

                            <span class="blog_Rmore">

                              <b>

                                【社会公益】学社融合情暖鹿祥 —信息工程...

                              </b>

                              <span>近日，信息工程学院组织了一批优秀学生代表，前往鹿祥社区开展了一场别开生面的公益活动——“学社融合送温暖，社区卫生死角大清扫”。此次活动旨在通过实际行动践行社会主义核心价值观，推动学院与社区的深度融合，同时提高社区居民的生活环境质量。</span>

                            </span>

                            <span class="blog_Rtim">

                              <b>07</b>

                              <em>2024-11</em>

                            </span>

                          </a>

                        </li>

                       </ul>

                    </div>

                    <div class="blog_list fr r">

                      <ul>

                        <li>

                          <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1732680446756603.htm" target="_blank">

                            <span class="blog_Rtime">

                              <b>07</b>

                              <em>2024-11</em>

                            </span>

                            <span class="blog_Rmore ">

                              <b>【主题会议】笃志笃行强师德，勤教善育正师...</b>

                              <span></span>

                            </span>

                          </a>

                        </li>

                        <li>

                          <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1732680446267389.htm" target="_blank">

                            <span class="blog_Rtime">

                              <b>07</b>

                              <em>2024-11</em>

                            </span>

                            <span class="blog_Rmore ">

                              <b>【系列活动】研路拼搏，昂扬奋斗 | 机电...</b>

                              <span></span>

                            </span>

                          </a>

                        </li>

                        <li>

                          <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1732680445769722.htm" target="_blank">

                            <span class="blog_Rtime">

                              <b>07</b>

                              <em>2024-11</em>

                            </span>

                            <span class="blog_Rmore ">

                              <b>【交流座谈】倾听心声，助力成长||人文学院...</b>

                              <span></span>

                            </span>

                          </a>

                        </li>

                      </ul>

                    </div>

                  </div>

                </div>



              </div>

            </div>

          </div>

        </div>

        <!-- <div> -->

    <!------------------------------------ 三、尾部 ------------------------------------------------------->

  <div class="footer">

      <div class="wrapper">

        <!-- 标识 + 右边 -->

        <div class="footer_top">

          <div class="logoleft">

            <img src="../img/logo.png" alt="" />

          </div>

          <div class="yqljright">

            <h2>友情链接</h2>

            <a href="http://www.moe.gov.cn/" target="_blank"

              >中华人民共和国教育部</a

            >

            <a href="http://jyt.shaanxi.gov.cn/" target="_blank"

              >陕西省教育厅</a

            >

            <a href="http://www.xinhuanet.com/" target="_blank">新华网</a>

            <a href="https://www.bxait.cn/szpt" target="_blank"

              >数字化实习实训平台</a

            >

          </div>

          <div class="lxfsright">

            <h2>地址</h2>

            <div>陕西省西安市高陵区鹿祥路1235号</div>

            <h2>电话</h2>

            <div>029-63609668</div>

            <h2>邮编</h2>

            <div>710200</div>

          </div>

        </div>

      </div>

      <!-- 备号 -->

      <div class="footer_buttom">

        <div class="wrapper wrapper1">

          <div class="footer_buttom_bh">

            <a href="https://beian.miit.gov.cn/">陕ICP备2024023100号</a>

            <a href="https://beian.mps.gov.cn/#/query/webSearch"

              >陕公网安备61012602000071号</a

            >

          </div>

        </div>

      </div>

  </div>

  </body>

</html>

CSS：

1. Goun.css

div.header {
    margin: 0 auto;
    width: 1550px;
    height: 170px;
}

div.Goun_header {
    position: fixed;
    width: 1550px;
    /* top: 0;
    right: 0;
    width: 1600px;  */ 
    /* border: 1px solid rgb(1, 0, 2); */
    /* height: 170px; */
}

/* 设置背景颜色 */
div.Goun_header > div.topmost {
    border: 1px solid  #fff;
    height: 70px;
    background-color: #fff;
}


/* 对西安工商学院logo进行美化 */
div.Goun_header > div.topmost > div.topmost_logo > a {
    float: left;
    width: 400px;
    height: 70px;
    /* border: 1px solid rgb(198, 8, 8); */
    margin-left: 70px;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    
}

div.Goun_header > div.topmost > div.topmost_retrieval {
    /* border: 1px solid black; */
    /* margin-left: 1250px;
    margin-top: 22px; */
    float: right;
    margin-top: 22px;
    margin-right:50px;
}

/* 搜索框，设置input边框大小以及颜色，在resert.css文件中，默认消除边框样式 */
div.Goun_header > div.topmost > div.topmost_retrieval > input{
    border-radius: 3px;
    border: 1.5px solid black;
    width: 150px;
    height: 18px;
}

/* 检索，实现鼠标放button按钮上显示小手形状 */
div.Goun_header > div.topmost > div.topmost_retrieval > button {
    cursor: pointer;
}


.topmost_retrieval_color {
    border: 1px solid black;
}

/* 头部的buttom */
div.Goun_header > div.below {
    /* border: 1px solid rgb(20, 5, 62); */
    height: 85px;
    background-color: #a7232d;
}


div.Goun_header  > div.below > ul {
    /* border: 1px solid black; */
    height: 85px;
    width: 1200px;
    /* 板心居中 */
    margin: 0 auto;
    /* background-color: rgb(207, 213, 20); */
}


.leibiao {
    /* border: 1px solid black; */
    height: 85px;
    width: 70px;
    float: left;
    margin-left: 55px;
    /* 文字居中 */
    text-align: center;
    line-height: 85px;
    font-size: 16px;
    /* transform: all ease 2s; */
}

.leibiao > a {
    display: block;
    height: 85px;
    width: 70px;
}

div.Goun_header > div.below > ul > li > a {
    color: #fff;
}

div.Goun_header > div.below > ul > li > a:hover {
    color: #a7323d;
    background-color: #fff;
}



/* 下拉菜单 */
.below_clearfix {
    width: 320px;
    height: 180px;
    border: 1px solid rgb(242, 244, 242);
    background-color: #fff;
    display: none;
}

#li_1:hover .below_clearfix {
    display: block;
}

div.Goun_header > div.below > ul > li.leibiao:hover div.Goun_header > div.below > ul > li > a{
    background: #fff;
}


/* ----------------------------------------- */
ul.caidan {
    height: 180px;
    width: 170px;
    margin-left: 150px;
    /* background-color: aqua; */
    
}

ul.caidan > li {
    /* border: 1px solid red; */
    text-align: left;
    height: 20px;
    margin-top: 3px;
    list-style-type: disc;
    color: #a7323d;
    margin-left: 20px;
    line-height: 60px;
    font-size: 14px;
}





/* ------------------------------------------------ */

.below_clearfix_img {
    float: left;
    margin-top: 11px;
    margin-left: 10px;
    border: 0;
}






#shouye {
    width: 60px;
}

.below_clearfix_teshu {
    float: right;
}


/* ----------------------------------------测  试--------------- */
.subnavzlmmm {
    position: relative;
}

#sjlmfl > li {
    list-style-type: none;
}



/* --------------------------------------------------------------- */
.sjlm {
    width: 200px;
    height: 480px;
    margin-left: 150px;
    /* margin-top: -70px; */
    margin-top: -64px;
    position: absolute;
    /* border: 1px solid rebeccapurple; */
    background-color: #fff;
    border: 1px solid rgb(242, 244, 242);
    border-left: none;
    display: none;
}


div.sjlm > ul > li {
    /* padding: 0; */
    /* display: block; */
    /* border: 1px solid rgb(10, 2, 17); */
    height: 25px;
    line-height: 35px;
    margin-bottom: 5px;
    margin-left: 20px;
    margin-right: 20px;
}

div.sjlm > ul > li.subnavzlmmm_li_1{
    margin-top: 20px;
}

/* ul.sjlmfl:hover  .sjlm {
    display: block;
} */

div.sjlm > ul > li.subnavzlmmm_li_1 > a {
    display:block;
   
}

#chuxian:hover .subnavzlmmm{
    display: block;
}

div.Goun_body_1 {
    /* 多余部分隐藏 */
    overflow: hidden;
    /* position: relative; */
    width: 100%;
    margin: 0 auto;
    margin-top: -14px;
    width: 2560px;
    height: 1440px;
}

div.Goun_body_1 > ul {
    /* display: flex; */
}

div.Goun_body_1 > ul > li > a > img {
    display: block;
    /* width: 100%; */
    /* height: 100%; */
    /* vertical-align: middle; */
    object-fit: cover;
    margin: 0 auto;
}


/* 箭头 */
div.Goun_body_1 > a.prew,
div.Goun_body_1 > a.next {
    /* display: block; */
    /* 父相子绝 */
    position: absolute;
    top: 80%;
    transform: translateY(-50%);
    width: 76px;
    height: 76px;
    background-color: #000;
    border-radius: 50%;
    /* 透明度 */
    opacity: 0.3;
    /* 隐藏 */
    /* display: none; */
}

/* 鼠标划到Goun_body_1区域，箭头要显示  */
.Goun_body_1:hover  .prew,
.Goun_body_1:hover  .next {
    /* display: block; */
}

div.Goun_body_1 > a.prew {
    left: 150px;
    background-image: url(../img/prev.png);
}

div.Goun_body_1 > a.next {
    right: 150px;
    background-image: url(../img/next.png);
}


/* 原点 */
div.Goun_body_1 > ol {
    /* 父相子绝 */
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: rotateX(-50%);
    height: 15px;
    /* background-color: rgba(255, 255, 255,0.3); */
    display: flex;
    /* border-radius: 10px; */

}

div.Goun_body_1 > ol > li {
    width: 11.6px;
    height: 11.6px;
    /* background-color: #fcfafa; */
    border-radius:50%;
    margin: 10px;
    border: 1px solid rgb(242, 244, 242);
    /* 鼠标变成小手 */
    cursor: pointer;

}

/* 白色的 li */
div.Goun_body_1 > ol > li.active {
    background-color: #fff;
}



/* ----------Goun_body_2 ------------新闻动态 ----------------------------------------------- */
.Goun_body_2 {
    height: 819px;
    /* 多余部分隐藏 */
    overflow: hidden;
    /* background-color: aqua; */
    /* 添加背景图 */
}

.Goun_body_2_newsbg {
    height: 819px;
    background-color: azure;
    background: url(../img/Goun_body_2_newsbg.png) center no-repeat;
}

.Goun_body_2 .Goun_body_2_newsbg .title_level {
    /* background-color:#6c6ee2; */
    /* 内边距： 上边 | 左边右边 | 下边 */
    padding: 60px 0 40px;
    /* 板心居中 */
    width: 1250px;
    height: 50px;
    margin: 0 auto;
    /* 文字居中 */
    text-align: center;
}

.Goun_body_2 .Goun_body_2_newsbg .title_level .title_h3 img {
    width: 192px;
    height: 50px;
    /* 将img 标签变为行内标签，这样文字居中效果才能出现 */
    display: inline;
}

div {
    display: block;
    unicode-bidi: isolate;
}

.Goun_body_2 .Goun_body_2_newsbg .title_level .subtitle {
    font-size: 14px;
    margin-top: 14px;
}

.Goun_body_2_newCon_box {
    width: 1250px;
    height: 470px;
    /* background-color: aliceblue; */
    /* 板心居中 */
    margin: 0 auto;
    display: flex;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_left {
    width: 368px;
    height: 470px;
    /* background-color: aqua; */
    margin-right: 25px;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_left .ncl_btm {
    width: 368px;
    height: 470px;
    /* 绝对定位 */
    position: relative;
    /* 溢出隐藏 */
    overflow: hidden;
}

/* 右 */
.Goun_body_2_newCon_box .Goun_body_2_newCon_right {
    width: 826px;
    height: 470px;
    /* background-color: #d76969; */
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_right .blog_list {
   width: 48%;
   /* background-color: antiquewhite; */
} 


.Goun_body_2_newCon_box .Goun_body_2_newCon_right  .l {
    margin-right: 0.5rem;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_right  .fl  {
   float: left;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_right .fl ul li {
    display: block;
    /* position: relative; */
    height: 231px;
    background-color: #fff;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

/* 鼠标悬浮响应 */
.Goun_body_2_newCon_box .Goun_body_2_newCon_right .fl ul  li:hover {
    color: #fff;
    background-color: #f6a5ac;
}



.Goun_body_2_newCon_box .Goun_body_2_newCon_right .fl ul li a {
    display: block;
    /* 文字占比 */
    width: 90%;
    /* 文字居中 */
    margin: 0 auto;
    overflow: hidden;
    color: #666;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_right .fl ul li a span.blog_Rmore {
    margin-top: 30px;
    overflow: hidden;
    display: block;
    border-bottom: 1px solid #eee;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_right .fl ul li a span b {
    color: #222;
    display: block;
    height: auto;
    line-height: 22px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_right .fl ul li a span.blog_Rmore span {
    line-height: 20px;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 26px;
    font-size: 14px;
    color: #666;
    word-wrap: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_right .fl ul li a span.blog_Rtim {
    height: 66px;
    overflow: hidden;
    margin-top: 19px;
    text-align: left;
    background: url(../img/i_bg5.png) 98% center no-repeat;
    display: block;
    transition: all .3s;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_right .fl ul li a span.blog_Rtim b{
    display: block;
    color: #cf4342;
    font-size: 26px;
    height: 37px;
    line-height: 37px;
    font-weight: 400;
    letter-spacing: 1px;
}

.Goun_body_2_newCon_box .Goun_body_2_newCon_right .fl ul li a span.blog_Rtim em {
    font-style: normal;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #cf4342;
}

/* 右 */
.Goun_body_2_newCon_right .fr {
    float: right;
}

.Goun_body_2_newCon_right .fr li {
    display: block;
    /* position: relative; */
    height: 151px;
    background-color: #fff;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all .3s;
}

.Goun_body_2_newCon_right .fr li a{
    display: block;
    margin: 0 auto;
    padding-top: 20px;
    width: 90%;
    max-width: 368px;
    overflow: hidden;
    color: #666;
}

.Goun_body_2_newCon_right .fr li span.blog_Rtime {
    height: 95px;
    width: 66px;
    float: left;
    overflow: hidden;
    margin-top: 18px;
    text-align: left;
    margin-left: 30px;
}

.blog_list.r .blog_Rtime b {
    display: block;
    color: #cf4342;
    font-size: 26px;
    height: 50px;
    line-height: 50px;
    font-weight: 400;
    letter-spacing: 1px;
    background: url(../img/i_bg6.png) left bottom no-repeat;
}

.blog_list.r .blog_Rtime em {
    font-style: normal;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    color: #cf4342;
}


.blog_list.r .blog_Rmore {
    float: right;
    height: 114px;
    border-left: 1px solid #f5f5f5;
    padding-left: 25px;
    width: 234px;
    padding-top: 14px;
    overflow: hidden;
}

.blog_list.r .blog_Rmore b {
    display: -webkit-box;
    color: #222;
    line-height: 22px;
    font-size: 16px;
    font-weight: 600;
    max-width: 225px;
    overflow: hidden;
}

.blog_list.r .blog_Rmore span {
    display: block;
    line-height: 38px;
    height: 38px;
    overflow: hidden;
    margin-top: 15px;
    background: url(../img/i_bg5.png) left center no-repeat;
    transition: all .3s;
}

2. common.css

/* 板心居中 */
.wrapper {
    margin: 0 auto;
    width: 1100px;
}

/* 身体板心居中 */
.wrapper_body {
    margin: 0 auto;
    width: 1550px;
}


/* ----------------- 底部布局 ------------------------ */
/* 通栏 */
.footer {
    height: 370px;
    background-color: #E7E7E9;
}

.footer .wrapper .footer_top {
    height: 280px;
    /* background-color: #beefec; */
    display: flex;
    /* 平分剩余空间 */
    justify-content: space-around;
}


.footer .wrapper .footer_top .logoleft {
    /* margin-right: 100px; */
    margin: auto 0;
}

.footer .wrapper .footer_top .yqljright {
    margin: auto 0;
}

.footer .wrapper .footer_top .yqljright a {
    display: block;
    margin-top: 5px;
    color: #666666;
    font-size: 16px;
}

.footer .wrapper .footer_top .yqljright h2,
.footer .wrapper .footer_top .lxfsright h2 {
    font-weight: 500;
}


.footer .wrapper .footer_top .lxfsright {
    margin: auto 0;
}

.footer .wrapper .footer_top .lxfsright div {
    margin: 5px 0;
    color: #666666;
    font-size: 16px;
}

.footer  .footer_buttom {
    background-color: #323232;
}

.wrapper1 {
    margin: 0 auto;
    width: 500px;
}

.footer  .footer_buttom .wrapper {
    height:90px ;
    /* background-color: bisque; */
}

.footer  .footer_buttom .wrapper .footer_buttom_bh  {
    /* background-color: #fff; */
    height: 90px;
    /* padding: 20px; */
    display: flex;
    justify-content: space-around
}

.footer  .footer_buttom .wrapper .footer_buttom_bh a {
    color: #fff;
    display: block;
    font-size: 14px;
    margin-right: 30px;
    margin-top: auto;
    margin-bottom: auto;
}

3. resert.css

@charset 'utf-8';
/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
    margin: 0;
    padding: 0;
    /* font-size: 14px; */
    /* 不会撑大盒子 */
    box-sizing: border-box;
}

ul,ol {
    list-style: none; 
} 

img {
    /* 底部留白 */
    display: block;
	border:0;
}

b,strong {
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    /* 父元素字号的百分比 */
    /* font-size: 100%; */
    /* font-weight: normal; */
}

i,em {
    /* 不倾斜 */
    font-style: normal;
}

u,ins,s,del {
    /* 去掉中划线和下划线 */
    text-decoration: none;
}

table {
    border: 1px solid #999;
    /* 相当于是cellspacing */
    border-spacing: 0;
    /* 1px边框 */
    border-collapse: collapse;
}

td,th {
    border: 1px solid #999;
}

input,button {
    /* 去掉轮廓线 */
    /* outline: none; */
    border:none;
}

/* 风格设置 */
body {
    font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    color: #333;
}

a {
    text-decoration: none; /* 去除默认的下划线 */
	outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */
    text-decoration: none;
    color: #333;
}

a:hover {
    color:#DD302D;
    text-decoration: none;
}

.leftfix {
    float: left;
}

.rightfix {
    float: right;
}


/* 清除浮动 */
/* 双伪元素法 */
/* before 解决外边距塌陷问题 */
.clearfix::before
.clearfix::after {
    content: "";
    /* 表格标签 */
    display: table;
}

/* after 清除浮动 */
.clearfix::after {
    clear: both;
}

结果如下：