移动端常用布局代码实例

刺骨的言语ヽ痛彻心扉 2022-03-16 16:09 230阅读 0赞

#### 代码 ####

<!DOCTYPE html>
    <html lang="zh-hans">
      <head>
        <meta charset="UTF-8" />
        <title>移动布局</title>
        <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } .container { /* 整个容器占据全屏幕 */ height: 100vh; display: flex; flex-direction: column; } header { background: #999; height: 100px; } footer ul { background: #771; height: 50px; /* 这里对ul使用flex是为了让li直接水平排放 */ display: flex; } main { flex-grow: 1; /* 使用overflow：auto可以让主体部分超出屏幕时使用滚动条 */ overflow: auto; } footer > ul > li { border: 1px solid black; width: 25%; text-align: center; } </style>
      </head>
      <body>
        <div class="container">
          <header>header</header>
          <main>
            <p>conetent</p>
          </main>
          <footer>
            <ul>
              <li>tab1</li>
              <li>tab2</li>
              <li>tab3</li>
              <li>tab4</li>
            </ul>
          </footer>
        </div>
      </body>
    </html>

#### 效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMTU2Njk_size_16_color_FFFFFF_t_70]: /images/20220316/3078bf4009fb4b6da4766aeffe0bb6c1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端常用插件

文章目录一、什么是插件二、fastclick 插件 1.使用步骤 2.插件源码三、

ゝ一纸荒年。/ 2023年09月26日 11:22/ 0 赞/ 44 阅读

相关移动端rem布局

rem布局（等比缩放布局） rem布局好处：不同设备下看起来比较协调。坏处：显示的内容并不会在大屏幕展示的内容多。 em : 是一个相对单位，1

分手后的思念是犯贱/ 2023年07月09日 13:29/ 0 赞/ 143 阅读

相关移动端布局整合

动画 2D 3D效果transform 动画属性是css3新特性添加后的作用让页面有2d 3d效果让页面更丰富 2D 3D都属于动画效果所以都要 tr

向右看齐/ 2023年05月21日 12:58/ 0 赞/ 11 阅读

相关移动端布局 rem

移动端布局 rem rem定义 1、rem相对于 html元素字体大小来说的 2、rem的有点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以

曾经终败给现在/ 2022年11月19日 09:47/ 0 赞/ 261 阅读

相关移动端布局总结

移动端布局总结一：viewport 概念 ViewPort<meta>标记用于指定用户是否可以缩放Web页面，如果可以，那么缩放到的最大最小缩放比例是什么。使

客官°小女子只卖身不卖艺/ 2022年05月31日 14:37/ 0 赞/ 256 阅读

相关移动端页面布局

一、移动端app分类 1、Native App原生app手机应用程序　　使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是objec

迷南。/ 2022年04月23日 16:10/ 0 赞/ 390 阅读

相关移动端常用布局代码实例

代码 <!DOCTYPE html> <html lang="zh-hans"> <head> <meta charset="

刺骨的言语ヽ痛彻心扉/ 2022年03月16日 16:09/ 0 赞/ 231 阅读

相关关于移动端布局

关于移动端布局移动端布局的问题如今手机设备多种多样，屏幕大小各不相同，下面说一下如今的几种移动端布局. 1. 宽度百分比布局 + px布局. 先说一下，

矫情吗；*/ 2022年02月04日 03:09/ 0 赞/ 315 阅读

相关移动端常用字体

移动端常用字体 > body{ > font-family: -apple-system, BlinkMacSystemFont, "PingFang S

桃扇骨/ 2021年09月20日 00:30/ 0 赞/ 335 阅读

相关移动端布局介绍

移动端布局一、流式布局二、flex弹性布局三、less+rem+媒体查询布局四、媒体查询 1.语法 2.媒体类型

布满荆棘的人生/ 2021年09月07日 06:16/ 0 赞/ 482 阅读