Html學習之四（頁面布局）
阿新 • • 發佈：2019-03-26
100% 機構 tle clear lock footer title hover body
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>布局</title> </head> <body> <header style="width: 800px;height: 120px;border: 1px red solid;"> <header style="width: 800px;height: 20px;background-color: blue;">2019.3.22</header> <div style="width: 800px;height: 80px;background-color: red;">logotupian</div> <div style="width: 800px;height: 20px;background-color: pink;">導航部分</div> </header> <div style="width: 800px;height: 500px;border: 1px red solid;"> <div style="width: 600px;height: 500px;background-color: green;float: left;" > <article> 正文導航 <p>新聞正文</p> </article> </div> <aside style="width: 200px;height: 500px;background-color: yellow; float: right;">側邊欄</aside> </div> <footer style="width: 800px;height: 30px;border: 1px red solid;> <div style="width: 800px;height: 50px;background-color: white;"> 版權信息 </div> </footer> </body> </html>
結果：
進階：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hpu</title> <style> *{padding: 0px;margin: 0px;} header{width:100%;height: 100px; background:#f90;margin-bottom:5px; padding-top: 30px;position: absolute;} nav{position: absolute;left: 150px;top: 85px;} section{width: 100%;height: 700px;} /*article{width:70%;height: 700px; background:#abc;float:left;}*/ #a1{width: 34%;height: 700px;background: #453;float:left;margin-right:5px;} #a2{width: 35%;height: 700px;background: purple;float:left;} aside{width:29.5%;height: 700px; background:#a10;float:right;} footer{width:100%;height: 100px; background:cyan;clear:both;margin-top:5px;} ul{list-style: none;} ul li{float: left;} ul li a{ text-decoration: none; background: #0f9; height: 40px; line-height: 40px; display: block; margin-right: 1px; padding:0px 10px; } ul li a:hover{background: purple;} ul li ul li{clear:left; } ul li ul{display: none;} ul li:hover ul{display: block;} </style> </head> <body> <header> <nav> <ul> <li><a href="http://baidu.com">學院簡介</a></li> <li><a href="#">管理機構</a></li> <li> <a href="#">學院設置</a> <ul> <li><a href="">能源學院</a></li> <li><a href="">電氣學院</a></li> <li><a href="">安全學院</a></li> <li><a href="">材料學院</a></li> <li><a href="">資環學院</a></li> </ul> </li> <li><a href="#">招生就業</a></li> <li><a href="#">科學研究</a></li> </ul> </nav> </header> <section> <article id="a1"></article> <article id="a2"></article> <aside></aside> </section> <footer></footer> </body> </html>
結果：
Html學習之四（頁面布局）