<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构</title> <style> header, nav, article, footer{ border: solid 1px #666; padding: 5px; } header{ 500px; } nav{ 500px; } ul{ text-align: center; height: 30px; line-height: 30px; background-color: #f00; } li,a{ float: left; display: inline-block; 50px; height: 5px; font-size: 12px; } li{ margin: 0 5px; list-style: none; } a,a:hover,li.cur a{ color: #fff; text-decoration: none; } a:hover,li.cur a{ background-color: #c00; } article{ 500px; } footer{ clear: both; 500px; } </style> </head> <body> <header> 头部部分 </header> <nav> <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> </nav> <article> 内容部分 </article> <footer> 底部部分 </footer> </body> </html>