html5九宫格网页设计代码,html编写九宫格

　　前言

　　说到九宫格，你是不是想到了九宫格火锅(O(_)O哈哈~)？其实各大网站基本都用九宫格的布局。当然这里的九宫格是泛指(O(_)O哈哈)。比如小米商城本地布局如下：

　　不难发现，一些电商平台的布局基本相同，最常见的就是这种九宫格布局。当然也可以通过CSS单独定位，但是说数据量小也容易。如果数据量增加，计算会很麻烦，可能会影响布局。先说九宫格布局的原则。

　　原理（小白也能看懂）

　　上图是九宫格示意图。现在，让我们在一个网页中想象一下(想象不到就看上图~ ~)。在web页面中，这个布局由最外层的一个大的绿色div标记包装。绿色div标签中有很多蓝色的小div标签作为绿色div标签的子元素，这样简单的嵌套就完成了。因为我们的目标元素是一个小的蓝色div，所以我们不可避免地要设置盒子大小、外部边距等等。但是我们操作的对象是盒子的大小和外边缘(也就是上图中用红框标注的区域)。

　　具体流程如下：

　　我们先得出蓝框及其周围的大小，假设上图中红框的大小为200px * 200px。

　　这些方框与绝对定位和相对定位有关：绿色方框是相对定位，里面的蓝色方框是绝对定位(即次绝对父相)。如果不了解，请访问CSS定位亚绝对父相。

　　让我们想象一下把上面的九个方块放入一个二维数组[3][3]。此时，第一个盒子位于数组的[0] [0]位置，它在绿色div中的位置是(0200px，0200px)，即top=0px，left=0px；二维数组中右边方块的位置为[0][1](0200px，1200px)，即top=0px，左=200px下方的盒子在二维数组中的位置是[1][0](1200px，0200px)，即top=200px，left=0px。以此类推，可以得到所有子元素的位置。

　　代码实现

　　先看效果截图

　　当我单击顶部的按钮时，我可以显示不同的列。

　　以下是JS代码

　　Window.onload=function () {//实现九宫格var btns=$(。BTN all button’)；//获取所有按钮var photos=$(。photo all div . photo’)；//获取所有子块//实现九宫格具体参数方法，其中allcols表示所需列数。Function Event(allcols){ //框的宽度和外边缘var w=250，h=390，margin=10for(var I=0；一.照片长度；I ){ //方法的核心var row=parse int(I/all cols)；var col=parse int(I % all cols)；//在特定位置运行var top=row *(h margin) px ；var left=col *(w margin)“px”；//设置位置照片[i]。style.position= absolutephotos[I]. style . left=left；photos[I]. style . top=top；} }//设置监听事件btns [0]。onclick=function(){每个按钮的事件(3)；};btns[1]。onclick=function(){ Event(4)；};btns[2]。onclick=function(){ Event(5)；};}就是这样。本文介绍了HTML利用九宫格原理进行网页布局的方法。更多相关HTML九宫格布局内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。