如何网页制作布局,新手必须掌握的五种布局方法

一、静态布局 设计: 布局元素居中布局,设置width固定宽度。 二、流式布局 设计: 布局元素宽度使用百分比并使用min-width或max-width限制,高度使用vw并使用min-height或max-height限制使布局元素长宽比一致。 内容元素使用百分比。 使整体布局一致。流式布局代表:栅格系统。 三、自适应布局 设计: 使用媒体查询在不同断点适用不同静态布局。 四、响应式布局 设计:…

一、静态数据布局

网页的5种布局,你掌握了吗?

设计方案:

布局元素垂直居中布局,设定width固定不动总宽。

二、流式的布局

网页的5种布局,你掌握了吗?

设计方案:

布局元素总宽应用百分数从而使用min-width或max-width限制,相对高度使用vw从而使用min-height或max-height限定使布局元素宽高比一致。

具体内容元素应用百分数。

使总体布局一致。流式的布局代表:栅格系统。

三、响应式布局

网页的5种布局,你掌握了吗?

设计方案:

应用媒体查询在各个中断点可用不一样静态数据布局。

四、响应式网站布局

网页的5种布局,你掌握了吗?
网页的5种布局,你掌握了吗?
网页的5种布局,你掌握了吗?
网页的5种布局,你掌握了吗?

设计方案:

响应式和流式的布局的融合,响应式网站布局的代表:bootstrap。

五、弹力布局和rem/em布局

网页的5种布局,你掌握了吗?

设计方案:

弹力布局使用flex。

rem/em布局使用rem调整各元素尺寸大小字体大小,之上以750的设计图,1rem = 100px,适用挪动端网页页面。

汇总:

对需要手机端和pc端网站,能使用window.navigator.userAgent,分辨浏览服务平台,自动跳转挪动端网站或pc端的网站。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年10月10日 下午12:23
下一篇 2022年10月10日 下午12:24

相关推荐

  • 外卖配送平台有哪些,十大外卖平台排名

    如今整个餐饮外卖市场已达到千亿级别,市场规模正在不断扩大。但是外卖平台美团外卖、饿了么和百度外卖并没有对该行业形成垄断格局,单品类外卖、垂直细分外卖正在异军突起,相比更受资本市场欢迎。另外,随着市场规模的扩大,用户的品质标准越来越高,当下外卖市场需解决的最大问题是提升行业效率、升级服务品质。 第八名:易淘食 成立于2011年的易淘星空网络科技有限公司以本地生活服务业中的餐饮业为切入点,打造了以“易…

    2022年7月31日
    2300
  • 营销培训师绩效考核点,中国十大营销讲师排名

    21世纪最重要的是什么,是人才。肩负培养人才重任的培训工作者们,反思、总结、探索、向前。培训从业者本身,只有树立营销的观念,才能在企业中更好地推进培训。 营销的定义有很多种,科特勒的定义很简单:“发现消费者的需要,提供产品或服务,满足甚至超越消费者的需要”。 再看看培训,从培训需求调研、培训课程设计、培训实施到最终的培训评估,思维上的逻辑如此的相似。 这仅仅是我们探讨营销和培训相互关系的一个起点。…

    2022年6月16日
    880
  • 如何安装第三方软件,具体安装教程分享给大家

    618过后,许多用户都已经购入了心仪的智能电视。大家迫不及待使用电视的时候,非常想安装一些最好用不卡的软件,让电视发挥最大的功能。现在的智能电视的软件琳琅满目,到底该怎么挑选,才能找到操作难度小,成品效果佳的软件呢?下面给大家介绍当贝市场结合了多年经验为大家推荐TOP5,看看你都安装了吗? 第一款:南瓜电影 南瓜电影真的是一款良心软件,没有任何的广告,而且电影分类这方面是十分清晰,里面有海量的电影…

    2022年7月30日
    560
  • 联想thinkpadx1笔记本(联想ThinkPad X1 Carbon评测)

    经常有人向外媒NeoWin的资深编辑RichWoods咨询笔记本的选购事宜,而他推荐最多的就是联想的ThinkPadX1系列。如果你想要变型,驾驭各种情境需求,那么可以选择X1Yoga;如果你想要一款轻薄的超极本,那么X1Carbon往往是最佳选择。至于推荐的理由有很多,包括卓越的外观设计、强悍的性能输出、稳定和省心的系统和应用支持,优秀的DolbyVision屏幕等等。而在这些卖点基础上,201…

    2022年10月18日
    470
  • 微信删除的照片怎么恢复,很简单仅需五个步骤就恢复

    如何恢复手机微信删除的照片?作为全国销量处于领先地位的手机品牌,苹果手机的iOS系统起了很大的作用,系统优势表现之一是为了更好的保护用户的隐私,手机连接电脑时是无法轻易读取数据的,这也是如何恢复苹果手机删除的照片问题中需要考虑的一方面。 苹果手机误删照片如何恢复?由于iOS系统的特殊性,使用手机的小伙伴们应该知道手机照片删除后,手机内将保存删除照片的缓存碎片,在这些碎片没有被新的数据覆盖前,用户可…

    2022年7月23日
    460
  • 录视频软件哪个好,免费好用的录视频软件推荐

    闲暇时,不少人都会打开电脑看看电影视频,消磨时间,看到一些有趣的片断会有想要录制下来的冲动,一般都可以用视频录制软件实现,比较好用的就是迅捷屏幕录像工具了。 骑士是载体,将已经产生的光之瘟疫吸收,守梦人是屏障,防止污染从梦世界泄露,做了这一切的白王此时才发现,王国的统治已经一塌糊涂,为了封印辐光自己做了太多蠢事,疲惫的它猛然发现,瘟疫仍在蔓延,只是被大幅抑制。 白王消失了,或许是死在了王座上吧。失…

    2022年7月12日
    520
  • 淘宝做图片用什么软件(在线快速制图软件推荐)

    想开个网店,可是不会做图片,现学各种各样的软件制图,太难了,还有更简单的方法,大家可以直接在线用图片模板,现成的图片框架上,我们只要编辑修改图片上面的素材,替换图片,修改文字内容,调整文字大小,排列,就可能轻松制作淘宝、阿里或者其他网店的商品图片。一起来看看详细的制作过程。 工具、材料: 电脑 乔拓云网 电商图片框架模板 使用步骤: 1、打开电脑,在浏览器上面搜索乔拓云找到乔拓云的网站。 2、打开…

    2022年5月5日
    1310
  • 保险公司有哪些(保险公司十大排名)

    中国保险公司如下: 产险:人保股份、大地财产、出口信用、中华联合、太保财、平安财、华泰、天安、大众、华安、永安、太平保险、民安、中银保险、安信农业、永诚、安邦、信达财险。 寿险:国寿股份、太保寿、平安寿、新华、泰康、太平人寿、民生人寿、生命人寿、国寿存续、平安养老、合众人寿、太平养老、平安健康、人保健康、华夏人寿、正德人寿、信泰。

    2022年4月28日
    1060
  • 什么网络游戏最赚钱,最赚钱的网游排行榜

    大家好,这里是正惊游戏,我是正惊小弟! 8102年刚刚过去,这一年的游戏圈堪比神仙打架!大作销量连连破纪录,吸金套路也玩出新花样,游戏厂商赚的盆满钵翻!那么问题来了,2018年全球市场什么游戏最赚钱?小弟带大家了解一下…… 最赚钱的买断游戏——《荒野大镖客2》>>100亿人民币 要问去年哪款游戏评价最高,那必然是R星集全公司之力、2000人、耗时8年半、连马蛋都做到强清楚楚、烧掉至少40亿人民币、…

    2022年8月20日
    960
  • 美容院营销方案怎么写,美容院营销方案模板

    店里没顾客,顾客拓不来,拓来留不住,不知道怎么升单。 这是我们经常遇到的问题,可以说是老生常谈。 接下来我给到大家道远李华老师给我们自己学院制定过的10个方案。 其中包含了拓客方案、留客方案、升客方案以及出库存的方案,道远企业致力于帮助所有美业同仁,可以更好的经营管理,获利。同时这也是我们李华老师创办道远企业的初心动念! 接下来我们进入正题: 一、拓客方案 案例1: 19.9元可得: 1、价值19…

    2022年7月22日
    610

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信