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. ASP.NET Core Web API 最小化项目

    ASP.NET Core中默认的ASP.NET Core 模板中有Web API 模板可以创建Web API项目. 有时,只需要创建一个API,不需要关心Razor,本地化或XML序列化.通过删除无用 ...

  2. RabbitMQ安装|使用|概念|Golang开发

    搬砖的陈大师版权所有,转载请注明:http://www.lenggirl.com/tool/RabbitMQ.html 手册:http://www.rabbitmq.com/getstarted.ht ...

  3. 【干货】Chrome插件(扩展)开发全攻略(不点进来看看你肯定后悔)

    写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github ...

  4. 跨域访问之CORS

    CORS:定义 2014年1月16日,W3C的Web应用工作组(Web Applications Working Group)和Web应用安全工作组(Web AppSec)联合发布了跨源资源共享(Cr ...

  5. python selenium自动化之-环境搭建

    安装python和pip上述文章有介绍,在这里不在赘述.直接安装seleinum pip3 install selenium 安装完成以后, pip3 show selenium 显示 Name: s ...

  6. 如何给Ionic写一个cordova插件

    写一个cordova插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还会有一丝丝头痛,却没有一开始那么 ...

  7. [Oracle]约束（constraint）

    (一)约束的概念 在Oracle中,可以通过设置约束来防止无效数据进入表中.Oracle一共有5种约束: 主键约束(primary key) 外键约束(foreign key) 唯一性约束(uniqu ...

  8. Tomcat结构（转）

    资料:http://wenku.baidu.com/view/20720e78a26925c52cc5bfd6.html Tomcat系统架构 http://wenku.baidu.com/view/ ...

  9. springboot用thymeleaf模板的paginate分页

    本文根据一个简单的user表为例,展示 springboot集成mybatis,再到前端分页完整代码(新手自学,不足之处欢迎纠正): 先看java部分 pom.xml 加入 <!--支持 Web ...

  10. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...