位置:电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS3基础样式
CSS3 高级样式
当前阅读教程:CSS3教程 > 实例2
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 实例1 下一篇: 暂无
代码
<!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

image.png


上一篇: 实例1 下一篇: 暂无
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)