<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS之侧边栏</title> <style> *{ margin:0; padding:0; } html{ height:100%; } a:link,a:visited{ color:#00FF00; text-decoration:none; } #side{ display:none; } #side:checked + aside{ top:0; } #side:checked ~ #wrap{ padding-top:220px; } body > aside{ position:absolute; top:0; bottom:0; top:-200px; 100%; background:#333333; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; height:200px; } body > aside > h2{ color:#00FF00; text-align:center; font-weight:normal; padding:10px; } #wrap{ margin-left:20px; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; } #wrap > label{ background:#333333; border-radius: 15px; color: #FFF; cursor: pointer; display: block; font-family: Courier New; font-size: 25px; font-weight: bold; 50px; height: 50px; line-height: 35px; text-align: center; text-shadow: 0 -4px; } #wrap > label:hover{ background:#000; } </style> </head> <body> <input type='checkbox' id='side'> <aside> <h2><a href="http://www.cnblogs.com/caidupingblogs/">冷的锋刃</a></h2> <h2><span >用冷的锋刃琴的寂寥写往事今朝</h2> </aside> </input> <div id='wrap'> <!--侧边栏按钮标记，注意"="只是符号--> <label for='side'>^</label> </div> </body> </html>