设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
自丢网»社区论坛 › 建站程序/IT教程 › Html/Html5教程 › 移动端流式布局案例附代码

移动端流式布局案例附代码

[复制链接]
查看2149 | 回复0 | 2020-1-6 15:25 | 显示全部楼层 |阅读模式
移动端流式布局案例附代码
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>流式布局案例-IT战蚁</title>
  9.     <style>
  10.         body {
  11.             margin: 0px;
  12.         }
  13.         
  14.         section {
  15.             max-width: 980px;
  16.             min-width: 320px;
  17.             margin: 0 auto;
  18.         }
  19.         
  20.         section div:nth-child(1) {
  21.             float: left;
  22.             width: 50%;
  23.             height: 200px;
  24.             background-color: pink;
  25.         }
  26.         
  27.         section div:nth-child(2) {
  28.             float: left;
  29.             width: 50%;
  30.             height: 200px;
  31.             background-color: red;
  32.         }
  33.     </style>
  34. </head>

  36. <body>
  37.     <section>
  38.         <div></div>
  39.         <div></div>
  40.     </section>
  41. </body>

  43. </html>
复制代码


移动端网页, 流式布局, 移动布局

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

admin

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-16
回复楼主 返回列表