一，效果圖。css
二，代碼。html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Display(顯示)</title> <style> h1.hidden { display: none; } li { display: inline; } span { display: block; } </style> </head> <body> <h1>this is a visible heading</h1> <h1 class="hidden">this is a hidden heading</h1> <p>notice that the hidden heading still takes up space.</p> <ul> <li><a href="/html" target="_blank">HTML</a></li> <li><a href="/css/" target="_blank">CSS</a></li> <li><a href="/js/" target="_blank">JavaScript</a></li> <li><a href="/xml/" target="_blank">XML</a></li> </ul> <h2>nirvana</h2> <span>Record: MTV Unplugged in New York</span> <span>Year: 1993</span> <h2>Radiohead</h2> <span>Record: OK Computer</span> <span>Year: 1997</span> </body> </html>
參考資料：《菜鳥教程》post