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>

利用Div+CSS(嵌套+盒模型)布局页面完整实例流程的更多相关文章

  1. 前端设计的常用属性，CSS的盒模型，页面布局的利器

    在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...

  2. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  3. 基础选择器,长度与颜色,标签display,嵌套关系,盒模型,盒模型布局

    css基础选择器 # *(统配选择器): 控制html, body,以及body下所有用于显示的标签 # div(标签选择器): 该标签名对应的所有该标签 # .(class选择器)(eg: .div ...

  4. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  5. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  6. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  7. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  8. python 46 盒模型 与盒模型布局

    一:盒模型 1.  盒模型的概念 广义盒模型:文档中所有功能性及内容性标签,及文档中显示性标签 侠义盒模型:文档中以块级形式存在的标签(块级标签拥有盒模型100%特性且最常用) 盒模型组成:margi ...

  9. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

随机推荐

  1. Iterator、for..of，for...in和自定义遍历器**

    Iterator.for..of,for...in和自定义遍历器 Iterator: var arr = [1,2,3,4,5]; var ite = arr[Symbol.iterator](); ...

  2. 【TensorFlow入门完全指南】模型篇·逻辑斯蒂回归模型

    import库,加载mnist数据集. 设置学习率,迭代次数,batch并行计算数量,以及log显示. 这里设置了占位符,输入是batch * 784的矩阵,由于是并行计算,所以None实际上代表并行 ...

  3. Akka（14）： 持久化模式：PersistentActor

    Akka程序的特点之一就是高弹性或者强韧性(resilient)的,因为Actor具有自我修复的能力.当Actor模式的程序出现中断情况如:系统崩溃.人为终结等,系统在重启后有关Actor可以恢复之前 ...

  4. Java 9 揭秘（13. Collection API 更新）

    Tips 做一个终身学习的人. 在本章中,主要介绍以下内容: 在JDK 9之前如何创建了不可变的list,set和map以及使用它们的问题. 如何使用JDK 9中的List接口的of()静态工厂方法创 ...

  5. 51nod_1040:最大公约数之和（数论）

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1040 给出一个n,求1-n这n个数,同n的最大公约数的和. ...

  6. 个人作业2--英语学习APP案例分析

    1.下载APP并使用,上手体验 个人很喜欢这种风格,画面简洁,排版精细,尤其是联想词的界面,很惊喜.但是很多链接比如精选文章点进去之后的UI设计并不理想,感觉只是一个网页而已.并且我不能够保存或者收藏 ...

  7. Linux下Tomcat8.0.44安装使用Apr

    听说Apr可以提高tomcat很多的性能,配置具体如下1.安装apr 1.5.2 [root@ecs-3c46 ]# cd /usr/local/src [root@ecs-3c46 src]# wg ...

  8. centos中安装mysql

    一.首先输入指令 rpm -qa|grep mysql 检查操作系统中是否已经安装了MySQL 可以通过 yum list | grep mysql 命令来查看yum上提供的mysql数据库可下载的版 ...

  9. HDU 6033 Add More Zero (数学)

    Description There is a youngster known for amateur propositions concerning several mathematical hard ...

  10. POJ2236 Wireless Network 并查集简单应用

    Description An earthquake takes place in Southeast Asia. The ACM (Asia Cooperated Medical team) have ...