移动端常用布局代码实例

最新推荐文章于 2021-12-31 11:25:19 发布

转载最新推荐文章于 2021-12-31 11:25:19 发布 · 394 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/YooHoeh/p/10465731.html

代码

<!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>

效果图

在这里插入图片描述

转载于:https://www.cnblogs.com/YooHoeh/p/10465731.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34319374

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

移动WEB开发之 flex布局----携程网移动端首页案例

不爱吃菜的菜菜的博客

05-11

2295

前端学习用flex布局来写携程首页（因为携程和老师讲的版本不一样，我就用了很多关于现在携程的图片来替代）

HTML5移动端实战源码

10-02

移动端实战系列课程源代码，主要技术css3，html5，原生js，提供了很实用的小案例

参与评论您还未登录，请先登录后发表或查看评论

前端小白移动端布局总结（含四大实战项目）及笔记

01-08

前言眼看着做两顿凉皮的功夫，2020第一季度就要过完了。过去的三个月，好像经历了很多，又好像什么都没留下。这种茫然的背后，是我们特殊时期害怕被淘汰的一种自我审视。看到百度数据显示，疫情期间日均超3.5亿人次搜索、浏览教育相关的内容，同比上涨86%。在这个人人都准备抓住机会弯道超车的时期，你准备学点什么？现在就冲！和博主一起学前端吧。截至发表博文前的最新数据：那么我们正式步入正题吧，为了方便大家查阅，我把页面效果，部分源代码，以及我整理的学习笔记，以文本和xmind的格式导出了，如有需要，可以私信。 1.移动端基础浏览器现状国内的UC和QQ等手机浏览器都是根据webkit修

移动端布局-实例

weixin_30823833的博客

06-26

229

1.rem布局案例 (demo） /*媒体查询*/ @media screen and (min-width:320px){ html{font-size:10px;} } @media screen and (min-width:360px){ html{font-size:11.25px;} } @media screen and...

移动端开发-布局+框架+案例篇

weixin_34320159的博客

11-14

675

###模板引擎 1.ES6模板字符串 ES6中：${JS代码} //ES6中需要两个过程 : //1.定义模板 var htmlStr=`<p>${1+2}</p>`; //2.手动将模板放到指定元素中 $(".box").html(htmlStr);复制代码2.EJS模板 //EJS 四步曲 //1.在HTML结构中定义容器 ...

写移动端案例

baidu_41846158的博客

03-26

290

方案：vw+rem 使用vw是为了让元素的大小能受到屏幕大小的变化而控制，让整体使用rem单位，跟随html中font-size的值变化，达到良好的适配效果。注： vw是视口的占比，如：width：100vw意为宽度为视口的100%;width:50vw意为宽度为视口的50% Rem是相对大小单位，相对于根元素html的font-size大小，默认状态1rem=16px，若设置html{font...

移动端REM布局与ViewportVW布局的实例运用

08-10

两种常用的解决方案是REM（Root Em）布局和Viewport Width（VW）布局。这篇文章将深入探讨这两种布局方式，并通过实例来展示它们在JavaScript和CSS中的应用。 **一、REM布局** 1. **REM（Root Em）介绍** REM是以...

移动端表单布局与正则表达式验证技巧

### 移动端布局移动互联网的快速发展推动了前端技术的变革，特别是对于移动设备用户界面的适配和优化，移动端布局成为前端开发者必须掌握的技能之一。移动端布局主要关注点是屏幕适配，它需要在不同尺寸的设备上...

移动端 uni-app全套成熟的实例资源

最新发布

04-15

资源包中提供了大量基于CSS和JavaScript的代码实例，以及一些使用TypeScript编写的示例。这些示例不仅可以作为开发中的参考，还可以帮助开发者加深对这些技术的理解。组合式API是VUE3引入的新特性，它通过定义组件...

移动端rem布局技术演示：实现响应式设计

资源摘要信息:"remLayout:移动端基于rem布局的demo页" 知识点: 1. rem布局的基本概念 rem布局是Web前端开发中一...通过具体的代码示例和视觉效果展示，开发者可以深入理解rem布局在移动端开发中的重要性和应用方式。

Web 人员管理系统的 移动端程序开发例子

08-06

代码使用了 Jquery mobile 框架以一个例子说明了移动端应用程序应用

移动端布局全套解决方案（附代码）

weixin_34072857的博客

11-15

1119

今天上午发了一篇文章是关于微信h5支付的，也说了楼主最近在做移动端，之前也做过移动端的一些单页面，这次就整理一下笔记以及遇到的问题，欢迎交流。 1.html部分 移动端需要禁止用户缩放，否则体验非常差劲，话不多说，上头部代码。(来源百度) <meta charset="UTF-8"> <meta name="viewport" content="width=d...

flex-常见移动端布局

IT子也

03-06

1199

最近在开发一个微信小程序的项目，用flex布局那叫一个爽，这里记录一下心得。这里不再累诉flex的基础知识了(可以到以下链接学习，网上有很多) http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/494230cd4a72 1、九宫格 <style type="text...

前端(二）移动端布局实例及常用css列表-学习笔记整理

码python的Vinsmoke

05-10

1149

移动端页面布局需求：以如下天天生鲜首页效果图为例，制作相应的静态页面项目目录如下： ├─css ├─images ├─js └─index.html 目录结构说明： css中用于存放相应的css文件，通过link标签引入到html页面 <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/main.css">

html5移动端嵌套列表样式,移动端排版和弹性盒布局以及scss的使用

weixin_35379520的博客

06-30

756

1.首先meta标签一.移动端的单位:绝对单位 px相对单位 rem em浏览器默认的字体大小 16px 那么 1em=16pxem具有继承性继承自直接父类所以说在移动端很少用rem 有一个统一的标准它继承自html16px==1rem用rem来表示20像素可以给html的字体大小设置为10px 10px==1rem 20px==2rem 30px==3remhtm...

移动端布局--适配

Memory_888的博客

12-31

511

移动端适配布局...百分比、弹性盒布局、rem布局、meta标签

html如何移动整体列表,移动端H5各种各样的列表的制作方法(一)

weixin_28687251的博客

06-03

546

前言随着移动互联网的发展,大量前端人员从pc端转移动端.而很多PC端的前端经验并不适用于移动端.前几日我撰写的一篇博文《移动端H5的一些基本知识点总结》获得了大量的点击量.因此,FungLeo决定,在接下来的时间里,我将围绕移动端,展开一系列的教程.本系列文章的CSS部分,将全部采用SASS语法撰写.如果您不会SASS,建议阅读相关教程,包括本人的《CSS预编译技术之SASS学习经验小结》教程.本...

移动端html图标代码,移动端H5各种各样的列表的制作方法(三)

weixin_35588980的博客

06-04

717

前情回顾在上一篇博文《移动端各种各样的列表的制作方法(二)》中,我们再通过两个DEMO,演示了一下在移动端H5中更多需求的列表制作.不过,看起来,好像还是蛮简单的.这一章,接着深入.如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.带小图标的列表上面两章,我们做了一些普通的列表.而在移动端H5中,我们经常会做一行一个小图标的列表.这个DEM...