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

一、静态布局 设计: 布局元素居中布局,设置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

相关推荐

  • 创业故事分享,看看他是如何创业成功的

    写了这么长时间的自媒体文章,很久没有和大家聊创业的事情了。创业是一件很艰难的事情,但是人人都渴望创业成功。而我的创业经历,似乎可以给大家作为参考,这篇文章就把我的创业故事分享给大家,还请各位朋友多多指教。   说起创业,最初有创业的想法,还是在2007年,那时的我刚刚读大学,对学校、社会都不是很了解,而那时创业的想法也仅仅只是想法,想着自己以后能够创建一个多么大的企业,过着多么富足的生活。有名誉,…

    2022年5月25日
    750
  • 微信的聊天记录怎么备份,微信聊天记录备份云端技巧

    微信聊天记录备份方法,实用教学!微信聊天记录中有许多的重要信息,在日常生活中要注重微信的日常备份,才能避免微信数据丢失的带来的麻烦。下面就为大家带来具体的备份方法! 微信自带备份工具 打开手机微信→我→设置→聊天→聊天记录备份与迁移→有”迁移聊天记录到另一台设备”备份聊天记录到电脑“两个选项。 卓师兄备份 备份微信数据这里以备份【聊天记录】为例子。推荐一个好用的安卓软件,卓师兄: 运行卓师兄,点击…

    2022年7月23日
    710
  • 新手投资理财怎么入手,适合初学者的理财方式介绍

    理财到底有多重要?一旦问到这个问题,估计很多人要么是敬而远之,要么是摇头晃脑。 我发现,身边但凡没接触过投资的朋友,都会觉得理财一件高风险,难搞懂的事情。 一是觉得门槛高,资金和自己理财知识不足以去投资理财。二是觉得理财风险太大,怕亏钱。 所以即使看着有人赚钱,也只是眼红罢了,迟迟不敢踏出理财的第一步。 我身边就有一个朋友小辉,和我说理财说了有一年多了,迟迟不见他下手,但今年他终于肯下手了,在他接…

    2022年6月4日
    630
  • 宝宝蚊香液什么牌子好,看这4款婴幼儿驱蚊液横评

    【PCbaby有品评测】一眨眼,春天已接近尾声,夏天开始悄咪咪地走近。俗话说的好,夏日有三宝:空调、西瓜……花露水。没错,每到夏天,蚊子就成了过不去的坎儿。特别是家有小宝贝的,更是要三百六十度无死角的家庭防蚊大作战。毕竟宝宝娇嫩的皮肤被咬上一口,又得肿上好多天了。蚊帐、蚊香、防蚊贴、驱蚊喷雾……防蚊产品那么多,到底who才是适合宝宝的驱蚊神器呢?   别急,PCbaby有品评测…

    2022年9月29日
    370
  • 国产大飞机背后的中国黑科技(院士连发动机一起来)

    距离国产大飞机投入使用只有一步之遥了。近期,中国商飞召开2022年干部大会,在会议上表示,“2022年,大飞机由研制阶段逐步转入产业化阶段。”。而在近日的一档科普节目中,研究了一辈子航空材料的中科院院士曹春晓也透露了一个信息:不仅C919快来了,以后还将换上国产航空发动机! 这是中国人梦想了50年,半个世纪的飞机梦,然而从几年前频频发布准备交付,到现在多次跳票,依然没有面世,C919到底怎么了?是…

    2022年5月7日
    1120
  • 社会主义国家有哪些,盘点全球仅存的五个社会主义国家

    引言 一般情况下,一个大国轰然崩塌,身处该国体系中的众多小国也会受到牵连,纵观世界历史,无论何时何地,国家形势都是这样进行转变,毕竟作为一个阵营中的领导者,自身难保的情况下,又怎么保护其他成员。 事实上,这样的案例不在少数,比如近代中国日趋没落后,本国领土受到侵略时,曾经的多个藩属国也难以幸免,这就是东方体系的崩溃;又如上世纪末苏联解体之后,联盟内众多加盟国被迫独立,深陷发展泥潭之中。这是国际上常…

    2022年9月17日
    740
  • 青轴键盘推荐(分享三款平价好用的键盘)

    想弄清楚青轴、黑轴、红轴、茶轴四种机械键盘手感的区别,首先需要普及三个概念:段落感、键程、压力值。 段落感就是说按下去的感觉是不是明显!都用过按压式圆珠笔吧,就是圆珠笔按下的那种突然咔嚓一下的感觉,就是那么强烈。 键程的话,就是按下去到触点的距离。说白了,就是按下去的反应速度、键程越短,反应越快、越灵敏。线程越长,反应就慢点,但是更容易控制。 压力值,就是按下去要用多大的劲儿。 影响机械键盘手感的…

    2022年10月23日
    430
  • 在线客服系统有哪些好用,客服系统的功能优势

    这是个人工智能全面爆发的时代,智能机器人、智能家居、智能客服、智能外呼等行业都如雨后春笋般涌现,并快速的渗入到各个行业中,发挥着强大的作用。 与此同时在线客服系统的重要性也愈加明显,在这个消费升级的信息化时代,客服中心的信息传递功能也越来越重要。 首先我们来分析一下网站在线客服系统应该具有哪些优势: 1.比起人工客服需要下班和休息,智能机器人能够保证7*24小时在线,解决人工逐条回答的大量重复问题…

    2022年7月5日
    530
  • 挣钱的小本生意有哪些(适合穷人快速挣钱的生意)

    对于生意人来说,都在谋求一些赚钱稳、来钱快的项目,特别是做小本生意的人更是如此,都是站在井口等水喝的人。回答这个粉丝的问题,现在市场上,做什么小本生意来钱快呢?针对目前市场情况,我这里推荐几个供参考。 早餐手推车 大家注意一下就会发现,在日常生活中,会发现大街小巷中都有各种推车生意,其中最受大众欢迎的则是早点铺以及各种饼。如果说这是小本生意是非常不为过的,基本上客单价都是几块钱一个。也许很多人都觉…

    2022年9月2日
    670
  • 产品促销方法有哪些,常用的15种产品促销手段

    【促销方法:15个最火的产品促销方法,你用过几招?】1、附加值促销;2、回报促销;3、指定促销;4、产品特性促销;5、组合促销;6、临界点促销

    2022年7月18日
    550

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信