當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

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

發(fā)布時(shí)間：2024/3/24 CSS 47 豆豆

生活随笔收集整理的這篇文章主要介紹了利用Div CSS(嵌套盒模型)布局页面完整实例流程小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Div CSS(嵌套盒模型)布局頁(yè)面完整實(shí)例流程：

<!DOCTYPE html>
<html>
?<head>
??<meta charset="UTF-8">
??<title>中國(guó)石油大學(xué)</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;">學(xué)生服務(wù)熱線:
???????</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">首頁(yè)</a>
???????</li>
???????<li class="nav-text">
????????<a class="current" href="http://www.upol.cn/" class="nav_list_a">學(xué)院概況</a>
???????</li>
???????<li class="nav-text">
???????<a class="current" href="http://www.upol.cn/zhaosheng/" class="nav_list_a">招生專區(qū)</a>
???????</li>
???????<li class="nav-text">
????????<a class="current" href="/portal/news.aspx?cateKey=jxdt" class="nav_list_a">教學(xué)教務(wù)</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">專業(yè)設(shè)置</a>
????????</li>
???????</ul>
????</div>
???</div>
???<div class="container">
?????<div class="content-left">
??????<div class="divHead">招生專區(qū)</div>
??????<div class="list-left">
??????<ul>
???????<li>
???????<a href="/portal/newsdetail.aspx?cateKey=zxbm&newsId=ccaddahrwadels6hppuq5y46kfg" class="text-t">在線報(bào)名</a>
???????</li>
???????<li>
???????<a href="http://www.upol.cn/new/zhaos/2017/" class="text-t">招生簡(jiǎn)章</a>
???????</li>
???????<li>
???????<a href="http://xg.sdcen.cn:82/study/Login.aspx" class="text-t">入學(xué)考試</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">系統(tǒng)登錄</div>
??????<input type="text" name="username" placeholder="用戶名" minlength="1" class="username"/>
???????
??????<input type="password" name="password" placeholder="密碼" minlength="1" class="password"/>
???????
???????<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">聯(lián)系我們</div>
??????<img src="img/contect.png" width="220" height="150" style="margin-left: 10px;margin-top: 15px;"? />
???????<div class="phone">統(tǒng)一服務(wù)熱線：
????????<span class="tel-phone" style="color: red;">400-640-1953</span>
???????</div>
???????<div class="addr">地址：青島市黃島區(qū)長(zhǎng)江西路66號(hào)?? 中國(guó)石油大學(xué)（華東）
?????????????????????????? </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">
????????教育發(fā)展中心與靈山衛(wèi)街道辦共...
???????</div>
???????<div class="text-2">??
????????4月12日，教育發(fā)展中心與青島市黃島區(qū)靈山衛(wèi)成人教育中心共同在靈山衛(wèi)社區(qū)中心舉行靈山衛(wèi)社區(qū)教育學(xué)院揭...
???????</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="遠(yuǎn)程教育學(xué)院舉行學(xué)習(xí)中心管理人員業(yè)務(wù)培訓(xùn)" target="_blank" class="text-s">遠(yuǎn)程教育學(xué)院舉行學(xué)習(xí)中心管理...</a>
?????????????? <span>2017-05-17</span>
???????????????? </li>
?????????????? <li>
???????????????? <a href="/portal/newsdetail.aspx?cateKey=xwzx&newsId=sxiwafwna6xfjbr4ql0t5w" title="學(xué)校發(fā)布2016年度繼續(xù)教育質(zhì)量報(bào)告" target="_blank" class="text-s">學(xué)校發(fā)布2016年度繼續(xù)教育質(zhì)量...</a>
?????????????? <span>2017-04-14</span>
???????????????? </li>
?????????????? <li>
???????????????? <a href="/portal/newsdetail.aspx?cateKey=xwzx&newsId=zduxavonabhfubym08bylg" title="遠(yuǎn)程教育學(xué)院在瑞智（青島）公司舉行首屆專場(chǎng)畢業(yè)典禮" target="_blank" class="text-s">遠(yuǎn)程教育學(xué)院在瑞智（青島）公...</a>
?????????????? <span>2017-04-12</span>
???????????????? </li>
?????????????? <li>
??????????????? <a href="/portal/newsdetail.aspx?cateKey=xwzx&newsId=m5-4aeanqp1adclgxe6usw" title="我校舉行現(xiàn)代遠(yuǎn)程教育2017年學(xué)士學(xué)位授予儀式" target="_blank" class="text-s">我校舉行現(xiàn)代遠(yuǎn)程教育2017年學(xué)...</a>
??????????????? <span>2017-03-30</span>
???????????????? </li>
?????????????? <li>
????????????????? <a href="/portal/newsdetail.aspx?cateKey=xwzx&newsId=huinatynob1czz81eqlimq" title="全國(guó)高等學(xué)歷繼續(xù)教育專業(yè)管理與公共信息服務(wù)平臺(tái)啟用培訓(xùn)成功舉行" target="_blank" class="text-s">全國(guó)高等學(xué)歷繼續(xù)教育專業(yè)管理...</a>
?????????????? <span>2017-03-20</span>
??????????????? </li>
?????????????? <li>
???????????????? <a href="/portal/newsdetail.aspx?cateKey=xwzx&newsId=gwmnadmnb6tff57dldztza" title="全國(guó)高等學(xué)歷繼續(xù)教育專業(yè)管理與公共信息服務(wù)平臺(tái)啟用培訓(xùn)成功舉行" target="_blank" class="text-s">全國(guó)高等學(xué)歷繼續(xù)教育專業(yè)管理...</a>
?????????????? <span>2017-03-17</span>
???????????????? </li>
?????????????? <li>
???????????????? <a href="/portal/newsdetail.aspx?cateKey=xwzx&newsId=4lamadmnpo5mdf3439pudg" title="教育發(fā)展中心謀劃部署2017年各項(xiàng)工作" target="_blank" class="text-s">教育發(fā)展中心謀劃部署2017年各...</a>
?????????????? <span>2017-03-17</span>
???????????????? </li>
?????????????? <li>
???????????????? <a href="/portal/newsdetail.aspx?cateKey=xwzx&newsId=872ladmnbpjh8d07wozxsa" title="國(guó)家發(fā)改委國(guó)際合作中心執(zhí)行總監(jiān)馬蘭來(lái)校洽談交流" target="_blank" class="text-s">國(guó)家發(fā)改委國(guó)際合作中心執(zhí)行總...</a>
?????????????? <span>2017-03-17</span>
???????????????? </li>
???????</ul>
??????</div>
??????</div>
?????<div class="content-3">
??????<div class="conten-nav-top">教學(xué)專區(qū)</div>
??????<div class="teachBox">
???????<ul>
????????<li class="teachTwo">
?????????<a href="http://course.upol.cn/tongkao/index.asp" class="text-p">網(wǎng)絡(luò)統(tǒng)考</a>
????????</li>
????????<li class="teachThree">
?????????<a href="http://xl.upol.cn/portal/news.aspx?cateKey=ycdb" class="text-p">遠(yuǎn)程答辯</a>
????????</li>
????????<li class="teachFour">
?????????<a href="http://course.upol.cn/xuewei/index.asp" class="text-p">學(xué)位輔導(dǎo)</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">翠園學(xué)堂</a>
????????</li>
???????</ul>>
????????<li class="teachTwo" >
?????????<a href="http://course.upol.cn/tongkao/index.asp" class="text-p">網(wǎng)絡(luò)統(tǒng)考</a>
????????</li>
????????<li class="teachThree">
?????????<a href="http://xl.upol.cn/portal/news.aspx?cateKey=ycdb" class="text-p">遠(yuǎn)程答辯</a>
????????</li>
????????<li class="teachFour">
?????????<a href="http://course.upol.cn/xuewei/index.asp" class="text-p">學(xué)位輔導(dǎo)</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">翠園學(xué)堂</a>
????????</li>
???????</ul>
??????</div>
?????</div>?
??????<div style="clear: both;"></div>
?????<div class="content-4">
??????<div class="conten-nav-top">聯(lián)系我們</div>
??????<div class="informBox">
???????<ul>
????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=9g-8ak2nll5bjirui4-weq" title="2017年9月PETS3級(jí)考試輔導(dǎo)啟動(dòng)啦！">??
????????<li>
?????????<span>07-11</span>
????? ????????2017年9月PETS3級(jí)考試輔導(dǎo)啟動(dòng)...?????
????????</li>
????????</a>?
????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=e70ray2n0ipbouc9qutg8q" title="2017年上半年學(xué)位外語(yǔ)成績(jī)申報(bào)結(jié)果公示">????
???????????????????????????????? <li>
???????????? <span>06-09</span>
???????????? 2017年上半年學(xué)位外語(yǔ)成績(jī)申報(bào)...
???????????? </li>
????????</a>
????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=ztjbai2n47pdejymeqr5-g" title="關(guān)于2017年下半年全國(guó)英語(yǔ)等級(jí)考試的報(bào)考通知">
?????????<li>????
????????????? <span>06-09</span>
????????????? 關(guān)于2017年下半年全國(guó)英語(yǔ)等級(jí)...
???????????? </li>
?????????</a>
?????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=od6lahyne4hl-mhsdeogww" title="關(guān)于轉(zhuǎn)發(fā)2017年4月統(tǒng)考成績(jī)復(fù)核工作的通知">
??????????<li>????
????????????? <span>05-23</span>
????????????? 關(guān)于轉(zhuǎn)發(fā)2017年4月統(tǒng)考成績(jī)復(fù)核...
????????????? </li>
?????????</a>
?????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=xcgvawqnbjdex1bcnomavg" title="關(guān)于2017年9月份網(wǎng)絡(luò)統(tǒng)考整體流程的通知">
??????????<li>????
????????????? <span>05-05</span>
????????????? 關(guān)于2017年9月份網(wǎng)絡(luò)統(tǒng)考整體流...
????????????? </li>
?????????</a>
?????????<a href="/portal/newsdetail.aspx?cateKey=tzgg&newsId=yy4vawqn07leaeetyfcgvq" title="關(guān)于2017年9月網(wǎng)絡(luò)統(tǒng)考跨省異地報(bào)考有關(guān)事項(xiàng)的通知">
??????????<li>????
????????????? <span>05-05</span>
????????????? 關(guān)于2017年9月網(wǎng)絡(luò)統(tǒng)考跨省異地...
????????????? </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級(jí)考試輔導(dǎo)啟動(dòng)啦！" class="text-x">2017年9月PETS3級(jí)考試輔導(dǎo)啟動(dòng)...</a>
???????????????? ?
???????????????? <span>2017-07-11</span>
????????</li>
???????????????? <li>
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=jxdt&newsId=qpwsaiwn-j9ij45lt3hs2w" title="關(guān)于發(fā)布《2017年秋季學(xué)期教學(xué)運(yùn)行計(jì)劃》的通知" class="text-x">關(guān)于發(fā)布《2017年秋季學(xué)期教學(xué)...</a>
???????????????? ?
???????????????? <span>2017-06-01</span>
???????????????? </li>
???????????????? <li>
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=jxdt&newsId=vyuxagsnjphhhlgp-h07da" title="關(guān)于發(fā)布2017春季學(xué)期期末考試工作的通知" class="text-x">關(guān)于發(fā)布2017春季學(xué)期期末考試...</a>
???????????????? ?
???????????????? <span>2017-04-29</span>
???????????????? </li>
???????????????? <li>
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=jxdt&newsId=yi-qacqnk6nmbwd7owcisq" title="關(guān)于做好2016秋季學(xué)期課程補(bǔ)考工作的通知" class="text-x">關(guān)于做好2016秋季學(xué)期課程補(bǔ)考...</a>
???????????????? ?
???????????????? <span>2017-03-02</span>
???????????????? </li>
???????????????? <li>
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=jxdt&newsId=eqfaaccndkpj729penfdaw" title="2017年3月PETS3級(jí)考試輔導(dǎo)啟動(dòng)啦！" class="text-x">2017年3月PETS3級(jí)考試輔導(dǎo)啟動(dòng)...</a>
????????????????
???????????????? <span>2017-02-20</span>
???????????????? </li>
???????????????? <li>
????????????????? <a href="/portal/newsdetail.aspx?cateKey=jxdt&newsId=zo2jahmmdz9dobfft8jvkg" title="關(guān)于做好2016春季學(xué)期課程補(bǔ)考工作的通知" class="text-x">關(guān)于做好2016春季學(xué)期課程補(bǔ)考...</a>
????????????????? ?
????????????????? <span>2016-09-06</span>
???????????????? </li>
???????????????? <li>
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=jxdt&newsId=2yajahmm6kfcjeu8mh6zqw" title="2016年9月PETS3級(jí)考試輔導(dǎo)啟動(dòng)啦！" class="text-x">2016年9月PETS3級(jí)考試輔導(dǎo)啟動(dòng)...</a>
????????????????? ?
????????????????? <span>2016-09-06</span>
???????????????? </li>
???????????????? <li>
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=jxdt&newsId=ggejahmmm5jjm3nwz5o24q" title="2016年9月計(jì)算機(jī)統(tǒng)考視頻輔導(dǎo)開(kāi)始啦！" class="text-x">2016年9月計(jì)算機(jī)統(tǒng)考視頻輔導(dǎo)開(kāi)...</a>
????????????????? ?
????????????????? <span>2016-09-06</span>
???????????????? </li>
???????????????? <li>
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=jxdt&newsId=0hqhahmmnbrp-jfzrc33va" title="2016年4月《計(jì)算機(jī)應(yīng)用基礎(chǔ)》統(tǒng)考輔導(dǎo)答疑安排" class="text-x">2016年4月《計(jì)算機(jī)應(yīng)用基礎(chǔ)》統(tǒng)...</a>
???????????????? ?
???????????????? <span>2016-09-06</span>
???????????????? </li>
???????</ul>
??????</div>
?????</div>
?????<div class="content-6">
??????<div class="conten-nav-top">教學(xué)專區(qū)</div>
??????<div class="dynamicBox">
???????<ul>
????????<li>
??????????????????
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=xywh&newsId=iegdauanazzkvgvd-rvd3g" title="我校舉行現(xiàn)代遠(yuǎn)程教育2017年學(xué)士學(xué)位授予儀式" class="text-x">我校舉行現(xiàn)代遠(yuǎn)程教育2017年學(xué)...</a>
???????????????? ?
???????????????? ?<span>2017-03-30</span>
????????</li>
???????????????? <li>
??????????????????
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=xywh&newsId=qcaiahmmmjviwaqhw23smq" title="我校舉行現(xiàn)代遠(yuǎn)程教育2015年學(xué)士學(xué)位授予儀式" class="text-x">我校舉行現(xiàn)代遠(yuǎn)程教育2015年學(xué)...</a>
???????????????? ?
???????????????? <span>2016-09-06</span>
???????????????? </li>
???????????????? <li>
??????????????????
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=xywh&newsId=uqoiahmmvl9khpa8tupmiw" title="遠(yuǎn)程教育2015年秋季批次畢業(yè)設(shè)計(jì)（論文）答辯評(píng)審工作順利結(jié)束" class="text-x">遠(yuǎn)程教育2015年秋季批次畢業(yè)設(shè)...</a>
???????????????? ?
???????????????? <span>2016-09-06</span>
???????????????? ?
???????????????? </li>
???????????????? <li>
??????????????????
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=xywh&newsId=n4kiahmmg7hh79ogys3rug" title="謀發(fā)展，促共贏 —校企合作帶來(lái)招生春天" class="text-x">謀發(fā)展，促共贏 —校企合作帶來(lái)...</a>
???????????????? ?
???????????????? <span>2016-09-06</span>
???????????????? ?
???????????????? </li>
???????????????? <li>
??????????????????
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=xywh&newsId=vf-iahmmrytf0b1k-wtmzg" title="遠(yuǎn)程教育學(xué)院舉辦2016年新建學(xué)習(xí)中心管理人員業(yè)務(wù)培訓(xùn)會(huì)" class="text-x">遠(yuǎn)程教育學(xué)院舉辦2016年新建學(xué)...</a>
???????????????? ?
????????????????? <span>2016-09-06</span>
???????????????? </li>
???????????????? <li>
??????????????????
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=xywh&newsId=5uciahmmorjehona07ws6q" title="新生二次導(dǎo)學(xué)暨職業(yè)生涯規(guī)劃專題講座順利舉辦" class="text-x">新生二次導(dǎo)學(xué)暨職業(yè)生涯規(guī)劃專...</a>
???????????????? ?
???????????????? <span>2016-09-06</span>
???????????????? </li>
???????????????? <li>
??????????????????
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=xywh&newsId=2r2iahmm7q5ezn9ceefpeq" title="青島直屬學(xué)習(xí)中心舉辦剪紙藝術(shù)傳統(tǒng)文化講座" class="text-x">青島直屬學(xué)習(xí)中心舉辦剪紙藝術(shù)...</a>
????????????????
???????????????? <span>2016-09-06</span>
???????????????? </li>
???????????????? <li>
??????????????????
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=xywh&newsId=1fwhahmmwldlj6elyo6nig" title="東營(yíng)直屬學(xué)習(xí)中心舉辦“辦公綜合能力提升”講座開(kāi)講" class="text-x">東營(yíng)直屬學(xué)習(xí)中心舉辦“辦公綜...</a>
???????????????? ?
???????????????? <span>2016-09-06</span>
???????????????? </li>
???????????????? <li>
??????????????????
?????????????????? <a href="/portal/newsdetail.aspx?cateKey=xywh&newsId=kduhahmmyiloc5ywn9shjw" title="東營(yíng)直屬學(xué)習(xí)中心“兩學(xué)一做”專題教育活動(dòng)講座開(kāi)講" class="text-x">東營(yíng)直屬學(xué)習(xí)中心“兩學(xué)一做”...</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>物理化學(xué)</p>
????????????? </a>
?????</li>
?????
?????<li>
????????????? <a href="http://www.upol.cn/jpk2010/hjjc/">
????????????? <img src="./img/major-2.jpg">
????????????? <p>環(huán)境監(jiān)測(cè)</p>
????????????? </a>
?????</li>
?????
????????? ???<li>
?????????????? <a href="http://course.upol.cn/jpk2009/diangong/index.asp?fs=view">
?????????????? <img src="./img/major-3.jpg">
?????????????? <p>電工電子學(xué)</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>構(gòu)造地質(zhì)學(xué)</p>
???????????? </a>
????????? ????</li>
????????? ???
????????? ???
????????? ????<li>
?????????????? <a href="http://www.upol.cn/jpk2010/yksj/">
?????????????? <img src="./img/major-5.jpg" width="104px" height="74px">
?????????????? <p>油庫(kù)設(shè)計(jì)與管理</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">中國(guó)石油大學(xué)（華東）</a>
?????</li>
?????<li>
??????<a href="http://www.upol.cn">中國(guó)石油大學(xué)教育發(fā)展中心</a>
?????</li>
?????<li>
??????<a href="http://www.sdcen.cn">山東省繼續(xù)教育公共服務(wù)平臺(tái)</a>
?????</li>
????</ul>
???</div>
??</div>
??<div class="footer">
???<div class="jszc">
???????????? ? 技術(shù)支持：山東和學(xué)教育科技有限公司??? 中國(guó)石油大學(xué)（華東）教育發(fā)展中心
??????????? </div>
??????????? <div class="tel-1">
??????????? ?聯(lián)系電話：400-640-1953??? 聯(lián)系地址：青島市黃島區(qū)長(zhǎng)江西路66號(hào) 中國(guó)石油大學(xué)（華東）
??????????? </div>
??????????? <div class="ad">
????魯ICP備16034406號(hào)?????????
??????????? </div>
??</div>
??</div>
?</body>
</html>

總結(jié)

以上是生活随笔為你收集整理的利用Div CSS(嵌套盒模型)布局页面完整实例流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：富士 XF30mm F2.8 微距镜头
下一篇： CSS 基本样式

CSS

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

總結(jié)

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