代码<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多媒体查询2</title>
<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;
}
/*屏幕大于600px时候：左侧显示菜单，右侧显示内容）*/
@media screen and (min-width: 600px) {
#leftsidebar {width:200px;float:left;}
#main {margin-left:216px;}
}
</style>
</head>
<body>
<div>
<!--菜单-->
<div id="leftsidebar">
<ul id="menulist">
<li>Menu-item 1</li>
<li>Menu-item 2</li>
<li>Menu-item 3</li>
<li>Menu-item 4</li>
<li>Menu-item 5</li>
</ul>
</div>
<!--内容-->
<div id="main">
<h1>重置浏览器窗口查看效果！</h1>
<p>在屏幕可视窗口尺寸大于 600 像素时将菜单浮动到页面左侧。</p>
</div>
</div>
</body>
</html>效果图小白教程网www.2d5.net 
|
