简单教程
提交运行
代码编辑器:
<!DOCTYPE html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"><link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> <style> .wrapper {overflow:auto;} #main {margin-left: 4px;} #leftsidebar {float: none;width: auto;} #menulist {margin:0;padding:0;} .menuitem { background:#CDF0F6; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:4px; padding:2px; } @media screen and (min-width: 480px) { #leftsidebar {width:200px;float:left;} #main {margin-left:216px;} } </style> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">Menu-item 1</li> <li class="menuitem">Menu-item 2</li> <li class="menuitem">Menu-item 3</li> <li class="menuitem">Menu-item 4</li> <li class="menuitem">Menu-item 5</li> </ul> </div> <div id="main"> <h1>重置浏览器窗口查看效果!</h1> <p>在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。</p> </div> </div> <footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
运行结果: