HTML导航页面结构
生活随笔
收集整理的這篇文章主要介紹了
HTML导航页面结构
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先放效果圖
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>頁面結構</title><style>body,html{margin: 0;padding: 0;}header,aside,section,footer{border: 1px solid yellow;background: #1b6d85;text-align: center;}.header{height: 100px;}.aside,.section{height: 300px;}.aside{width: 100px;float: left;}.footer{height: 100px;}</style> </head> <body> <header class="header">header</header> <aside class="aside">aside</aside> <section class="section">section</section> <footer class="footer">footer</footer> </body> </html>但是如果把section也float:left，就會出現下面的效果
.aside,.section{height: 300px;float: left;}.aside{width: 100px;}原因是：當一個元素設置了float屬性后，部分元素會脫離原來的文檔流，緊隨其后的塊元素會無視設置float屬性的元素，但是后面元素的文本依然會為float元素讓出位置，環繞于周圍。
總結
以上是生活随笔為你收集整理的HTML导航页面结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Webstorm/PhpStorm打开多
- 下一篇： wampserver运行后报错问题