响应式布局实例操作
2023-09-11 14:22:19 时间
js
*{ margin: 0px; padding: 0px; } .heading, .container, .footing{ margin: 10px auto; } .heading{ height: 100px; background-color: chocolate; } .left, .right, .main{ background-color: cornflowerblue; } .footing{ height: 100px; background-color: aquamarine; } @media screen and (min-width: 960px){ .heading, .container, .footing{ width: 960px; } .left, .main, .right{ float: left; height: 500px; } .left, .right { width: 200px; } .main{ margin-left: 5px; margin-right: 5px; width: 550px; } .container{ height: 500px; } } @media screen and (min-width: 600px) and (max-width: 960px){ .heading, .container, .footing{ width: 600px; } .left, .main { float: left; height: 400px; } .right{ display: none; } .left{ width: 160px; } .main{ width: 435px; margin-left: 5px; } .container{ height: 400px; } } @media screen and (max-width: 600px){ .heading, .container, .footing{ width: 400px; } .left, .right{ width: 400px; height: 100px; } .main{ margin-top: 10px; width: 400px; height: 200px; } .right{ margin-top: 10px; } .container{ height: 420px; } }
html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width = device-width,initial-scale=1"> <title></title> <link href="css/style01.css" type="text/css" rel="stylesheet"> </head> <body> <div class="heading"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footing"></div> </body> </html>
相关文章
- c#中控件重绘(放大缩小移动隐藏恢复后不消失)实例
- c#中WepAPI(post/get)控制器方法创建和httpclient调用webAPI实例
- 使用JavaScript开发IE浏览器本地插件实例
- [转] php die()与exit()的区别实例详解
- 盒子实例--滑动--轮播
- Vue3+elementplus搭建通用管理系统实例二:登录界面的规划及实现
- jQuery动画效果animate和scrollTop结合使用实例
- 有趣的HTML实例(十三) 咖啡选择(css+js)
- 微信小程序 | 微信公众平台SpringBoot开发实例 │ 表情消息
- TFS2018环境搭建一单实例安装(适用于小型团队)
- ABP 报错 System.InvalidOperationException: 实例失败。