<!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: **x 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,200,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>
XHTMT|
HTML5|
CSS|
HTML DOM|
jQuery|
JSON|
AJAX|
LESS|
HTML|
Bootstrap|
Foundation|
AngularJS|
Ember.js|
TypeScript|
AngularJS2|
React|
jQuery UI|
jQuery EasyUI|
Node.js|
Highcharts|
Echarts|
Vue.js|
CoffeeScript|
Ext.js|
Meteor|
SASS|
Omi|
Markdown|
前端开发规范|
浏览器|
webpack|
JavaScript|
CSS3|
用户登录
还没有账号?立即注册
用户注册
投稿取消
文章分类: |
|
还能输入300字
上传中....