本人新手，之前偶尔接触Bootstrap，也做过一些响应式开发，但是都是略显皮毛，公司的业务需求也限制了深入学习。
现着手Pure Css学习，尝试了简单的左边菜单自动隐藏的demo。闲话少说，代码贴上才是硬道理。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css"> <title></title> <style media="screen"> div { border: 1px solid red; box-sizing: border-box; } html, body { height: 100%; } #menu { position: fixed; left: -180px; width: 180px; height: 100%; overflow-y: auto; } .pure-g { height: 100%; } @media (min- 58em) { #menu { left: 0; } body { padding-left: 180px; } } </style> </head> <body> <div class="" id="menu"> <div class="pure-menu pure-menu-open"> <a class="pure-menu-heading">菜单标题</a> <ul> <li><a href="#">功能1</a></li> <li><a href="#">功能2</a></li> <li><a href="#">功能3</a></li> <li class="pure-menu-heading"><a href="#">功能4</a></li> <li><a href="#">功能5</a></li> <li><a href="#">功能6</a></li> <li><a href="#">功能7</a></li> <li><a href="#">功能8</a></li> </ul> </div> </div> <div class="pure-g"> <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24"> Put your content1. </div> <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24"> Put your content2. </div> <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24"> Put your content3. </div> <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24"> Put your content4. </div> <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24"> Put your content5. </div> <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24"> Put your content6. </div> </div> </body> </html>
朋友们可以点此链接即可查看原文效果，欢迎喜欢相互学习的加我好友哦。个人qq：814230294