Html学习之四（页面布局）
<!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>
结果：
