利用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&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="我校舉行現代遠程教育2017年學士學位授予儀式" target="_blank" class="text-s">我校舉行現代遠程教育2017年學...</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="教育發展中心謀劃部署2017年各項工作" target="_blank" class="text-s">教育發展中心謀劃部署2017年各...</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="2017年9月PETS3級考試輔導啟動啦！">??
????????<li>
?????????<span>07-11</span>
????? ????????2017年9月PETS3級考試輔導啟動...?????
????????</li>
????????</a>?
????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=e70ray2n0ipbouc9qutg8q" title="2017年上半年學位外語成績申報結果公示">????
???????????????????????????????? <li>
???????????? <span>06-09</span>
???????????? 2017年上半年學位外語成績申報...
???????????? </li>
????????</a>
????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=ztjbai2n47pdejymeqr5-g" title="關于2017年下半年全國英語等級考試的報考通知">
?????????<li>????
????????????? <span>06-09</span>
????????????? 關于2017年下半年全國英語等級...
???????????? </li>
?????????</a>
?????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=od6lahyne4hl-mhsdeogww" title="關于轉發2017年4月統考成績復核工作的通知">
??????????<li>????
????????????? <span>05-23</span>
????????????? 關于轉發2017年4月統考成績復核...
????????????? </li>
?????????</a>
?????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=xcgvawqnbjdex1bcnomavg" title="關于2017年9月份網絡統考整體流程的通知">
??????????<li>????
????????????? <span>05-05</span>
????????????? 關于2017年9月份網絡統考整體流...
????????????? </li>
?????????</a>
?????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&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&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&newsId=qpwsaiwn-j9ij45lt3hs2w" title="關于發布《2017年秋季學期教學運行計劃》的通知" class="text-x">關于發布《2017年秋季學期教學...</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="2017年3月PETS3級考試輔導啟動啦！" class="text-x">2017年3月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年9月PETS3級考試輔導啟動啦！" class="text-x">2016年9月PETS3級考試輔導啟動...</a>
????????????????? ?
????????????????? <span>2016-09-06</span>
???????????????? </li>
???????????????? <li>
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=jxdt&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&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&newsId=iegdauanazzkvgvd-rvd3g" title="我校舉行現代遠程教育2017年學士學位授予儀式" 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">
????????????? <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(嵌套 盒模型)布局页面完整实例流程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 富士 XF30mm F2.8 微距镜头
- 下一篇： css--DIV+CSS布局、常用属性、