网格合并案例：实现网页图片不规则排列的两种办法

VIP文章 已于 2022-10-05 22:11:08 修改
阅读量968 收藏 10
点赞数 1
分类专栏： web前端开发 文章标签： css 前端 html css3 web
于 2022-10-05 20:46:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1598452168YY/article/details/127176668
版权

1、在父元素加属性grid-template-areas：实现网格合并

 相关知识见：网格布局，实现网页图片不规则排版_陌一一的博客-CSDN博客

第五条：网格区域合并 

代码：

<!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-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 300px;
            border: 3px solid gray;
            margin: 0 auto;
            disp
最低0.47元/天 解锁文章
陌一一
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
DIV CSS布局中css图片大小设置技巧
Auroraone的博客
04-18 2万+
DIV CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度 高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？我的个人解决方法如下两种：html代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &...
网格布局，实现网页图片不规则排版
YY的博客
10-05 3498
网格布局的各种属性，实现网页图片不规则排版
亲测HTML5拼图游戏代码+图片不规则+图片可换
10-11
现在HTML5大热，但看了很多介绍，都是重点介绍CANVAS而相对忽略了SVG，我个人感觉这两个技术结合，优势互补，利用SVG的交互性和CANSVAS的绘图能力，才能更好地发挥各自的作用。 以前用纯SVG做到一个拼图的DEMO，现在改为SVG和CANVAS，花了一个星期的时间，重写了这个例子，在CHROME17和FF12中进行了测试。比纯SVG速度快。
图片不规则排列
最新发布
m0_53657941的博客
02-21 360
【代码】图片不规则排列。
css布局——Shapes布局
朝阳39的博客
10-26 376
CSS Shapes布局用于实现不规则的图文环绕效果，需配合float一起使用。 兼容性: 除IE和Edge外都支持 shape-outside 指定图形边缘 1. 关键字 <div class="container"> <span class="shape margin-box"></span> <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
html：不规则界面的布局和热点问题（这里不考虑屏幕大小的兼容）
电鳗的博客
04-17 5903
热点问题
css grid随页面大小_Grid 布局学习
weixin_39883260的博客
11-29 266
Grid 布局学习Grid布局是微软在2010年提出来的一种新的布局方式，到2016年的时候提交了该布局的草案，经过这三四年的发展，grid布局慢慢变的成熟，兼容性也越来越好，可以适当学起来用起来了本次学习的几个点：CSS布局发展过程Grid布局的优点以及相关术语介绍Grid布局的使用注意事项、备注参考资料在我们开始学习前，先了解下它能用在什么情况下例如这个页面就是用grid布局的:Grid布局网...
html图片文字 网格布局,【图片版】CSS网格布局（Grid）完全教程
weixin_39756336的博客
06-25 750
## 简言CSS网格布局(Grid)是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式，从本质上都是Hack的方式，并且遗漏了一些重要的功能(比如：垂直居中)。Flexbox的出现部分解决了上述问题，但Flex布局是为了解决简单的一维布局，适用于页面局部布局。而Grid天然就是为了解决复杂的二维布局而出现...
不规则页面布局html,HTML5 SVG带视觉差效果的响应式不规则分段布局
weixin_33910191的博客
06-03 422
这是一款使用HTML5 SVG制作的带视觉差效果响应式不规则分段布局特效。该特效使用SVG将各个段落制作为不规则图形。同时使用jQuery来在页面滚动时制作一些轻微的视觉差效果。制作方法HTML结构在这个布局中，每一个div.section是一个段落，从第二个段落开始，使用SVG的clipPath元素来制作不规则图形剪裁路径。并使用元素来作为背景图片，在图片上应用clipPath剪裁路径。Page...
HTML5/CSS3 炫酷键盘 不规则布局 内含知识点总结
alalasheep的博客
08-10 656
炫酷键盘图片效果展示看到这里是不是很想学呢？在这里我要说一定会让你有所收获的那么我先结合代码总结一下我在学习写这篇代码生成炫酷键盘时的收获，其次在最后面将代码 give you 参考，ok，Let’s go！ 结合代码知识点总结 SEO_网站优化 三要素 <meta name="keywords=" content=""><!--1 SEO 百度搜索关键字--> ...
使用CSS3栅格模式构建出不规则布局
量子前端的博客
06-23 1544
今天初步学习CSS3的栅格系统，因为之前学过bootstraps4的栅格系统，所以基本概念是一致的，只是语法上的一些区别，做了一些笔记： 不同的栅格定义方式： 每一格尺寸相同适用重复定义 grid-template-rows:repeat(2,50%); //两行各占50% grid-template-columns:repeat(5,20%); //五列各占20% 按总容器的比例划分（fr） grid-template-rows:1fr 2fr 3fr; 或 repeat(3,1fr); grid-t
ncmerge:将多个不规则的NetCDF网格合并到等矩形网格中。-开源
04-29
ncmerge可以非常快速地将基于单元格的不规则网格合并到单个等矩形（平板Carree）网格中，以简化可视化工作流程。 它首先从坐标网格创建地图文件，然后在重新捕获数据值时执行快速查找。 支持3D时变变量。
实现图片网格形式排列
04-04
该源码实现了实现图片网格形式排列，源码BMAGridPageControl，BMAGridPageControl实现图片以网格形式排列供选择。既可以滚动查看图，也可以通过网格的方式查看图片。 使用方法： 导入头文件： #import #import ...
html5 modernizr网格排列图片css3 animation网页多种缩略图动画效果
11-24
html5 modernizr网格排列图片css3 animation网页多种缩略图动画效果
JS可拖拽图片网格排列布局代码
06-24
JS可拖拽图片网格排列布局代码是一款通过拖拽进行图片排列排序效果代码。
网格搜索ARIMA模型超参数-两个案例python实现源码&数据.zip
12-02
网格搜索ARIMA模型超参数_两个案例python实现源码&数据 1、评估给定订单的ARIMA模型（p，d，q） 2、评估ARIMA模型的p，d和q值的组合
html5制作多彩照片墙,照片墙不是乱贴的，教你1分钟打造高逼格照片墙！
weixin_39918128的博客
06-19 1072
照片墙Photo wall照片墙可不是随随便便出效果的，在设计照片墙的时候需要注意其尺寸大小，要讲究乱中求序。可以选择白色、黑色、木材框协调自己的照片。用一些黑白色系的木相框修饰下照片！让它们看起来不那么的单调！为了显示出照片墙的丰富性，也可以考虑在其中加入一些诸如宠物一类的它系照片进行组合！宫格式的摆放方式算是一种充满趣味的方式，视觉上看起来是那么的整洁明了！丰富多彩的排列顺序可以考虑放在孩子的...
纯css瀑布流布局示例详细讲解
约妲己吃火锅的博客
03-01 967
这是我在做公司官网时候遇到的问题，UI设计图样式如下： 问题分析： 首先，看见这个UI设计图：它呈左右两列不规则分布，而且也能发现width宽度、heigth高度等都不相同。 思路分析： 毫无疑问，我们用简单的div布局+css做的话是可以达到这样的效果的，只是这样很low，不灵活，而且需要反复布局排版，代码量也不简单！ 此时，这个用瀑布流的话会简单不少！ 原理+实现： 瀑布流：又称瀑布流式布局，是比较流行的一种网站页面布局方式，能够提升用户的体验感。它是多行等宽元素排列，等宽不等高或者宽高都不相同，后面
热点链接(img map area)
weixin_30292745的博客
03-17 422
热点链接(img map area) 怎么在一个图片中做多个链接呢？ 热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签：<img><map><area>。 <img src="图形文件名" usemap="#图的名称"> ...
css 不规则图片瀑布流实现
07-28
要实现CSS不规则图片瀑布流效果，可以使用CSS Grid布局和一些技巧来实现。以下是一个示例代码： HTML代码： ```html <div class="waterfall"> <div class="item"> <img src="image1.jpg" alt="Image 1"> </div> <div class="item"> <img src="image2.jpg" alt="Image 2"> </div> <div class="item"> <img src="image3.jpg" alt="Image 3"> </div> <!-- 更多图片项 --> </div> ``` CSS代码： ```css .waterfall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 使用自动填充的网格列布局 */ grid-gap: 10px; /* 设置网格间隙 */ } .item { break-inside: avoid; /* 避免在项目中断行 */ } .item img { width: 100%; /* 图片宽度填满容器 */ display: block; /* 去除图片默认的下沉效果 */ } ``` 这样就可以实现一个CSS不规则图片瀑布流效果。通过使用CSS Grid布局和自动填充的网格列布局，可以让项目自动适应不同的屏幕宽度，并且保持不规则的瀑布流效果。你可以根据需要调整图片的宽度、网格间隙等样式来适应你的设计。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌一一

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值