一个简单的手机端页面布局

最新推荐文章于 2022-10-12 15:52:25 发布

转载最新推荐文章于 2022-10-12 15:52:25 发布 · 490 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/heyiming/p/7007640.html

本文介绍了一个简单的手机端页面布局方案，使用HTML和CSS实现响应式设计。页面包括头部(header)、主要内容区域(main)及底部/footer)三个部分。通过CSS设置弹性盒模型确保布局在不同设备上的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个简单的手机端页面的布局
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
        <div class="box">
            <div class="header"></div>
            <div class="main"></div>
            <div class="footer"></div>
        </div>
</body>
</html>

css

@import url("m_reset.css");
.wh(@w,@h){
  width:@w;
  height:@h;
}
.box{
  .wh(100%,100%);
  .b(green);
  display:-webkit-box;/*定义一个弹性盒*/
  -webkit-box-orient:vertical;/*将弹性盒设置为垂直*/}
.header{
  .wh(100%,43px);.b(yellow);
}
.main{
  -webkit-box-flex:1;/*内容总体分为一份*/
  overflow:scroll;/*滚动条*/
  .b(blue);

}
.footer{
  .wh(100%,43px);.b(red)

}

转载于:https://www.cnblogs.com/heyiming/p/7007640.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30945039

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

移动端页面布局方式，简单记录一下

weixin_55935744的博客

12-01

4344

目录1、视口2、多倍图3、移动端开发选择4、移动端技术解决方案5、移动端常见布局6、流式布局7、flex弹性布局①flex与传统布局比较②flex布局原理③常见父项属性8、rem适配布局①rem基础②媒体查询③Less基础④rem适配方案 1、视口视口就是浏览器显示页面=内容的屏幕区域视口分为布局视口、视觉视口、理想视口 ①三种视口介绍（1）布局视口（了解）用于早期的PC端页面在手机上显示的问题这个视口分辨率设置基本为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般

手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

weixin_33738555的博客

11-01

591

一年前笔者写了一篇《手机端页面自适应解决方案—rem布局》，意外受到很多朋友的关注和喜欢。但随着时间的推移，该方案已然过时，故为大家介绍一个目前我极力推荐使用的，更加完美的方案——rem布局（进阶版）另外：此方案仅适用于移动端web 文章底部常见问题说明第四条，笔者已给出一个相当便捷的解决方案，欢迎留言交流。（2017/9/9）...

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

移动端(手机端)页面自适应解决方案—rem布局篇

weixin_34320724的博客

11-30

674

移动端(手机端)页面自适应解决方案—rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340。结合网易、淘宝移动端首页html元素上的动态font-size属性、设计稿尺寸、前端与设计之间协作流程一般分为下面两种：一、网易做法：引入：页面开头处引入下面这段代码，用于动态计算font-size (function(doc, wi...

简单的移动端页面

weixin_30832405的博客

11-23

212

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 这句话里最重要的就是meta里面的句子它是为了告诉浏览器你要执行的是移...

手机端页面的布局

weixin_30823683的博客

07-20

209

页面布局用弹性盒加meta标签： <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 1.width=device-width //...

手机端页面自适应解决方案—rem布局

weixin_34194359的博客

10-13

345

2019独角兽企业重金招聘Python工程师标准>>> ...

手机端 物流页面自适应布局 .zip

06-25

总结来说，这款手机端物流页面模板利用了自适应布局和字数自适应技术，结合HTML5的先进特性，为用户提供了一个流畅、易读的物流追踪体验。无论是原生APP还是小程序，开发者只需稍作调整，就能快速集成到自己的项目中...

jquery mobile css3手机表单页面布局按钮样式

11-24

jQuery Mobile 是一个轻量级的框架，专为触摸设备设计，它提供了一套完整的组件和交互模式，包括表单、页面布局和按钮样式等。CSS3 则是新一代的CSS规范，引入了许多新的功能和样式效果，为网页设计提供了更多可能性...

jQuery手机端瀑布流布局代码.zip

07-11

在本案例中，我们讨论的是一个基于jQuery和HTML5实现的手机端瀑布流布局代码。首先，jQuery是一个轻量级的JavaScript库，它的出现简化了JavaScript的DOM操作，提供了丰富的插件和动画效果。在手机端瀑布流布局中，...

手机端分类列表页面源码.zip

12-14

本资源"手机端分类列表页面源码.zip"提供了一个简约而实用的手机端分类界面的源代码实现。下面将详细探讨相关知识点。 1. **HTML与CSS基础**： - HTML（HyperText Markup Language）是网页内容的结构标记语言，...

数据集一个混分的手机端页面

06-15

标题中的“数据集一个混分的手机端页面”暗示了这是一个关于手机端用户界面设计或者用户体验的数据集合，可能包含了各种不同设计元素、布局、颜色方案等的混合与分类。描述非常简洁，没有提供具体细节，但我们可以从...

网页上中下布局Demo源码

03-22

这是使用纯Html5和CSS3制作的网站页面布局Demo源码，布局风格为常见的上中（左、右）下布局。欢迎有需要的朋友下载查看。

手机端页面布局方案

ajian7774的博客

06-03

1595

布局方案：方案一：100%布局（高度固定，宽度自适应）（流式布局） 1、控件弹性 2、图片等比例 3、文字流式特点：手机越大，显示内容越多方案二：REM布局（等比缩放布局，整个页面等比例缩放） vw、vh单位：1vw、vh等于当前屏幕宽度、高度（逻辑宽度，window.innerWidth）的1%。转载于:https://www.cnblogs.com/Mr-...

移动端页面布局

guxiansheng1991的博客

06-22

540

一.使用rem1.宽度自适应:<script type="text/javascript"> (function (doc,win){ var docEl=doc.documentElement; console.log(docEl); var run=function () {

怎样设计一个简洁的手机网站

weixin_30726161的博客

11-15

173

“良好的交互设计关注人们所想，所做以及所感”——斯蒂芬·P·安德森Case 1: GMail Gmail手机版的成功之处在于邮件优先，其他界面功能置后。Case 2: Twitter Twitter的成功点在于：信息更新功能快速简便，还显示朋友的信息内容。Case 3: Facebook Facebook的成功点在于：选择了用户在“走”的时候最需要的功能，简洁的互动界面提供了其他的次要功能...

手机端web网页布局经验总结（持续更新中）

weixin_30770495的博客

06-11

259

1. 首先，在网页代码的头部，加入一行viewport元标签，我们一般是不让用户手动的去改变页面的大小的。 <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width）...

利用rem进行移动端页面布局

qq_26780317的博客

10-16

503

前言：在移动端进行页面布局的时候，使用rem元素，可以适应不同手机屏幕尺寸下的情况，进行适配。写一个rem.js文件引入，样式中涉及高度、尺寸、字号等单位时，直接使用rem即可，简单方便快捷。一、rem.js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orient...

flex-手机端主页布局实例---构造页面结构

weixin_34033624的博客

03-03

541

Flexbox页面布局实例，成本效果图如下，源码下载在最下面。源码下载：https://pan.baidu.com/s/18o5hVuWtflUpgvMk3LzQ5w 提取码：wiyc样本地址：http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E9%9D%A2-Flexbox/%E5%9F%BA%E6%9C%AC%E...

手机端常见的布局方案

weixin_64974855的博客

10-12

348

手机端常见的布局方案

手机端获取验证码页面特效：jQuery实现

描述中的 HTML 代码片段展示了一个简单的页面布局，其中包含用于生成“耳朵”和“眉毛”的元素，可能用于创建一个卡通形象或拟人化的页面元素。通常，在手机端页面特效中使用这样的代码片段是为了增强页面的视觉吸引...