html中的宫格怎么做？常用于商品展示等

最新推荐文章于 2023-07-14 14:09:24 发布

京拾

最新推荐文章于 2023-07-14 14:09:24 发布

阅读量876

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_48109675/article/details/126591991

版权

本文介绍如何使用HTML和CSS创建一个七宫格布局，适用于商品展示等场景。主要方法包括浮动float、定位position和伸缩盒flex，示例中采用float实现。通过设置一个父级div包含七个子div，第一个div高度与父级相同，其余六个开启浮动，从而完成布局。

摘要由CSDN通过智能技术生成

1、例子 ——七宫格

有很多种方法：浮动float、定位position、伸缩盒flex都可以做（本次案例使用float）

思路：一个父div包含7个子div、第一个div设置与父同高、剩余6个div开启浮动、

1、 2、

3、这是全部代码、大家可以试试

<!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>宫格</title>
  <style&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

京拾

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

html编写四宫格展示图片,七彩色图片排版工具一键制作四宫格图片教程

weixin_32000561的博客

06-16

2430

七彩色图片排版工具是一款好用的图片排版工具。我们可以使用七彩色图片排版工具将电脑中的图片进行一键一键排版；进入下载七彩色图片排版工具 2.1 官方版大小：3.36 MB日期：2019/2/25 15:11:38环境：WinXP, Win7, Win8, Win10, WinAll极速小编这一次就给大家演示一下怎么使用七彩色图片排版工具将电脑中的图片进行一键排版吧。首先我们要使用七彩色图片排版工具打...

[html] 实现九宫格布局

歌谣的博客

04-09

2137

[html] 实现九宫格布局 <style> .container::after{ content: ""; display: block; clear: both; } .box{ float: left; width: 32%; padding-bottom: 32%; backgroun

参与评论您还未登录，请先登录后发表或查看评论

html使用canvas，svg绘制方格，并在方格上放圆点

最新发布

qq_38360823的博客

07-14

555

【代码】html使用canvas，svg绘制方格，并在方格上放圆点。

html实现网格布局排版整齐的表格,Grid 宫格常用布局的实现

weixin_34286410的博客

06-17

788

两边无缝隙，每列之间有缝隙width: 100%;display: grid;grid-template-columns: repeat(4,1fr);justify-items: stretch;grid-gap: 1px;属性介绍：justify-items属性设置单元格内容的水平位置(左中右)，align-items属性设置单元格内容的垂直位置(上中下)。start：对齐单元格的起始边缘。e...

HTML中盒子的做法

weixin_65905274的博客

03-02

2815

width是盒子模型的宽度； height是盒子模型的高度； border是盒子模型的边框； background是盒子模型的背景颜色； padding是盒子模型的内边距； margin是盒子模型的外边距； div标记是一个区块容器标记，将页面分割为独立的、不同的部分。 border-style是边框样式，none是无、solid是单实线、dashed是虚线、dotted是点线、double是双实线。样式属性border-style ：上边{右边下边左边}。 border-width是边

HTML九宫格布局实现方法

09-28

HTML九宫格布局是一种常见的网页设计布局方式，它将页面分割成九个等大小的单元格，常用于展示多元素的列表，如图片、卡片或图标。这种布局方式能够有效地利用空间，使得页面看起来整洁且有条理。在本文中，我们将...

html实现图片四宫格,CSS-实现全等四宫格的方案【Collection】

weixin_27240351的博客

06-09

3136

全等四宫格.png如上图，需求如下：一个未知宽高的容器，要被均分为四个相同大小格子(即四个容器)，且格子间有10px间距(即十字型空隙)，有哪些方法可以解决呢？分析问题一般实现布局，用的多的是CSS的几大属性display float position flex。其中display的应用很灵活，用的最多的是table和table-cell；float实现浮动排列，多行可以每行套个容器，也可以不套而...

html5双十二购物狂欢节九宫格抽奖特效代码

03-20

例如，CSS3的transform属性可以用于旋转元素，这在九宫格的转动效果中必不可少。同时，CSS3的过渡（transition）和动画（animation）功能可以进一步增强用户体验，使旋转更加自然和吸引人。此外，JavaScript是实现...

如何用html5做个人中心,个人中心页面从思考到设计全过程

weixin_35070925的博客

06-01

4972

原标题：个人中心页面从思考到设计全过程最近刚做完一个项目，我发现我的设计效率相比之前竟然提升了30%以上，在以前做界面时总是会纠结采用什么样式，什么布局。而现在在看了原型之后就大概知道我要怎么做了，没有了以前做页面时的纠结，效率自然提升了。我想着主要是因为平时长期的分析总结的结果，我能够很明确的知道什么时候该用什么交互方式，什么时候该用什么样式。因此今天想拿“个人中心页面从思考到设计全过程”和大家...

在一个页面上用iframe创建16个宫格.

liukaihandsome的专栏

06-28

231

需求是在一个页面同时显示16个网页,并且能进行缩放!!!看似很简单,实际上很复杂.最主要的难点就在于缩放这个功能只有IE才有 style属性是zoom.但又有个问题是跨域的问题.后来弄了N久,网上也找了很多资料才勉强的搞定.两个JSP; [size=x-large][b]input.jsp[/b][/size] [code="JSP"] ...

html 实现格子效果,使用CSS网格布局（grid）实现响应式设计

weixin_39530149的博客

06-03

1158

Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。下面本篇文章介绍一下如何使用CSS网格布局(grid)实现响应式设计。常用Grid布局属性介绍下面从一个简单Grid布局例子说起。CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是实际的 gr...

HTML前端小技巧—页面九宫格排版

yunduanaoligei的博客

12-30

2665

今天分享下”HTML前端小技巧—页面九宫格排版“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。网站布局多样化是大家前面的拿手菜！近期见到UC浏览器的默认设置标签页应用的便是九宫格合理布局。就科学研究了下，在这儿，我便介绍一下编码，共同学习下！实际效果如下所示： XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <

html 2*2格子

yangyang031213的博客

06-16

1797

用表格，表格格子放div，也可以直接用div布局，但是好麻烦，不好用。。。。。。 <!DOCTYPE html> <html> <head> <title>aaaaaaaaaaaa</title> <meta http-equiv="content-type" content="text/html;

html 实现格子效果图,CSS实现动态图片的九宫格布局的实例代码

weixin_36337548的博客

06-03

918

前提条件：content="width=750"效果图如下：需求分析高宽：1张图【宽320，高320】[2倍稿尺寸]2张图时【宽332，高332】3张图、4张图、6张图，7张图、9张图时【宽220，高220】5张图、8张图时【第4、第5张宽高332】，【其余220】间距：2张时，【最后一张】只有left方向margin3张时，【第2张】左右margin4张时，【第2张】和【最后一张】都只有left...

html 实现格子效果图,纯CSS实现动态图片的九宫格布局

weixin_32860759的博客

06-03

970

起因最近碰到这样一个需求，要实现一个“九宫格图片”展示，设计师给过来的稿子是酱的是的，九宫格对应的是九种样式。天不怕，地不怕，就怕设计有想法。当一看到这样的需求，很多人的第一反应应该是会JS一把梭，通过一系列的判断条件来修改图片宽高或者更改DOM元素的class。的确，这么复杂的样式难免让人望而却步，这个需求通过JS是可以完成的【PS：废话，JS啥干不了】，但是如果只是分享JS如何实现的话，未免太...

html的网格效果,CSS+HTML<网格背景效果>

weixin_34199121的博客

06-04

1032

image.png知识点：这里涉及的知识点其实很少，只要需要你去理解具体含义其中包括 background: linear-gradient(),background-size,background-repeat没错，只要你掌握了以上 3 点就能实现这种效果！！！下面会告诉大家如何具体实现此效果，其中虚线部分的绘制比较麻烦，但是也是可以实现，所以接下来会一一讲解~~实线网格绘制：.grid-shi...

html 实现格子效果,div+css实现九宫格效果

weixin_39793420的博客

06-03

1610

div+css实现九宫格效果有3种方法：1、方法一：把九宫图切割成9张图，用9个div合在一起，改变宽高，实现。优点：兼容性100%支持，缺点div太多，使用不方便。2、方法二：把九宫图按特定格式排列成一张图，再用9个div合在一起，改变宽高和padding，实现。优点：兼容性100%支持，缺点div太多，使用不方便。一张背景实现自适应九宫格/*为了让看得简单清晰点，CSS跟XHTML代码就...

html格子切换效果图,(HTML)关于格子流布局方案可以如此设计

weixin_33199783的博客

06-03

214

该方案是兼容ie9及以下的,当然如果你的开发需求不需要兼容IE的，就像vue.js3一样完全放弃IE辣鸡浏览器的就不需要这样做，可以直接使用flex(弹性布局)，简单舒服。描述一下使用情景当拿到一张方格平铺的设计图，第一个想法应该是想到table标签，或flex布局。情景布局结构...说明wrap用于决定layer整体的对齐。比如水平方向的位置：居左居左.png.wrap{width:190px;...

Flex如何实现9宫格布局？

06-02

Flex布局是一种基于弹性盒子模型的布局方式，可以通过设置盒子的flex属性来实现自适应和分布控制。但是，Flex布局并不支持9宫格布局，因为9宫格布局需要将布局区域分割为9个小区域，并且每个小区域的大小需要根据布局容器的大小自适应调整。因此，实现9宫格布局需要使用其他的布局方式，比如CSS Grid布局或传统的绝对定位布局。在CSS Grid布局中，可以通过设置grid-template-areas属性和grid-column、grid-row属性来实现9宫格布局。在传统的绝对定位布局中，可以通过设置position属性和top、right、bottom、left属性来实现9宫格布局。