流式布局-原子风格

最新推荐文章于 2024-10-26 08:30:35 发布
最新推荐文章于 2024-10-26 08:30:35 发布
阅读量498 收藏 2
点赞数
分类专栏： 有趣的javascript 文章标签： html5 js css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45776447/article/details/111407859
版权

流式布局-原子风格

一个有趣的流式布局

具体参考poki game的官网设计，看到的第一眼，就感觉到与游戏图标如此般配
并且自适应，于是就仿写吧，看了一下其逻辑，采用grid布局实现，但又估量了一下自己的grid水平，还是老老实实用js吧！
在这里插入图片描述

布局分析

  • 父盒子与子盒子都与原子有一定比例关系，父盒子的宽度由可容纳原子决定
  • grid 布局有填充的效果，但是你需要控制子元素的宽度和高度，面对大量的子元素需要借助js进行逻辑处理，然后向盒子中填充子元素
  • 也可以通过绝对定位实现，控制每一个子元素的宽高以及定位，其排布逻辑实现后也可以借助grid进行布局

JS 实现

效果图在这里插入图片描述

最低0.47元/天 解锁文章
Java高频面试基础问题与知识点整理
张彦峰的博客
11-04 171万+
Java高频面试知识点总结：覆盖高频基础知识考点+高频集合知识点深入分析+高频多线程与并发编程面试题汇总+其他扩展考察等。
最强大的布局方案——网格Grid布局万字详解
热门推荐
郊眠寺
12-17 1万+
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。移动端浏览器：*) 从上图我们可以看出第一列的宽度为150px，第二列和第三列以1：2的比例均分了剩余空间) 如上图所示，第三列的宽度最小不小于10px，最大不超过50px。
原子布局：布局组成的物理表示形式，用于在React中创建声明式响应式布局
01-30
原子布局是React的空间分布库。 它使用定义布局区域并将其渲染为React组件。 这种模式鼓励元素和间距的分离，防止上下文实现并促进布局的维护。 import React from ' react ' import { Composition } from ' atomic-layout ' // Define layout areas: visual representation // of what composes a layout, detached from // what components are actually rendered. const areasMobile = ` thumbnail header footer ` // Declare responsive changes of your areas. // Operate in two dimensions, remove areas // or introduce new ones. const areasTablet = ` thumbnail header thumbnai
使用css3的网格(Grid),做出瀑布流式布局
qq_40544291的博客
03-09 5012
效果如下: 关于网格grid,就看大神阮一峰的Grid 网格布局教程 效果的代码如下: html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
使用CSS Grid布局实现网格的流动
09-25
主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
css 瀑布流布局_grid实现圣杯布局和瀑布流的实现
weixin_39999532的博客
11-29 737
上周五的职业技能等级认定考试，社保局弄的一个考试，强制都必须参加，我的是四级试题，大佬他们都是三级高级水准的题目。上午理论，下午上机实操，其中上机题是完成一个静态页面。因为周末帮洋仔写项目代码还有打球，所以没时间码字，正好现在得空整理总结一下。题目如下，其实前端基础不扎实的可以拿这个练练手。实现效果如下：‍圣杯布局是特指三行布局，头尾固定，中间内容分三列，左右固定，中心自适应。这里布局没...
Web响应式设计———1、Grid布局
Violetto_Yan的博客
07-21 592
流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样，页面上的元素可以根据屏幕宽度自动调整大小，适应不同设备和分辨率。//跨越三行（纵向）grid-column: span 2;网格之间间距 gap: 30px;grid-column-gap:列间距。利用fr分成等份，根据屏幕大小自适应。把被合并的注释掉，样式写在第一个上面。grid-row-gap:行间距。//网格区域 跨行/跨列。跨越两列（横向合并）
css布局 之 流式布局-原子风格
12-19
在“css布局 之 流式布局-原子风格”这个主题中，我们将深入探讨如何利用JavaScript来模拟Poki Game官网的流式布局，尽管该官网原版使用了更为灵活但可能更复杂的CSS Grid布局。 首先，我们需要理解流式布局的基本...
实现流式布局的新思路：原子风格JavaScript方法
资源摘要信息:"CSS布局之流式布局-原子风格" CSS布局是前端开发中至关重要的技能之一，而流式布局（Fluid Layout）是其中应用广泛的布局方式。流式布局，又称自适应布局或液体布局，是一种网页布局方式，它的特点是...
resume-plain-css
03-07
1. **响应式设计** - 为了确保简历在不同设备上都能良好显示，可能会使用媒体查询 (media queries) 和流式布局 (flexbox 或 grid)。 2. **CSS3 属性** - 使用 CSS3 的新特性，如渐变 (gradients)、阴影 (shadows)、...
前端布局之grid布局
qq_35485206的博客
10-10 1176
Grid布局优点二维布局，可以同时设定x轴与y轴缺点兼容性差一点，还有就是，复杂基本语法登录后复制 /* html */ <div class="container"> <div class="item item-1"></div> <div class="item i...
grid布局看这一篇就够了
qq_46048008的博客
08-20 2668
grid布局即网格布局，目前唯一一种CSS二维布局，是最强大的的CSS布局方案。它可以轻松实现以下布局，这是flex布局无法一次性解决的。
常见的页面布局
Duan_Super的博客
02-27 1万+
1. T形布局这个是我们比较常见的布局，其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。。由于网页太长了。。没有截取底部。image.png2. 三栏型布局国字型布局下最上面是网站的标题以及横幅广告条，接下来是网站的主要内寄，左右分列一些小条内容，中问是主要部分，与左右一起罗列到底，最下方是网站的一些基本信息、联系方式、版权声明等im...
Grid布局
最新发布
qq_74114417的博客
10-26 9450
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
实现流式布局的方法
BANaanaa的博客
09-14 967
看看如何实现流式布局
Grid布局简单介绍及实现常见的布局
海阔天空
11-29 3713
网格布局（Grid）是最强大的 CSS 布局方案。 ——阮一峰阮大神 最近项目中遇到了一些css问题，通过grid布局就能很好的解决，之前grid布局没有用过也不怎么了解，所以在解决问题的过程中特地去学习了一下，主要看了阮大神的文章。 先说说我项目的布局问题吧，就是类似于下图的这种，每块内容宽度不固定，pc上的时候3等分 ，笔记本上就2等分，每块之间需要有一定的间距。这个时候使用...
grid.js php 用法,CSS中Grid布局的用法总结(附代码)
weixin_36410316的博客
03-11 257
这篇文章给大家介绍的内容是关于CSS中Grid 布局的用法总结(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助1. 基础用法Grid 布局的核心属性有5个:.parent {display: grid;grid-template-colomns: 30px 1fr;grid-template-rows: repeat(3, 30px) 1fr;& > .chi...
FlowLayout流式布局管理器与网格布局GridLayout
sd_DENG的博客
10-29 1162
总结 1.继承JFrame类 2.在最上方定义组件 3.在构造方法中创建组件 4.在构造方法中添加组件 5.设置窗体属性 6.显示窗体 7.在主函数中创建对象 所有布局管理器都可以添加任意组件 （滚动条...在这里拿按钮举例子） package demo; import java.awt.*; import javax.swing.*; public clas
边框布局管理器(BorderLayout) 流式布局管理器(FlowLayout) 表格布局管理器(GridLayout) 卡片布局管理器(CardLayout)
love_zjl的博客
12-17 1498
/* 布局管理器:布局管理就是用于指定组件的 摆放位置的。 每种布局管理器都有自己的摆放风格  BorderLayout(边框布局管理器) 摆放的风格： 上北  、 下南 、 左西、 右东 ， 中  Borderlayout 要注意的事项： 1. 使用Borderlayout添加组件的时候，如果没有指定组件的方位，那么默认添加到中间的位置上。 2. 使用Bor
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值