布局页面完整实例流程

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″>  
        8月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&newsId=lougahanmlfjegg4uezmxw”
title=”远程军事大学召开学习为主任理人员业务培训” target=”_blank”
class=”text-s”>远程军事高校进行学习为主任理…</a>
               <span>2017-05-17</span>
                 </li>
               <li>
                 <a
href=”/portal/newsdetail.aspx?cateKey=xwzx&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&newsId=zduxavonabhfubym08bylg”
title=”远程哲高校在瑞智(波尔图)集团召开第一届专场毕业典礼”
target=”_blank”
class=”text-s”>远程海洋高校在瑞智(卢布尔雅那)公…</a>
               <span>2017-04-12</span>
                 </li>
               <li>
                <a
href=”/portal/newsdetail.aspx?cateKey=xwzx&newsId=m5-4aeanqp1adclgxe6usw”
title=”我校举办现代长途教育二零一七年大学生学位授予仪式” target=”_blank”
class=”text-s”>我校进行现代远程教育二〇一七年学…</a>
                <span>2017-03-30</span>
                 </li>
               <li>
                  <a
href=”/portal/newsdetail.aspx?cateKey=xwzx&newsId=huinatynob1czz81eqlimq”
title=”全国高等学历继续教育专业管理与公共音讯服务平台启用培训成功召开”
target=”_blank”
class=”text-s”>全国高等学历继续教育专业管理…</a>
               <span>2017-03-20</span>
                </li>
               <li>
                 <a
href=”/portal/newsdetail.aspx?cateKey=xwzx&newsId=gwmnadmnb6tff57dldztza”
title=”全国高等学历继续教育专业管理与公共消息服务平台启用培训成功召开”
target=”_blank”
class=”text-s”>全国高等学历继续教育专业管理…</a>
               <span>2017-03-17</span>
                 </li>
               <li>
                 <a
href=”/portal/newsdetail.aspx?cateKey=xwzx&newsId=4lamadmnpo5mdf3439pudg”
title=”教育发展中央策划部署二零一七年各样工作” target=”_blank”
class=”text-s”>教育发展中央策划部署二零一七年各…</a>
               <span>2017-03-17</span>
                 </li>
               <li>
                 <a
href=”/portal/newsdetail.aspx?cateKey=xwzx&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&newsId=9g-8ak2nll5bjirui4-weq”
title=”二零一七年一月PETS3级考试辅导启动啦!”>  
        <li>
         <span>07-11</span>
              二零一七年五月PETS3级考试指点启动…     
        </li>
        </a> 
        <a
href=”/portal/newsdetail.aspx?cateKey=tzgg&newsId=e70ray2n0ipbouc9qutg8q”
title=”二零一七年上半年学位外语成绩申报结果公示”>    
                                 <li>
             <span>06-09</span>
             前年上半年学位外语成绩申报…
             </li>
        </a>
        <a
href=”/portal/newsdetail.aspx?cateKey=tzgg&newsId=ztjbai2n47pdejymeqr5-g”
title=”关于前年下半年全国越南语等级考试的报考通知”>
         <li>    
              <span>06-09</span>
              关于二〇一七年下半年全国爱沙尼亚语等级…
             </li>
         </a>
         <a
href=”/portal/newsdetail.aspx?cateKey=tzgg&newsId=od6lahyne4hl-mhsdeogww”
title=”关于转会二〇一七年5月统考战表复核工作的通报”>
          <li>    
              <span>05-23</span>
              关于转会前年二月统考成绩复核…
              </li>
         </a>
         <a
href=”/portal/newsdetail.aspx?cateKey=tzgg&newsId=xcgvawqnbjdex1bcnomavg”
title=”关于二零一七年八月份网络统考全部流程的打招呼”>
          <li>    
              <span>05-05</span>
              关于二〇一七年一月份网络统考全部流…
              </li>
         </a>
         <a
href=”/portal/newsdetail.aspx?cateKey=tzgg&newsId=yy4vawqn07leaeetyfcgvq”
title=”关于二〇一七年8月网络统考跨省异地报考有关事项的关照”>
          <li>    
              <span>05-05</span>
              关于二零一七年五月网络统考跨省异地…
              </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&newsId=zdi7ak2ns59opjokt9b4bw”
title=”前年11月PETS3级考试引导启动啦!”
class=”text-x”>二〇一七年11月PETS3级考试辅导启动…</a>
                  
                 <span>2017-07-11</span>
        </li>
                 <li>
                   <a
href=”/portal/newsdetail.aspx?cateKey=jxdt&newsId=qpwsaiwn-j9ij45lt3hs2w”
title=”关于发表《二〇一七年春季学期教学运行计划》的打招呼”
class=”text-x”>关于宣布《前年春季学期教学…</a>
                  
                 <span>2017-06-01</span>
                 </li>
                 <li>
                   <a
href=”/portal/newsdetail.aspx?cateKey=jxdt&newsId=vyuxagsnjphhhlgp-h07da”
title=”关于发布2017春天学期期末考试工作的关照”
class=”text-x”>关于宣布2017青春学期期末考试…</a>
                  
                 <span>2017-04-29</span>
                 </li>
                 <li>
                   <a
href=”/portal/newsdetail.aspx?cateKey=jxdt&newsId=yi-qacqnk6nmbwd7owcisq”
title=”关于抓好2016春天学期课程补考工作的通报”
class=”text-x”>关于搞好2016夏天学期课程补考…</a>
                  
                 <span>2017-03-02</span>
                 </li>
                 <li>
                   <a
href=”/portal/newsdetail.aspx?cateKey=jxdt&newsId=eqfaaccndkpj729penfdaw”
title=”二〇一七年五月PETS3级考试辅导启动啦!”
class=”text-x”>前年六月PETS3级考试指导启动…</a>
                
                 <span>2017-02-20</span>
                 </li>
                 <li>
                  <a
href=”/portal/newsdetail.aspx?cateKey=jxdt&newsId=zo2jahmmdz9dobfft8jvkg”
title=”关于搞好2016青春学期课程补考工作的文告”
class=”text-x”>关于做好2016青春学期课程补考…</a>
                   
                  <span>2016-09-06</span>
                 </li>
                 <li>
                   <a
href=”/portal/newsdetail.aspx?cateKey=jxdt&newsId=2yajahmm6kfcjeu8mh6zqw”
title=”2016年2月PETS3级考试带领启动啦!”
class=”text-x”>2016年三月PETS3级考试指点启动…</a>
                   
                  <span>2016-09-06</span>
                 </li>
                 <li>
                   <a
href=”/portal/newsdetail.aspx?cateKey=jxdt&newsId=ggejahmmm5jjm3nwz5o24q”
title=”2016年11月总括机统考录像携带初始啦!”
class=”text-x”>2016年四月电脑统考视频带领开…</a>
                   
                  <span>2016-09-06</span>
                 </li>
                 <li>
                   <a
href=”/portal/newsdetail.aspx?cateKey=jxdt&newsId=0hqhahmmnbrp-jfzrc33va”
title=”2016年8月《总计机应用基础》统考指引答疑安排”
class=”text-x”>2016年5月《统计机应用基础》统…</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&newsId=iegdauanazzkvgvd-rvd3g”
title=”我校举办现代长途教育前年硕士学位授予仪式”
class=”text-x”>我校进行现代远程教育2017年学…</a>
                  
                  <span>2017-03-30</span>
        </li>
                 <li>
                  
                   <a
href=”/portal/newsdetail.aspx?cateKey=xywh&newsId=qcaiahmmmjviwaqhw23smq”
title=”我校举办现代远程教育2015年硕士学位授予仪式”
class=”text-x”>我校举办现代长途教育2015年学…</a>
                  
                 <span>2016-09-06</span>
                 </li>
                 <li>
                  
                   <a
href=”/portal/newsdetail.aspx?cateKey=xywh&newsId=uqoiahmmvl9khpa8tupmiw”
title=”远程教育2015年冬天批次 毕业设计(散文)答辩评审工作顺利完结”
class=”text-x”>远程教育2015年秋日批次 毕业设…</a>
                  
                 <span>2016-09-06</span>
                  
                 </li>
                 <li>
                  
                   <a
href=”/portal/newsdetail.aspx?cateKey=xywh&newsId=n4kiahmmg7hh79ogys3rug”
title=”谋发展,促互赢 —校企合作带来招生冬季”
class=”text-x”>谋发展,促双赢 —校企合作带来…</a>
                  
                 <span>2016-09-06</span>
                  
                 </li>
                 <li>
                  
                   <a
href=”/portal/newsdetail.aspx?cateKey=xywh&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&newsId=5uciahmmorjehona07ws6q”
title=”新生二次导学暨职业生涯规划专题讲座顺利设立”
class=”text-x”>新生二次导学暨职业生涯规划专…</a>
                  
                 <span>2016-09-06</span>
                 </li>
                 <li>
                  
                   <a
href=”/portal/newsdetail.aspx?cateKey=xywh&newsId=2r2iahmm7q5ezn9ceefpeq”
title=”大阪直属学习大旨设置剪纸艺术观念文化讲座”
class=”text-x”>林茨直属学习要旨开设剪纸艺术…</a>
                
                 <span>2016-09-06</span>
                 </li>
                 <li>
                  
                   <a
href=”/portal/newsdetail.aspx?cateKey=xywh&newsId=1fwhahmmwldlj6elyo6nig”
title=”宣城直属学习中央开办“办公综合力量提升”讲座开讲”
class=”text-x”>漯河直属学习主旨举行“办公综…</a>
                  
                 <span>2016-09-06</span>
                 </li>
                 <li>
                  
                   <a
href=”/portal/newsdetail.aspx?cateKey=xywh&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"&gt;
              <img src=”./img/major-1.jpg”>
              <p>物理化学</p>
              </a>
     </li>
     
     <li>
              <a href=”http://www.upol.cn/jpk2010/hjjc/"&gt;
              <img src=”./img/major-2.jpg”>
              <p>环境监测</p>
              </a>
     </li>
     
             <li>
               <a
href=”http://course.upol.cn/jpk2009/diangong/index.asp?fs=view"&gt;
               <img src=”./img/major-3.jpg”>
               <p>电工电子学</p>
             </a>
             </li>
             
             
              <li>
               <a
href=”http://www.upol.cn/jpk2012/gzdzx/index.html"&gt;
               <img src=”./img/major-4.jpg” width=”104px”
height=”74px”>
               <p>构造地质学</p>
             </a>
              </li>
             
             
              <li>
               <a href=”http://www.upol.cn/jpk2010/yksj/"&gt;
               <img src=”./img/major-5.jpg” width=”104px”
height=”74px”>
               <p>油库设计与治本</p>
             </a>
              </li>
             
             
              <li>
               <a href=”http://www.upol.cn/jpk2010/caiyou/"&gt;
               <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"&gt;中国石油大学(华东)&lt;/a&gt;
     </li>
     <li>
      <a
href=”http://www.upol.cn"&gt;中国石油大学教育发展中心&lt;/a&gt;
     </li>
     <li>
      <a
href=”http://www.sdcen.cn"&gt;山东省继续教育公共服务平台&lt;/a&gt;
     </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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注