h5页面布局

最新推荐文章于 2024-04-23 02:00:49 发布
最新推荐文章于 2024-04-23 02:00:49 发布
阅读量6.7k 收藏 44
点赞数 5
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/summer_na/article/details/87975692
版权

一、div撑满整个屏幕

1、绝对定位

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      position: absolute;
      width: 200px;
      height: 100%;
      background: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="main">
  </div>
</body>

 

2、设置html、body的高度

<style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .main {
      width: 200px;
      height: 100%;
      background: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="main">
  </div>
</body>

最后的结果：

二、左右布局（左固定，右自适应）

1、 float + margin布局

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .left {
      float: left;
      width: 200px;
      height: 100%;
      background: yellowgreen;
    }
    .right {
      height: 100%;
      margin-left: 200px;
      background: orange;
    }
  </style>
</head>
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

2、position + margin

<style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .wrap {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .left {
      position: absolute;
      width: 200px;
      height: 100%;
      background: yellowgreen;
    }
    .right {
      height: 100%;
      margin-left: 200px;
      background: orange;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

3、flex伸缩盒

<style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .wrap {
      display: flex;
      display: -webkit-flex;
      width: 100%;
      height: 100%;
    }
    .left {
      width: 200px;
      background: greenyellow;
    }
    .right {
      flex-grow:1;
      -webkit-flex-grow:1;
      background: orange;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

三、左、中、右布局（两侧定宽，中间自适应）

1、float + margin

<style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .wrap {
      width: 100%;
      height: 100%;
    }
    .left {
      float: left;
      width: 200px;
      height: 100%;
      background: greenyellow;
    }
    .right {
      float: right;
      width: 200px;
      height: 100%;
      background: orchid;
    }
    .middle {
      height: 100%;
      margin-left: 200px;
      margin-right: 200px;
      background: orange;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
  </div>
</body>

2、position + margin

<style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .wrap {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .left {
      position: absolute;
      left: 0px;
      width: 200px;
      height: 100%;
      background: greenyellow;
    }
    .right {
      position: absolute;
      right: 0px;
      width: 200px;
      height: 100%;
      background: orchid;
    }
    .middle {
      height: 100%;
      margin-left: 200px;
      margin-right: 200px;
      background: orange;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
  </div>
</body>

3、flex伸缩盒

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      width: 100%;
      height: 100%;
    }
    .wrap {
      height: 100%;
      display: flex;
      display: -webkit-flex;
    }
    .left {
      height: 100%;
      width: 200px;
      background-color: red;
    }
    .right {
      height: 100%;
      width: 200px;
      background-color: green;
    }
    .middle {
      height: 100%;
      flex-grow: 1;
      -webkit-flex-grow: 1;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</body>

四、上下布局

1、position: absolute

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    .wrap {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .top {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 200px;
      background: red;
    }
    .content {
      width: 100%;
      height: 100%;
      background: green;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="top"></div>
    <div class="content"></div>
  </div>
</body>

王娜娜的博客
关注
  • 5
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5手机端页面布局,移动端H5常见的布局方式有哪些
weixin_39880328的博客
06-07 2494
随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等很不好适配移动端设备屏幕尺寸非常多，碎片化严重，Android和苹果设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等一般的电脑端的页面布局在手机上无法完全适应，那么如何让一...
基本网页布局（html，css）
qq_61877169的博客
03-03 375
一.利用盒子模型和浮动 当盒子宽度和浏览器一样宽时，不用设置宽度。 二. 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
灰常好看的H5登录界面
11-27
H5登录界面 免费下载亲测可用， 谢谢支持。
H5中常用的布局方式
m0_60821938的博客
02-20 2282
浮动布局和弹性布局的简单使用。
H5+css : 360商城的首页布局模拟
GeiWo_YunCheYao的博客
12-19 308
H5+css : 360商城的首页布局模拟 因为360商城页面过长，商品分类页面只选择了一个页面做一下实现。且只做了基本的布局和鼠标悬停效果
H5基础_4_移动端布局
jiafeitutu的博客
05-27 512
移动端布局初级知识
总结h5布局方式
a1852384503的博客
04-14 806
如图：由一个个div进行嵌套，形如一个盒子一样需要用到一下标签padding ---- 内边距------内容距离边框的距离 上右下左margin ------外边距 ------ 边框距离页面的距离。
【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + MongoDB)
白洞，白色的明天在等着我们
08-12 2233
H5 项目基于 Web 技术，可以在智能手机、平板电脑等移动设备上的浏览器中运行，无需下载和安装任何应用程序，且H5 项目的代码和资源可以集中在服务器端进行管理，只需更新服务器上的代码，即可让所有顾客访问到最新的系统版本。本系列将以肯德基自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。项目代码正在gitee同步更新中，项目地址：https://gitee.com/airheaven/kfg-vue，学习前请大家给个star哦。
HTML5+CSS3学习笔记（九）前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
Yeee_F
03-30 3090
前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
h5的div布局详解
热门推荐
aibai666的博客
12-24 1万+
在实际的网页开发中，网页的整体部分一般是由div标签来进行布局的。那么在使用div布局之前就要了解div的属性 div是块级元素 块级元素在页面中的独占一行 默认情况下的高度由里面的内容决定。由于块级元素独占一整行 那么使用div进行布局的话 div和div之间是上下排列的 还有块级元素之间不仅能套入行内元素 还可以嵌入块级元素 但在嵌入块级元素的时候 由于块级元素的默认属性 它们之间是呈现上下排列的 所以就需要使用浮动 如图所示，该页面的整体结构的搭建是使用div搭建的。主要有一个大的整体的..
H5页面设计商城首页示例源码，简单浮动布局
04-27
H5页面设计商城首页示例源码，简单浮动布局H5页面设计商城首页示例源码，简单浮动布局
vue写h5页面的方法总结
11-28
下面就是小编带给大家的如何用vue写h5页面方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。 1、当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么...
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
之前我们在使用vue进行 h5 表单录入的过程中，遇到了Android软键盘弹出，覆盖 h5页面 输入框 问题，在此进行回顾并分享给大家: 系统：Android 条件：当输入框在可视区底部或者偏下的位置 触发条件：输入框获取焦点，...
详解移动端h5页面根据屏幕适配的四种方案
11-21
方法一：引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案：https://github.com/amfe/lib-flexible（此处可点击） 淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持...
Web前端开发之HTML_3
最新发布
zx1026409886的博客
04-23 857
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
前端开发攻略---合并表格单元格，表格内嵌套表格实现手风琴效果。
nibabaoo的博客
04-18 496
合并表格单元格，表格内嵌套表格实现手风琴效果。
HTML 入门
lvshihao_的博客
04-16 1095
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
HTML中的页面可见性
小卡酷谋的博客
04-22 347
所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。里页面可见性接口就提供给了程序员一个方法，让他们使用。用户是否去看别的网站了？更多有关页面可见性的内容可以参阅。"页面切换了~目前不可见"
数据可视化-ECharts Html项目实战（13）
qq_49513817的博客
04-17 2808
今天的文章，我会以鼠标左键触发为例带着大家学习ECharts特殊图表设置中组件交互的行为事件。希望你能在本篇文章中有所收获。希望我的文章能帮助到正在学习的你，也欢迎各位来本篇文章下一起交流学习，共同进步。
h5页面管理系统源码
11-21
h5页面管理系统可以理解为一种web页面开发和管理工具，它能够帮助用户轻松地创建、编辑和发布h5页面。其源码通常包括前端和后端两部分。 前端部分主要包括HTML、CSS和JavaScript等文件，用于构建页面的布局、样式和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值