下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>请用webkit内核的做演示</Title> <style type="text/CSS"> body,a{ margin: 0px 0px; padding: 0px 0px; text-decoration: none; color:#000; Font:18px MicroSoft Yahei; } p{ Font:18px MicroSoft Yahei; padding: 5px 10px; } .navi{ position: fixed; top: 0px; left: 0px; wIDth: 100%; height: 65px; background: #F5F7FA; border: 3px solID #E6E9ED; z-index: 2; line-height: 65px; padding-left: 10px; } #container{ position: fixed; left: 0px; top: 65px; wIDth: 100%; height: 900px; background-color: rgba(0,200,255,0.7); z-index: 1; Transition-delay: 0.5s; Transition-duration: 1s; margin: 0px 0px; } @media screen and (min-wIDth: 570px){ #mobile_menu_btn{ display: none; } #mobile_menu{ display: none; } .pc{ List-style: none; height: 100%; margin: 0px 0px; wIDth: 900px; padding-left: 10px; } .pc > li{ display: inline-block; wIDth: 100px; margin: 15px 0px; text-align: center; border: 1px solID #ccc; height: 30px; line-height: 30px; border-radius: 5px; background: #ccc; cursor: pointer; } .pc > li:hover{ background: #ccd; } } @media screen and (max-wIDth: 569px){ #mobile_menu{ position: fixed; left: 0px; top: 65px; wIDth: 300px; background: rgba(200,0.1); z-index: 0; height: 800px; display: block; } .mobile{ List-style: none; padding: 0px 10px; } .mobile li{ margin: 10px 0px; wIDth: 100%; border-bottom: 1px solID #ccc; border-radius: 5px; background: #ccc; padding:5px 5px; cursor: pointer; } .mobile > li:hover{ background: #ccd; } #mobile_menu_btn{ border:1px solID #ccc; border-radius: 5px; wIDth: 50px; height: 50px; outline: none; Transition-duration: 1s; } #mobile_menu_btn:hover{ -webkit-transform: rotate(360deg); background: #aab; cursor: pointer; } .pc{ display: none; } } </style></head><body> <nav> <div > <button ID="mobile_menu_btn" onclick="toggle()">Menu</button> <ul > <li><a href="http://my.oschina.net/sallency" target="_blank">首页</a></li> <li><a href="#">新鲜事</a></li> <li><a href="#">画册墙</a></li> <li><a href="#">微小站</a></li> <li><a href="http://my.oschina.net/sallency" target="_blank">关于我们</a></li> </ul> </div> </nav> <div ID="container"> <p>纯HTML+CSS+Js控制，没写那么全面，做个小演示而已，所以你得用webkit内核的浏览器看，但别用360，谢谢，这货是浏览器？別開玩笑了！<a href="http://my.oschina.net/sallency" target="_blank">【我的博客】</a></p> </div> <div ID="mobile_menu"> <ul > <li><a href="http://my.oschina.net/sallency" target="_blank">首页</a></li> <li><a href="#">新鲜事</a></li> <li><a href="#">画册墙</a></li> <li><a href="#">微小站</a></li> <li><a href="http://my.oschina.net/sallency" target="_blank">关于我们</a></li> </ul> </div> <script type="text/JavaScript"> function toggle(){ var container = document.getElementByID("container"); if(container.style.Webkittransform == ''){ container.style.Webkittransform = 'translateX(300px)'; } else { container.style.Webkittransform = ''; } } </script></body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的简单的响应式页面小示例全部内容，希望文章能够帮你解决简单的响应式页面小示例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）