lulu
/
web作业.html

<!DOCTYPE html>
<html>
	<head>
		<title>HTML布局</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="web作业.css">
    <link rel="stylesheet"href="./CSS/swiper-bundle.css">
    <style>
      html,
      body {
          position: flex;
          height: 100%;
      }

      body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          padding: 0;
          }

      .swiper-container {
          width: 100%;
          height: 100%;
      }

      .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;

        /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
      }
      </style> -->


   <script src="./JS/swiper-bundle.js"></script>
      <script>
          var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 30,
            slidesPerGroup: 3,
            loop: true,
            loopFillGroupWithBlank: true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          });
        </script>

        <script type="text/javascript">
          function flashBoxCtrl(o){
              this.obj=document.getElementById(o);
              //这个私有方法虽然写了，但暂时没用到
              function addListener(ele,eventName,functionBody){
                  if (ele.attachEvent){
                      ele.attachEvent("on"+eventName, functionBody);
                  }else if (ele.addEventListener){
                      ele.addEventListener("on"+eventName,functionBody, false);
                  }else{
                      return false;
                  }
              }
              //初始化
              this.init=function(){
                  var objImg=this.obj.getElementsByTagName("img");
                  var tagLength=objImg.length;
                  if (tagLength>0){
                      var oUl=document.createElement("ul");
                      oUl.setAttribute("id",o+"numTag");
                      for (var i=0;i<tagLength;i++){
                          var oLi=oUl.appendChild(document.createElement("li"));
                          if (i==0){
                              oLi.setAttribute("class","hover"); //初始化时把第一个设置为高亮
                              oLi.setAttribute("className","hover");
                          }
                          //设置标签的数字
                          oLi.appendChild(document.createTextNode((i+1)));
                      }
                      this.obj.appendChild(oUl);
                      objImg[0].style.display="block";
                      //设置标签事件
                      var oTag=this.obj.getElementsByTagName("li");
                      for (var i=0;i<oTag.length;i++){
                          var flag = 0;
                          var temp = 0;
                          var timeout=null;
                          var step = function(){
                              for (j=0;j<oTag.length;j++){
                                  oTag[j].className="";
                                  objImg[j].style.display="none";
                              }
                              this.className="hover";
                              flag = flag>=oTag.length-1?0:flag+1;
                              objImg[flag].style.display="block";
                              oTag[flag].className = "hover";
                              timeout = setTimeout(step,4000);
                          };
                          oTag[i].onmouseover=function(){
                              for (j=0;j<oTag.length;j++){
                                  oTag[j].className="";
                                  objImg[j].style.display="none";
                                  temp = j;
                              }
                              this.className="hover";
                              objImg[this.innerHTML-1].style.display="block";
                              temp = this.innerHTML-1;
                              flag = i;
                              clearInterval(timeout);
                          }
                          oTag[i].onmouseout = function(){
                              for (j=0;j<oTag.length;j++){
                                  oTag[j].className="";
                                  objImg[j].style.display="none";
                              }
                              flag = temp;
                              objImg[temp].style.display="block";
                              oTag[temp].className = "hover";
                              timeout = setTimeout(step,4000);
                          }
                          if(i==0)
                          {
                              timeout = setTimeout(step,4000);
                          }
                      }
                  }
              };
              //自动滚动的方法还没写
              this.imgRoll=function(){};
              //生成对象时自动加载init()方法以初始化对象
              this.init();
          }
          </script>


	</head>
	<body>
		<!-- 设置整个背景颜色和大小 -->
		<div id = "all" style = "background-color:white; height:900px;width:1472.8px;">


			<!-- 设置标题栏 -->
			<div id = "header" style = "background-color:#00627d;height:110px;width:1472.8px;">


        <div class="nav">

          <div class="headpic">
              <img src="IMG/1.png"alt="九江学院继续教育学院" class="headpic"  alt="继续教育学院" title="继续教育学院" href="#">
          </div>


          <div class="top-nav">
          <ul>

              <li><a href="#">首页</a>
                  <ul class="shouye">
                      <li> <a href="#">学院新闻</a> </li>
                      <li> <a href="#">学院通知</a> </li>


                  </ul>
              </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>

      <div class= "swiper-round" style = "background-color:rgb(219, 165, 191);height:341px;width:1472.8px;">
      swiper栏


      <div align="center">
        <div class="banner" style="width: 81.3%; height: 341px;">
        <div align="center" class="carousel slide" id="carousel-example-generic" data-ride="carousel">
            <style type="text/css">
        ul,li{
            padding:0;
            margin:0;
            list-style:none;}
        #flashBoxu_u2_{
            width:1200px;
            height:320px;
            border:0px solid #EEE;
            position:relative;
            margin-left: auto;
            margin-right: auto;}
        #flashBoxu_u2_ img{
            /*初始不要显示*/
            display:none;
            /*用边框来实现空位，因为margin和paading有时会引起些麻烦*/
            border:0px solid #FFF;}
        #flashBoxu_u2_ ul{
            position:absolute;
            right:7px;
            bottom:3px;
            font:9px tahoma;}
        #flashBoxu_u2_ ul li{
            display:block;
            float:left;
            width:12px;
            height:12px;
            line-height:12px;
            margin-right:3px;
            border:0px solid #999;
            background:#F0F0F0;
            text-align:center;
            cursor:pointer;}
        #flashBoxu_u2_ ul li.hover{
            border-color:red;
            background:#FFE1E1;
            color:red;}
        </style>
        <script type="text/javascript">
        function flashBoxCtrl(o){
            this.obj=document.getElementById(o);
            //这个私有方法虽然写了，但暂时没用到
            function addListener(ele,eventName,functionBody){
                if (ele.attachEvent){
                    ele.attachEvent("on"+eventName, functionBody);
                }else if (ele.addEventListener){
                    ele.addEventListener("on"+eventName,functionBody, false);
                }else{
                    return false;
                }
            }
            //初始化
            this.init=function(){
                var objImg=this.obj.getElementsByTagName("img");
                var tagLength=objImg.length;
                if (tagLength>0){
                    var oUl=document.createElement("ul");
                    oUl.setAttribute("id",o+"numTag");
                    for (var i=0;i<tagLength;i++){
                        var oLi=oUl.appendChild(document.createElement("li"));
                        if (i==0){
                            oLi.setAttribute("class","hover"); //初始化时把第一个设置为高亮
                            oLi.setAttribute("className","hover");
                        }
                        //设置标签的数字
                        oLi.appendChild(document.createTextNode((i+1)));
                    }
                    this.obj.appendChild(oUl);
                    objImg[0].style.display="block";
                    //设置标签事件
                    var oTag=this.obj.getElementsByTagName("li");
                    for (var i=0;i<oTag.length;i++){
                        var flag = 0;
                        var temp = 0;
                        var timeout=null;
                        var step = function(){
                            for (j=0;j<oTag.length;j++){
                                oTag[j].className="";
                                objImg[j].style.display="none";
                            }
                            this.className="hover";
                            flag = flag>=oTag.length-1?0:flag+1;
                            objImg[flag].style.display="block";
                            oTag[flag].className = "hover";
                            timeout = setTimeout(step,4000);
                        };
                        oTag[i].onmouseover=function(){
                            for (j=0;j<oTag.length;j++){
                                oTag[j].className="";
                                objImg[j].style.display="none";
                                temp = j;
                            }
                            this.className="hover";
                            objImg[this.innerHTML-1].style.display="block";
                            temp = this.innerHTML-1;
                            flag = i;
                            clearInterval(timeout);
                        }
                        oTag[i].onmouseout = function(){
                            for (j=0;j<oTag.length;j++){
                                oTag[j].className="";
                                objImg[j].style.display="none";
                            }
                            flag = temp;
                            objImg[temp].style.display="block";
                            oTag[temp].className = "hover";
                            timeout = setTimeout(step,4000);
                        }
                        if(i==0)
                        {
                            timeout = setTimeout(step,4000);
                        }
                    }
                }
            };
            //自动滚动的方法还没写
            this.imgRoll=function(){};
            //生成对象时自动加载init()方法以初始化对象
            this.init();
        }
        </script>
        <table cellspacing="0" cellpadding="0" border="0">
            <tr><td>
                <div id="flashBoxu_u2_"><img src="IMG/11.jpg" border="0" width="1200" height="320" />
                    <img src="IMG/12.jpg" border="0" width="1200" height="320" />
                    <img src="IMG/13.png" border="0" width="1200" height="320" />
                    <img src="IMG/14.png" border="0" width="1200" height="320" />
                    <img src="dfiles/11268/upload/20181025173902772846.jpg" border="0" width="1200" height="320" />
                    <img src="images/b_jjxy02.png" border="0" width="1200" height="320" />
                    <img src="images/b_jjxy01.png" border="0" width="1200" height="320" />
                </div
                ></td></tr></table><SCRIPT language="JavaScript">new flashBoxCtrl("flashBoxu_u2_");
                </SCRIPT>
                </div>
            </div>
        </div>

        </div>

<div class="all-part" style = "height:736.4px;width:1472.8px;display: flex;">

  <div class="all-part-center"style = "height:410px;width:1280px;display: flex;">
			<!-- 设置左侧导航栏 -->
			<div class = "left" style = "background-color:rgb(190, 241, 231);height:736.4px;width:840px;display: flex;"">

      <div class="part1">

        <div class="part1-left-nav">
            <div class="nav-zw"><a href="index/xyxw.htm" target="">学院新闻</a></div>
            <div class="nav-yw">NEWS</div>
            <div class="morem"><a href="index/xyxw.htm" target="">MORE+</a></div>
        </div>


        <div>
            <div class="part1-left-main">
                <div class="lun" style="display: inline-block;">
                    <div class="carousel_map">
                        <div class="slide-l">
                            <!--小圆点-->
                            <input type="radio" name="pic" id="pic1" checked />
                            <input type="radio" name="pic" id="pic2" />
                            <input type="radio" name="pic" id="pic3" />
                            <input type="radio" name="pic" id="pic4" />
                            <input type="radio" name="pic" id="pic5" />

                            <div class="labels">
                                <label for="pic1"></label>
                                <label for="pic2"></label>
                                <label for="pic3"></label>
                                <label for="pic4"></label>
                                <label for="pic5"></label>
                            </div>

                            <!--需要轮播的图片-->
                            <ul class="list">
                                <li class="item">
                                    <a href="###">
                                        <img src="IMG\21.jpg" style="width: 400px;height: 260px;" />
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="###">
                                        <img src="IMG\22.jpg" style=" width:400px;height: 260px;" />
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="###">
                                        <img src="IMG\23.jpg" style="width: 400px;height: 260px;" />
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="###">
                                        <img src="IMG\24.jpg" style="width: 400px;height: 260px; " />
                                    </a>
                                </li>
                                <li class="item">
                                    <a href="###">
                                        <img src="IMG\25.jpg" style="width:400px;height:260px;" />
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 左部分文字栏 -->


                    <div class="part1-left-main-ul" style="color: #000; display: inline-block;"><ul>

                        <li><a href="info/1008/2169.htm" title="继续教育学院传达学习习近平总书记考察江西重要讲话精神" class="zneirong">继续教育学院传达学习习近平总书记考察江西…</a><span>11-16</span></li>
                        <li><a href="info/1008/2159.htm" title="九江市2023年度公共机构节能管理培训班开班"class="zneirong">九江市2023年度公共机构节能管理培训班开班</a><span>11-02</span></li>
                        <li><a href="info/1008/2158.htm" title="九江市税务系统纪检业务培训班在我校结班"class="zneirong">九江市税务系统纪检业务培训班在我校结班</a><span>10-30</span></li>
                        <li><a href="info/1008/2157.htm" title="继续教育学院组织开展2024届春季毕业生论文（设计）答辩工作"class="zneirong">继续教育学院组织开展2024届春季毕业生论文…</a><span>10-30</span></li>
                        <li><a href="info/1008/2143.htm" title="继续教育学院开展“缅怀革命先烈传承红色精神”活动"class="zneirong">继续教育学院开展“缅怀革命先烈传承红色精…</a><span>09-28</span></li>
                        <li><a href="info/1008/2142.htm" title="我院赴城门山铜矿交流"class="zneirong">我院赴城门山铜矿交流</a><span>09-13</span></li>
                        <li><a href="info/1008/2141.htm" title="校领导来院走访慰问"class="zneirong">校领导来院走访慰问</a><span>09-09</span></li>
                        <li><a href="info/1008/2140.htm" title="继续教育学院召开新学期全体教职工大会"class="zneirong">继续教育学院召开新学期全体教职工大会</a><span>09-04</span></li>

                    </div>


                </div>
            </div>
        </div>


    </div>


      </div>


      <div class= "right" style = "background-color:rgb(190, 241, 231);height:410px;width:400px ;display: flex;">


        <div class="part1"style="height:298px;width:400px ;">

          <div class="part1-left-nav">
              <div class="nav-zw"><a href="index/xyxw.htm" target="">学院通知</a></div>
              <div class="nav-yw">NEWS</div>
              <div class="morem"><a href="index/xyxw.htm" target="">MORE+</a></div>
          </div>
          <div class="part1-right-main"><div class="part1-right-main-c"><div class="date"><div class="ri">30</div><div class="year-month">2023-11</div></div><div class="part1-right-main-right"><a href="info/1009/2178.htm" title="关于做好2024年秋季本科毕业生学位论文指导及答辩工作的通知">关于做好2024年秋季本科毕业生学位论文指导及答辩工作的通知</a></div></div>
          <div class="part1-right-main-c"><div class="date"><div class="ri">16</div><div class="year-month">2023-11</div></div><div class="part1-right-main-right"><a href="info/1009/2167.htm" title="关于做好高等学历继续教育2024年1月预计毕业生毕业工作的通知">关于做好高等学历继续教育2024年1月预计毕业生毕业工作的通知</a></div></div>
          <div class="part1-right-main-c"><div class="date"><div class="ri">07</div><div class="year-month">2023-10</div></div><div class="part1-right-main-right"><a href="info/1009/2149.htm" title="2023下半年九江学院成人高等教育学位课程考试考生须知（九江学院考区）">2023下半年九江学院成人高等教育学位课程考试考生须知（九江学…</a></div></div>
          <div class="part1-right-main-c"><div class="date"><div class="ri">01</div><div class="year-month">2023-07</div></div><div class="part1-right-main-right"><a href="info/1009/2121.htm" title="关于我校2023年高等学历继续教育校外教学点设置备案结果公告">关于我校2023年高等学历继续教育校外教学点设置备案结果公告</a></div></div>
          <div class="part1-right-main-c"><div class="date"><div class="ri">01</div><div class="year-month">2023-07</div></div><div class="part1-right-main-right"><a href="info/1009/2120.htm" title="九江学院2023年成人高等学历教育招生简章及招生专业">九江学院2023年成人高等学历教育招生简章及招生专业</a></div></div>
          <div class="part1-right-main-c"><div class="date"><div class="ri">17</div><div class="year-month">2023-04</div></div><div class="part1-right-main-right"><a href="info/1009/2048.htm" title="三峡大学2023年同等学力人员申请硕士学位招生简章（九江班）">三峡大学2023年同等学力人员申请硕士学位招生简章（九江班）</a></div></div>

          </div>


        </div>

        </div>

      </div>


			<!-- 设置正文 -->
			<div id = "content" style = "height:700px;width:1472.8px"">
			正文内容
			</div>


			<!-- 设置底部 -->
			<div id = "foot" style = "background-color:green;height:100px;width:1472.8px"">
			底部信息
        <footer>
          <div class="footer">
            <div class="footer_nav"><a href="index.htm" title="首页">首页</a>
        <a href="xygk1.htm" title="学院概况">学院概况</a>
        <a href="dqgz.htm" title="党群工作">党群工作</a>
        <a href="gzzd.htm" title="规章制度">规章制度</a>
        <a href="xljy.htm" title="学历教育">学历教育</a>
        <a href="pxjy.htm" title="培训教育">培训教育</a>
        <a href="lxwm.htm" title="联系我们">联系我们</a>
        <a href="https://jjxy.web2.superchutou.com/#/login" title="学习平台">学习平台</a>
        </div>
            <div class="bottom01"><!-- 版权内容请在本组件"内容配置-版权"处填写 -->
        <p>招生热线：0792-8567359;
                学校地址：江西省九江市前进东路551号;
                Copyright © 2018 九江学院继续教育学院 All Right Reserved</p></div>
        </div>

        </footer>


			</div>

		</div>
	</body>
</html>