学习
实践
活动
专区
工具
TVP
写文章

手机网页布局经验总结

这个属性是禁止用户选择文本,对安卓和苹果都是有效的 浅谈一下box-sizing 这个属性可能大家比较陌生吧, 因为这个属性是是CSS3中新加入的,为了实现一种我们平时 比较难实现的效果设定的属性 例如:我们在手机布局的时候 ,一般我们是采用百分比来对网页进行自适应的处理,也就是我们所说的自适应布局,我们可能有时会想要中效果就是,在左右内缩加上1px div{ padding-left:1px; padding-right :1px; } 但是采用自适应布局会出现把屏幕撑开,从而出现横向滚动条的效果,这个是我们在手机网页中开发的大忌,所以这个时候box-sizing就解决了我们的问题,具体的文法详见http://www.w3school.com.cn webkit-scrollbar{ opacity: 0; } 除此之外,还有像HTML5 中的API和重力感应事件等等的新特性的加入,使得HTML5网页的开发变得越发的多功能性,但是这些在今天的布局上局不讲了

1K60

CSS 7:网页布局(传统布局,flex布局布局套路)

传统布局 一栏、两栏、三栏布局 一栏布局 特点:页面内容居中,宽度固定 实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-left 圣杯布局和双飞翼布局 是老的布局方式,2012年以前流行,现在已不流行,但是面试可能会考察到,所以记录一下 why it? 如果用flex实现三栏布局,且main在dom次序最上面,那么只需要contain使用flex布局,mainflex:1;order:2两边固定宽度即可 使用flex写几个简单布局 ? 1.flex手机页面基本布局 ? 做布局的时候,要分清布局块和内容块!布局块DIV只用来布局,内容快DIV只用来添加网页内容。bootstrop就用栅格系统做布局块,内容块是自己设计的独立元素。 例子:简单的头部导航布局 ?

1.4K41
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。 但在这里实现起来还是有一些区别的 【圣杯布局】 ? head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>圣杯布局 DEMO 听说双飞翼布局是玉伯大大提出来的,始于淘宝UED 如果把三栏布局比作一只大鸟,可以把main看成是鸟的身体,sub和extra则是鸟的翅膀。 这个布局的实现思路是,先把最重要的身体部分放好,然后再将翅膀移动到适当的地方. 其实跟上边的圣杯布局差不多的,当然也可以改动一下(自己想想有哪些不同吧) 恩,这里有一只鸟~ 左翅sub有200px,右翅extra..220px..

    35210

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    原文:静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别 静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。 自适应布局(Adaptive Layout) 自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 响应式几乎已经成为优秀页面布局的标准。 1、布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。 如何实现响应式布局:折腾响应式布局设计,应运而生的web页面响应布局 弹性布局(rem/em布局) 参考:流布局与响应式网页设计有什么区别?

    5.3K33

    CSS布局(三) 布局模型

    布局模型 在网页中,元素有三种布局模型: 1、流动模型(Flow) 默认的 2、浮动模型 (Float) 3、层模型(Layer) 1、流动模型(Flow) 流动(Flow)模型是默认的网页布局模式。 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。 浮动模型 (Float) 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动 div{float:left;}  div{float:right;} 可以为不同的div设置不同的浮动方式来布局 绝对定位使元素脱离文档流,因此不占据空间 ,普通文档流中元素的布局就当绝对定位的元素不存在时一样,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

    57671

    Android布局之表格布局

    表格布局是以行和列的形式来对控件进行管理的,所以我们来说说表格布局对行和列的确定 TableLayout的行数 在开发中由我们来直接指定,就是说有多少个TableRow对象或view控件就会有多少行。 TableLayout可设置的属性 表格布局可以设置的属性有两种:全局属性、单元格属性。 -- 第3个TableLayout,使用可伸展特性布局--> <TextView android:text="第三个表格:非均匀<em>布局</em>,控件长度根据内容伸缩" android 例如,学生信息这样的表,相对简单,如果用别的布局的话就比较麻烦信息也比较杂乱。 缺点: 1、 标签结构多,代码复杂 2、 表格布局,不利于搜索引擎抓取信息 这就是Android常用布局中的表格布局啦~ 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn

    57620

    Flex布局弹性布局模型

    Flex布局简介 Flex布局是一种浏览器提倡的布局模型 Flex布局的网页更简单、灵活 避免浮动脱标的问题 兼容性搜索:https://caniuse.com/ Flex布局模型构成 作用: 基于Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生。 Flex布局非常适合结构化布局。 设置方式:父元素添加 display:flex,子元素可以自带的挤压或拉伸。 因为 Flex布局中都是是弹性盒子,所以伸缩比的好处是根据父级盒子的变化而变化,当浏览器窗口发生变化后,弹性盒子的尺寸也会随着父级容器变化后剩余的尺寸去继续计算。 此文是看完B站视频自己做的简单总结,内容较少,很多属性及语法也没进行过多介绍,更没有实例演示,推荐阅读阮一峰大佬的Flex布局教程: Flex 布局教程:语法篇 Flex 布局教程:实例篇

    8410

    流体布局、响应式布局

    PC及移动端页面适配方法 设备屏幕有多种不同的分辨率,页面适配方案有如下几种: 1、全适配:响应式布局+流体布局 2、移动端适配: 流体布局+少量响应式 基于rem的布局 下面先来看看一个布局的问题 下面来看看流体布局。 流体布局 流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 响应式布局 响应式布局就是使用媒体查询的方式,通过查询浏览器宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局。 按照上面的流体布局,当缩放浏览器的时候,这四个div就会被压缩比较窄。例如,如果是手机APP,那么就更加窄小了。 那么下面可以设置一下响应式布局。 ?

    94430

    Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局

    标题图 在Android中提供了几个常用布局: LinearLayout线性布局 RelativeLayout相对布局 FrameLayout帧布局 AbsoluteLayout绝对布局 TableLayout 表格布局 GridLayout网格布局 ---- TableLayout表格布局 ? TableLayout表格布局.png TableLayout的介绍 TableLayout是将子类向分别排列成行和列的布局视图容器,TableLayout是由许多TableRow对象组成的,表格布局以行列的形式管理子控件 GridLayout网格布局 GridLayout网格布局是在Android 4.0以后引入的一种新的布局模式,和表格布局是有点类似的,但比表格布局的好,功能也是很强大的,它可以设置布局有多少行和有多少列 结语 本文主要讲解 Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局

    1.3K20

    css经典布局——圣杯布局

    圣杯布局和双飞翼布局一直是前端面试的高频考点,圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。 圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定。 中间的container是一个三栏布局。 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。 中间的container是一个三栏布局。 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 圣杯布局的三种实现 【1】浮动 先定义好header和footer的样式,使之横向撑满。

    19110

    线性布局布局的组合

    Show layout bounds 显示布局格子,当你看到一个应用有很棒的界面效果,想知道它是怎么布局的?开启这个功能即可。 (除非自己重绘实现自定义View, 一般复杂布局也不会这么干) 8. Force RTL layout direction 强制RTL布局,RTL也就是Right To Left,阿拉伯国家一般有这种文化,类似古时候的中国,文字从右往左读,包括界面布局也是从右往左的,感觉操作习惯都跟我们是镜像的 horizontal水平方向,水平方向如果空间不足,控件会被挤出屏幕 控件之间的分割线其实就是一个View对象 <View/>,设置高度1dip,background黑色 Android4.0 开发者选项里面有个显示布局边界 ,可以显示出布局的界线 测试代码: <?

    29030

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 腾讯会议

      腾讯会议

      腾讯会议(TM)是一款基于腾讯21年音视频通讯经验积累的高清流畅、便捷易用、安全可靠的云视频会议产品,让您随时随地高效开会,全方位满足不同场景下的会议需求。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券