布局页面完整实例流程

布局页面完整实例流程

关注
发信
关注(28)粉丝(399)

利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

Div+CSS(嵌套+盒模型)布局页面完整实例流程：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>中国石油大学</title>
 </head>
 <style>
  *{
   margin: 0px auto;
   padding: 0px;
  }
  .top-head{
   width: 100%;
   height: auto;
   border: 1px solid white;
  }
  .top{
   width: 100%;
   height: 200px;
   /*border: 1px solid black;*/
   position: absolute;
   background-image: url(./img/header_bg.png);
  }
  .logo{
   width: 100%;
   height: 200px;
   /*border: 1px solid black;*/
  }
  .head-right{
   width: 400px;
   height: 150px;
   float: right;
   /*border: 1px solid black;*/
  }
  .nav{
   width: 100%;
   height: 50px;
   /*border: 1px solid black;*/
   position: absolute;
   margin-top: -5px;
   background-color:deepskyblue;
  }
  .nav-text{
   width: 160px;
   height: 40px;
   float:left;
   list-style: none;
   margin: 15px;
   text-align: center;
   font-size: 17px;
  }
  .current:hover{
   color: #ffff00;
  }
  .IOS{
  width: 80px;
  height: 80px;
  margin:50px 10px;
  float: left;
  background-color:#8A2BE2;
  position: relative; 
  }
  .Android{
  width: 80px;
  height: 80px;
  margin:50px 10px ;
  float: left;
  background-color:#A52A2A;
  position: relative;
  }
  .QRC-1{
   width: 80px;
   height: 20px;
   /*background-color: #00FFFF;*/
   float: left;
   margin:-10px -100px ;
   position: relative;
   text-align: center;
  }
  .QRC-2{
   width: 80px;
   height: 20px;
   /*background-color:#006400;*/
   float: left;
   margin:-10px 0px ;
   position: relative;
   text-align: center;
  }
  .tel{
  width: 150px;
  height: 80px;
  margin:50px 10px ;
  float: left;
  padding-right: 20px;
  font-size: 28px;
  /*border: 1px solid white;*/
  }
  .container{
   width: 90%;
   height: 1800px;
   /*border: 1px solid black;*/
   margin: 0px auto;
  }
  .content-left{
   width: 20%;
   height: 270px;
   float: left;
   margin: 20px;
         background-color:white;
      }
      .list-left ul li{
        list-style: none;
    width: 210px;
    height: 50px;
    background-color: #CCCCCC;
    line-height: 50px;
    text-align: center;
    margin-top: 2px;
   }
   .list-left{
    padding-top: 5px;
   }
   .text-t:hover{
    color: red;
   }
      .divHead{
       padding: 10px 30px;
       border-bottom: 3px solid red;
      }
      .sider-left{
       margin: 30px;
       text-align: center;
       color: black;
       border-bottom: 2px solid white ;       
       vertical-align: middle;
      }
      a{
       text-decoration:none;
       color: black;
      }
      a:visited{
       color:black;}
        .content-middle{
   width: 54%;
   height: 270px;
   margin: 20px 280px;
         position: relative;
     }
  .content-right{
   width: 20%;
   height: 270px;
   float: right;
   margin: -290px 20px;
         background-color:white;
        }
        .username{
         text-align:left;
         width: 200px;
         height: 40px;
         line-height: 40px;
         vertical-align: middle;
         margin: 40px 20px;
         margin-bottom: 10px;
         position: relative;
       
         }
         .password{
         text-align:left;
         width: 200px;
         height: 40px;
         line-height: 40px;
         vertical-align: middle;
         margin: 10px 20px 0px;
         position: relative;
         }
        .content-1{
          width: 20%;
    height: 340px;
    float: left;
    margin: 0px 0px 0px 20px;
          background-color:white;
        }
        .content-2{
          width: 54%;
    height: 340px;
    margin: 20px 280px;
          background-color:white;
        }
        .content-3{
          width: 20%;
    height: 340px;
    float: right;
    margin: -360px 20px;
          background-color:white;
        }
        .content-4{
          width: 31%;
    height: 300px;
    float: left;
    margin: 0px 0px 0px 20px;
          background-color:white;
        }
        .content-5{
          width: 31%;
    height: 300px;
    margin: 20px 420px;
          background-color:white;
        }
        .content-6{
          width: 31%;
    height: 300px;
    float: right;
    margin: -320px 20px;
          background-color:white;
       }
        .majorBox{
          width: 87%;
    height: 200px;
    background-color: white;
    margin:0px auto;
    margin-top: 1200px;
        }
        .majorBox-link-box{
          width: 87%;
    height: 100px;
    background-color:white;
    position: relative;
   }
   .footer{
    width: 100%;
    height: 100px;
    background-color:black;
    position: relative;
    margin-top:50px;
   }
   .button{
    width: 200px;
    height: 30px;
    margin: 10px 20px 5px;
    background-color: red;
    color: white;
   }
   .forget-password{
    float: right;
    margin: 1px 20px 0px 0px;
    font-size: 12px;
    color: red;
   }
   .conten-nav-top{
    padding: 10px 30px;
        border-bottom: 3px solid red;
   }
   .conten-nav-top-1{
    padding: 10px 30px;
    border-bottom: 3px solid #00FFFF;
   }
   .jszc,.tel-1,.ad{
    font-size: 14px;
    color:#DCDCDC;
    text-align: center;
   }
   .jszc{
    padding-top:10px ;
    margin: 10px auto;
   }
   .ad{
    margin: 10px auto;
   }
   .phone{
    font-size: 14px;
    margin-left: 20px;
    margin-top: 20px;
   }
   .addr{
    font-size: 14px;
    margin-left: 20px;
    padding-top: 10px;
    line-height: 30px;
   }
   .text-contect{
    width: 440px;
    float: right;
   }
   .text-1{
    font-size: 16px;
    text-align: left;
    padding-top: 10px;
    line-height: 30px;
   }
   .text-2{
    font-size: 14px;
    text-align: left;
    line-height: 25px;
    
   }
   .box-text ul li{
    list-style: none;
    font-size: 14px;
    float: left;
    margin: 20px;
    color: black;
   }
   .majorcontect ul li {
    border:1px solid black;
    float: left;
    font-size: 14px;
    margin: 30px 40px;
    list-style: none;
   }
   .informBox ul li{
    list-style: none;
    padding: 5px 30px;
    line-height: 30px;
    font-size: 14px;
   }
   .dynamicBox{
    padding-left: 20px;
   }
   .dynamicBox ul li{
    list-style:square;
    font-size: 12px;
    line-height: 25px;
    padding-left: 30px;
   }
   .dynamicBox ul li span{
    float: right;
    padding-right: 20px;
   }
   .teachBox ul li{
    list-style: none;
    font-size: 16px;
    background-color:#DCDCDC;
    height: 50px;
    width: 220px;
    text-align: center;
    line-height: 50px;
    margin-top: 2px;
   }
   .teachBox{
    padding-top: 15px;
   }
   .learn{
    line-height: 30px;
    color: red;
    border: 1px silver #DCDCDC;
    background-color: #DCDCDC;
   }
   .newsList ul li span{
    float: right;
    padding-right: 20px;
   }
   .newsList ul li{
    list-style: square;
    float: left;
    font-size: 14px;
    height: 20px;
    width: 320px;
    line-height: 20px;
    padding-top: 10px;
    border-bottom: 1px dashed #DCDCDC;
   }
   .newsList{
    margin-left: 15px;
   }
   .text-s:hover{
    color: red;
   }
   .text-x:hover{
    color: green;
   }
   .text-p:hover{
    color: white;
    background-color: orangered;
   }
 </style>
 <body bgcolor="lavender">
  <div class="top-head">
  <div class="top">
   <div class="logo">
    <img src="./img/logo石油大.png" 
     width="380px"
     height="150px" style="margin-left: 40px;" />
    <div class="head-right">
      <div class="IOS ">
       <img src="./img/IOS.png" />
       <p></p>
      </div>
      <div class="Android ">
       <img src="./img/Android.png" />
       <p></p>
       <div class="QRC-1">IOS</div>
       <div class="QRC-2">Android</div>
      </div>
      <div class="tel">
       <div class="tel-1" style="margin-top: 10px; margin-left:10px;font-size: 16px; color: #0065b3;">学生服务热线:
       </div>
       <div class="tel-2" style="margin-top: 8px;margin-left:10px; font-size: 22px; color: #0065b3;">400-640-1953
       </div>
      </div>
    </div>
    <div class="nav">
     <ul class=" nav-content">
       <li class="nav-text">
        <a class="current" href="/portal/home.aspx">首页</a>
       </li>
       <li class="nav-text">
        <a class="current" href="http://www.upol.cn/" class="nav_list_a">学院概况</a>
       </li>
       <li class="nav-text">
       <a class="current" href="http://www.upol.cn/zhaosheng/" class="nav_list_a">招生专区</a>
       </li>
       <li class="nav-text">
        <a class="current" href="/portal/news.aspx?cateKey=jxdt" class="nav_list_a">教学教务</a>
       </li>
       <li class="nav-text">
        <a class="current" href="/portal/news.aspx?cateKey=xwzx" class="nav_list_a">新闻资讯</a>
        </li>
       <li class="nav-text">
        <a class="current" href="/portal/news.aspx?cateKey=bzzx" class="nav_list_a">帮助中心</a>
        </li>
       <li class="nav-text">
        <a class="current" href="http://xiazai.upol.cn/media/zhuanye/main1.htm" class="nav_list_a">专业设置</a>
        </li>
       </ul>
    </div>
   </div>
   <div class="container">
     <div class="content-left">
      <div class="divHead">招生专区</div>
      <div class="list-left">
      <ul>
       <li>
       <a href="/portal/newsdetail.aspx?cateKey=zxbm&newsId=ccaddahrwadels6hppuq5y46kfg" class="text-t">在线报名</a>
       </li>
       <li>
       <a href="http://www.upol.cn/new/zhaos/2017/" class="text-t">招生简章</a>
       </li>
       <li>
       <a href="http://xg.sdcen.cn:82/study/Login.aspx" class="text-t">入学考试</a>
       </li>
       <li>
       <a href="/stuManager/getAdmission.aspx?schoolId=5d938946-b99e-4572-9641-d4e44ac14e44" class="text-t">录取查询</a>
       </li>
      </ul>
      </div>
     </div>
     <div class="content-middle">
      <img src="./img/石大.png" width="655.6px" height="270px" style="margin-top:-290px ; position: relative; float: left;"/>
     </div>
     <div class="content-right">
      <div class="divHead">系统登录</div>
      <input type="text" name="username" placeholder="用户名" minlength="1" class="username"/>
       <!--<span class="textBg"></span>-->
      <input type="password" name="password" placeholder="密码" minlength="1" class="password"/>
       <!--<span class="psdBg"></span>-->
       <input type="button" class="button" name="logo" value="登录" />
       <a href="/portal/resetpwd.aspx" class="forget-password">忘记密码?</a>
     </div>
       <div style="clear: both;"></div>
     <div class="content-1">
      <div class="conten-nav-top">联系我们</div>
      <img src="img/contect.png" width="220" height="150" style="margin-left: 10px;margin-top: 15px;"  />
       <div class="phone">统一服务热线：
        <span class="tel-phone" style="color: red;">400-640-1953</span>
       </div>
       <div class="addr">地址：青岛市黄岛区长江西路66号   中国石油大学（华东）
                           </div>
     </div>
     <div class="content-2">
      <div class="conten-nav-top">新闻资讯</div>
      <img src="img/小图像.jpg" width="180px"
       height="100px" style="margin: 15px;" / >
       <div class="text-contect">
       <div class="text-1">
        教育发展中心与灵山卫街道办共...
       </div>
       <div class="text-2">  
        4月12日，教育发展中心与青岛市黄岛区灵山卫成人教育中心共同在灵山卫社区中心举行灵山卫社区教育学院揭...
       </div>
       <a href="/portal/newsdetail.aspx?cateKey=xwtp&newsId=nduxafwnubvgq18kjcffka">
        <span class="learn">了解详情</span>
       </a>
      </div>
      <div class="newsList">
       <ul>
        <li>
                 <a href="/portal/newsdetail.aspx?cateKey=xwzx&amp;newsId=lougahanmlfjegg4uezmxw" title="远程教育学院举行学习中心管理人员业务培训" target="_blank" class="text-s">远程教育学院举行学习中心管理...</a>
               <span>2017-05-17</span>
                 </li>
               <li>
                 <a href="/portal/newsdetail.aspx?cateKey=xwzx&amp;newsId=sxiwafwna6xfjbr4ql0t5w" title="学校发布2016年度继续教育质量报告" target="_blank" class="text-s">学校发布2016年度继续教育质量...</a>
               <span>2017-04-14</span>
                 </li>
               <li>
                 <a href="/portal/newsdetail.aspx?cateKey=xwzx&amp;newsId=zduxavonabhfubym08bylg" title="远程教育学院在瑞智（青岛）公司举行首届专场毕业典礼" target="_blank" class="text-s">远程教育学院在瑞智（青岛）公...</a>
               <span>2017-04-12</span>
                 </li>
               <li>
                <a href="/portal/newsdetail.aspx?cateKey=xwzx&amp;newsId=m5-4aeanqp1adclgxe6usw" title="我校举行现代远程教育2017年学士学位授予仪式" target="_blank" class="text-s">我校举行现代远程教育2017年学...</a>
                <span>2017-03-30</span>
                 </li>
               <li>
                  <a href="/portal/newsdetail.aspx?cateKey=xwzx&amp;newsId=huinatynob1czz81eqlimq" title="全国高等学历继续教育专业管理与公共信息服务平台启用培训成功举行" target="_blank" class="text-s">全国高等学历继续教育专业管理...</a>
               <span>2017-03-20</span>
                </li>
               <li>
                 <a href="/portal/newsdetail.aspx?cateKey=xwzx&amp;newsId=gwmnadmnb6tff57dldztza" title="全国高等学历继续教育专业管理与公共信息服务平台启用培训成功举行" target="_blank" class="text-s">全国高等学历继续教育专业管理...</a>
               <span>2017-03-17</span>
                 </li>
               <li>
                 <a href="/portal/newsdetail.aspx?cateKey=xwzx&amp;newsId=4lamadmnpo5mdf3439pudg" title="教育发展中心谋划部署2017年各项工作" target="_blank" class="text-s">教育发展中心谋划部署2017年各...</a>
               <span>2017-03-17</span>
                 </li>
               <li>
                 <a href="/portal/newsdetail.aspx?cateKey=xwzx&amp;newsId=872ladmnbpjh8d07wozxsa" title="国家发改委国际合作中心执行总监马兰来校洽谈交流" target="_blank" class="text-s">国家发改委国际合作中心执行总...</a>
               <span>2017-03-17</span>
                 </li>
       </ul>
      </div>
      </div>
     <div class="content-3">
      <div class="conten-nav-top">教学专区</div>
      <div class="teachBox">
       <ul>
        <li class="teachTwo">
         <a href="http://course.upol.cn/tongkao/index.asp" class="text-p">网络统考</a>
        </li>
        <li class="teachThree">
         <a href="http://xl.upol.cn/portal/news.aspx?cateKey=ycdb" class="text-p">远程答辩</a>
        </li>
        <li class="teachFour">
         <a href="http://course.upol.cn/xuewei/index.asp" class="text-p">学位辅导</a>
        </li>
        <li class="teachFour current">
         <a href="http://open.upol.cn/mooc/" class="text-p">MOOC石大</a>
        </li>
        <li class="teachOne">
         <a href="http://www.upol.cn/rms/cyxt/" class="text-p">翠园学堂</a>
        </li>
       </ul>>
        <li class="teachTwo" >
         <a href="http://course.upol.cn/tongkao/index.asp" class="text-p">网络统考</a>
        </li>
        <li class="teachThree">
         <a href="http://xl.upol.cn/portal/news.aspx?cateKey=ycdb" class="text-p">远程答辩</a>
        </li>
        <li class="teachFour">
         <a href="http://course.upol.cn/xuewei/index.asp" class="text-p">学位辅导</a>
        </li>
        <li class="teachFour current">
         <a href="http://open.upol.cn/mooc/" class="text-p">MOOC石大</a>
        </li>
        <li class="teachOne">
         <a href="http://www.upol.cn/rms/cyxt/" class="text-p">翠园学堂</a>
        </li>
       </ul>
      </div>
     </div> 
      <div style="clear: both;"></div>
     <div class="content-4">
      <div class="conten-nav-top">联系我们</div>
      <div class="informBox">
       <ul>
        <a href="/portal/newsdetail.aspx?cateKey=tzgg&amp;newsId=9g-8ak2nll5bjirui4-weq" title="2017年9月PETS3级考试辅导启动啦！">  
        <li>
         <span>07-11</span>
              2017年9月PETS3级考试辅导启动...     
        </li>
        </a> 
        <a href="/portal/newsdetail.aspx?cateKey=tzgg&amp;newsId=e70ray2n0ipbouc9qutg8q" title="2017年上半年学位外语成绩申报结果公示">    
                                 <li>
             <span>06-09</span>
             2017年上半年学位外语成绩申报...
             </li>
        </a>
        <a href="/portal/newsdetail.aspx?cateKey=tzgg&amp;newsId=ztjbai2n47pdejymeqr5-g" title="关于2017年下半年全国英语等级考试的报考通知">
         <li>    
              <span>06-09</span>
              关于2017年下半年全国英语等级...
             </li>
         </a>
         <a href="/portal/newsdetail.aspx?cateKey=tzgg&amp;newsId=od6lahyne4hl-mhsdeogww" title="关于转发2017年4月统考成绩复核工作的通知">
          <li>    
              <span>05-23</span>
              关于转发2017年4月统考成绩复核...
              </li>
         </a>
         <a href="/portal/newsdetail.aspx?cateKey=tzgg&amp;newsId=xcgvawqnbjdex1bcnomavg" title="关于2017年9月份网络统考整体流程的通知">
          <li>    
              <span>05-05</span>
              关于2017年9月份网络统考整体流...
              </li>
         </a>
         <a href="/portal/newsdetail.aspx?cateKey=tzgg&amp;newsId=yy4vawqn07leaeetyfcgvq" title="关于2017年9月网络统考跨省异地报考有关事项的通知">
          <li>    
              <span>05-05</span>
              关于2017年9月网络统考跨省异地...
              </li>
         </a>
       </ul>
      </div>
     </div>
     <div class="content-5">
      <div class="conten-nav-top">新闻资讯</div>
      <div class="dynamicBox">
       <ul>
        <li>
                   <a href="/portal/newsdetail.aspx?cateKey=jxdt&amp;newsId=zdi7ak2ns59opjokt9b4bw" title="2017年9月PETS3级考试辅导启动啦！" class="text-x">2017年9月PETS3级考试辅导启动...</a>
                  
                 <span>2017-07-11</span>
        </li>
                 <li>
                   <a href="/portal/newsdetail.aspx?cateKey=jxdt&amp;newsId=qpwsaiwn-j9ij45lt3hs2w" title="关于发布《2017年秋季学期教学运行计划》的通知" class="text-x">关于发布《2017年秋季学期教学...</a>
                  
                 <span>2017-06-01</span>
                 </li>
                 <li>
                   <a href="/portal/newsdetail.aspx?cateKey=jxdt&amp;newsId=vyuxagsnjphhhlgp-h07da" title="关于发布2017春季学期期末考试工作的通知" class="text-x">关于发布2017春季学期期末考试...</a>
                  
                 <span>2017-04-29</span>
                 </li>
                 <li>
                   <a href="/portal/newsdetail.aspx?cateKey=jxdt&amp;newsId=yi-qacqnk6nmbwd7owcisq" title="关于做好2016秋季学期课程补考工作的通知" class="text-x">关于做好2016秋季学期课程补考...</a>
                  
                 <span>2017-03-02</span>
                 </li>
                 <li>
                   <a href="/portal/newsdetail.aspx?cateKey=jxdt&amp;newsId=eqfaaccndkpj729penfdaw" title="2017年3月PETS3级考试辅导启动啦！" class="text-x">2017年3月PETS3级考试辅导启动...</a>
                
                 <span>2017-02-20</span>
                 </li>
                 <li>
                  <a href="/portal/newsdetail.aspx?cateKey=jxdt&amp;newsId=zo2jahmmdz9dobfft8jvkg" title="关于做好2016春季学期课程补考工作的通知" class="text-x">关于做好2016春季学期课程补考...</a>
                   
                  <span>2016-09-06</span>
                 </li>
                 <li>
                   <a href="/portal/newsdetail.aspx?cateKey=jxdt&amp;newsId=2yajahmm6kfcjeu8mh6zqw" title="2016年9月PETS3级考试辅导启动啦！" class="text-x">2016年9月PETS3级考试辅导启动...</a>
                   
                  <span>2016-09-06</span>
                 </li>
                 <li>
                   <a href="/portal/newsdetail.aspx?cateKey=jxdt&amp;newsId=ggejahmmm5jjm3nwz5o24q" title="2016年9月计算机统考视频辅导开始啦！" class="text-x">2016年9月计算机统考视频辅导开...</a>
                   
                  <span>2016-09-06</span>
                 </li>
                 <li>
                   <a href="/portal/newsdetail.aspx?cateKey=jxdt&amp;newsId=0hqhahmmnbrp-jfzrc33va" title="2016年4月《计算机应用基础》统考辅导答疑安排" class="text-x">2016年4月《计算机应用基础》统...</a>
                  
                 <span>2016-09-06</span>
                 </li>
       </ul>
      </div>
     </div>
     <div class="content-6">
      <div class="conten-nav-top">教学专区</div>
      <div class="dynamicBox">
       <ul>
        <li>
                  
                   <a href="/portal/newsdetail.aspx?cateKey=xywh&amp;newsId=iegdauanazzkvgvd-rvd3g" title="我校举行现代远程教育2017年学士学位授予仪式" class="text-x">我校举行现代远程教育2017年学...</a>
                  
                  <span>2017-03-30</span>
        </li>
                 <li>
                  
                   <a href="/portal/newsdetail.aspx?cateKey=xywh&amp;newsId=qcaiahmmmjviwaqhw23smq" title="我校举行现代远程教育2015年学士学位授予仪式" class="text-x">我校举行现代远程教育2015年学...</a>
                  
                 <span>2016-09-06</span>
                 </li>
                 <li>
                  
                   <a href="/portal/newsdetail.aspx?cateKey=xywh&amp;newsId=uqoiahmmvl9khpa8tupmiw" title="远程教育2015年秋季批次 毕业设计（论文）答辩评审工作顺利结束" class="text-x">远程教育2015年秋季批次 毕业设...</a>
                  
                 <span>2016-09-06</span>
                  
                 </li>
                 <li>
                  
                   <a href="/portal/newsdetail.aspx?cateKey=xywh&amp;newsId=n4kiahmmg7hh79ogys3rug" title="谋发展，促共赢 —校企合作带来招生春天" class="text-x">谋发展，促共赢 —校企合作带来...</a>
                  
                 <span>2016-09-06</span>
                  
                 </li>
                 <li>
                  
                   <a href="/portal/newsdetail.aspx?cateKey=xywh&amp;newsId=vf-iahmmrytf0b1k-wtmzg" title="远程教育学院 举办2016年新建学习中心管理人员业务培训会" class="text-x">远程教育学院 举办2016年新建学...</a>
                  
                  <span>2016-09-06</span>
                 </li>
                 <li>
                  
                   <a href="/portal/newsdetail.aspx?cateKey=xywh&amp;newsId=5uciahmmorjehona07ws6q" title="新生二次导学暨职业生涯规划专题讲座顺利举办" class="text-x">新生二次导学暨职业生涯规划专...</a>
                  
                 <span>2016-09-06</span>
                 </li>
                 <li>
                  
                   <a href="/portal/newsdetail.aspx?cateKey=xywh&amp;newsId=2r2iahmm7q5ezn9ceefpeq" title="青岛直属学习中心举办剪纸艺术传统文化讲座" class="text-x">青岛直属学习中心举办剪纸艺术...</a>
                
                 <span>2016-09-06</span>
                 </li>
                 <li>
                  
                   <a href="/portal/newsdetail.aspx?cateKey=xywh&amp;newsId=1fwhahmmwldlj6elyo6nig" title="东营直属学习中心举办“办公综合能力提升”讲座开讲" class="text-x">东营直属学习中心举办“办公综...</a>
                  
                 <span>2016-09-06</span>
                 </li>
                 <li>
                  
                   <a href="/portal/newsdetail.aspx?cateKey=xywh&amp;newsId=kduhahmmyiloc5ywn9shjw" title="东营直属学习中心“两学一做”专题教育活动讲座开讲" class="text-x">东营直属学习中心“两学一做”...</a>
                  
                 <span>2016-09-06</span>
                 </li>
       </ul>
      </div>
     </div>
     </div>   
    </div>
    <div class="majorBox">
     <div class="conten-nav-top-1">课程推荐</div>
     <div class="majorcontect">
    <ul>
     
     <li>
              <a href="http://course.upol.cn/jpk2009/wlhx/index.asp?fs=view">
              <img src="./img/major-1.jpg">
              <p>物理化学</p>
              </a>
     </li>
     
     <li>
              <a href="http://www.upol.cn/jpk2010/hjjc/">
              <img src="./img/major-2.jpg">
              <p>环境监测</p>
              </a>
     </li>
     
             <li>
               <a href="http://course.upol.cn/jpk2009/diangong/index.asp?fs=view">
               <img src="./img/major-3.jpg">
               <p>电工电子学</p>
             </a>
             </li>
             
             
              <li>
               <a href="http://www.upol.cn/jpk2012/gzdzx/index.html">
               <img src="./img/major-4.jpg" width="104px" height="74px">
               <p>构造地质学</p>
             </a>
              </li>
             
             
              <li>
               <a href="http://www.upol.cn/jpk2010/yksj/">
               <img src="./img/major-5.jpg" width="104px" height="74px">
               <p>油库设计与管理</p>
             </a>
              </li>
             
             
              <li>
               <a href="http://www.upol.cn/jpk2010/caiyou/">
               <img src="./img/major-6.gif" width="104px" height="74px">
               <p>采油工程</p>
             </a>
              </li>
             </ul>
   </div>
  </div>
  <div class="majorBox-link-box" style="margin-top: 20px;">
   <div class="conten-nav-top-1">友情链接</div>
   <div class="box-text">
    <ul>
     <li>
      <a href="http://www.upc.edu.cn">中国石油大学（华东）</a>
     </li>
     <li>
      <a href="http://www.upol.cn">中国石油大学教育发展中心</a>
     </li>
     <li>
      <a href="http://www.sdcen.cn">山东省继续教育公共服务平台</a>
     </li>
    </ul>
   </div>
  </div>
  <div class="footer">
   <div class="jszc">
               技术支持：山东和学教育科技有限公司    中国石油大学（华东）教育发展中心
            </div>
            <div class="tel-1">
             联系电话：400-640-1953    联系地址：青岛市黄岛区长江西路66号 中国石油大学（华东）
            </div>
            <div class="ad">
    鲁ICP备16034406号         
            </div>
  </div>
  </div>
 </body>
</html>

05-06 04:07
Powered by LMLPHP ©2024 布局页面完整实例流程 0.079843