移动端常用布局代码实例

刺骨的言语ヽ痛彻心扉 2022-03-16 16:09 256阅读 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 条评论，256人围观）

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

相关阅读

相关移动端rem布局

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

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

相关移动端常用事件

> touchstart 与 click touchstart : 触摸开始事件，当手指接触屏幕上的一刹那，触发该事件。 click: PC端点击事件，在移动端也可以使用

小灰灰/ 2023年06月14日 04:10/ 0 赞/ 41 阅读

相关移动端开发常用布局2-弹性布局详细讲解

各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍

雨点打透心脏的1/2处/ 2023年02月24日 03:53/ 0 赞/ 4 阅读

相关移动端布局 rem

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

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

相关移动端布局总结

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

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

相关移动端页面布局

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

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

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

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

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

相关关于移动端布局

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

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

相关移动端常用字体

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

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

相关移动端布局介绍

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

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