固定左側導航欄
阿新 • • 發佈：2018-12-12
<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自學教程(如約智惠.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style > body { font-family:"Lato", sans-serif; } .sidenav { height:100%; width:160px; position:fixed; z-index:1; top:0; left:0; background-color:#111; overflow-x:hidden; padding-top:20px; } .sidenav a { padding:6px 8px 6px 16px; text-decoration:none; font-size:25px; color:#818181; display:block; } .sidenav a:hover { color:#f1f1f1; } .main { margin-left:160px; font-size:28px; padding:0px; } @media screen and (max-height: 450px) { .sidenav { padding-top:15px; } .sidenav a { font-size:18px; } } </style> </head> <body > <div class="sidenav"> <a href="#about">關於我們</a> <a href="#services">服務專案</a> <a href="#clients">客戶資訊</a> <a href="#contact">聯絡方式</a> </div> <div class="main"> <h2>側欄</h2> <p>此側邊欄為全高（100％）並始終顯示。</p> <p>向下滾動頁面檢視結果。</p> <p>文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。</p> <p>文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。</p> <p>文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。</p> <p>文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。文字內容。。。</p> </div> </body> </html>
