完整代码：
<!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { padding:0px; margin:0px; text-align: center; font-family:'微软雅黑',Trebuchet MS,Verdana,Helvetica,Arial,sans-serif; background-color: #FAFAFA; } body.sideMenu{ margin:0; -webkit-transform:none; transform:none; } #sideToggle{ display:none; } #sideToggle:checked + aside{ left:0; } #sideToggle:checked ~ #wrap{ padding-left:120px; } aside{ position:absolute; top:0; bottom:0; left:-110px; width:110px; background:#005e99; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; z-index:100; } #wrap{ margin-left:0px; padding:0px 0px 0px 0px; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; } #wrap > label{ display:inline-block; } #wrap > label{ float:left; background:#005e99; border-radius:50px; color: #FFF; cursor: pointer; display: block; font-family: Courier New; font-size: 25px; font-weight: bold; width: 30px; height: 30px; line-height: 35px; text-align: center; text-shadow: 0 -4px; } #wrap > label:hover{ background:#000; } h2{ color: #FFF; } </style> </head> <body> <input type='checkbox' id='sideToggle'> <aside> <h2>Hello!</h2> </aside> <div id="wrap"> <label id='sideMenuControl' for='sideToggle'>=</label> </div> </body> </html>