两种方法实现响应式九宫格布局

最新推荐文章于 2022-04-07 11:43:46 发布

weixin_30795127

最新推荐文章于 2022-04-07 11:43:46 发布

阅读量301

点赞数

原文链接：http://www.cnblogs.com/superlizhao/p/8421380.html

版权

html布局以及基础样式代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式九宫格</title>
	<style type="text/css">    
		html, body { color:#222; margin:0; padding: 0; text-decoration: none; }    
		ul { list-style: none outside none; margin:0; padding: 0; }    
		body { background-color:#eee; }     
		ul li:nth-child(8n+1) {background-color:#36A1DB}    
		ul li:nth-child(8n+2) {background-color:#678ce1}    
		ul li:nth-child(8n+3) {background-color:#8c67df}    
		ul li:nth-child(8n+4) {background-color:#84d018}    
		ul li:nth-child(8n+5) {background-color:#14c760}    
		ul li:nth-child(8n+6) {background-color:#f3b613}    
		ul li:nth-child(8n+7) {background-color:#ff8a4a}    
		ul li:nth-child(8n+8) {background-color:#fc5366}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>	
	</ul>
</body>
</html>

方法一：浮动+宽度百分比

关键代码：

body ul:after { clear: both; content: " "; display: block; }    
ul li{ float:left;   width: 30%;  height:30%; margin-top: 2.5%;  margin-left: 2.5%;    }

方法二：flex布局+宽度百分比

关键代码：

ul{ display: flex;justify-content: space-between;flex-wrap: wrap;}    
ul li{width: 30%; margin-top: 2.5%;  }

转载于:https://www.cnblogs.com/superlizhao/p/8421380.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30795127

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

HTML5全兼容九宫格布局

03-16

HTML5 九宫格 网页布局瀑布流布局 响应式布局全兼容的九宫格布局方案。文档，代码，demo，图片，样式，全部代码！

HTML九宫格布局实现方法

09-28

主要介绍了HTML九宫格布局实现方法，瀑布流，九宫格，响应式等布局方式已成为主流，对九宫格布局感兴趣的小伙伴们可以参考一下

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

html : 九宫格(响应式)

weixin_34253126的博客

03-16

196

talk is cheap, show you the code : <!DOCTYPE html> <html> <head> <title>html5响应式九宫格</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8

响应式布局

taoalways18的博客

02-12

946

响应式布局本人在写项目时使用响应式布局查找的资料、得到的收获和遇到的Bug 以下有引用了其他作者的文章，若有侵权，联系删除！疑问 1rem为何不能为1px 当前浏览器设定的最小字体大小为12px，所以浏览器自动把html{font-size: 1px} 识别为html{font-size: 12px}，所以效果也就是1rem = 12px。在调整浏览器最小字体大小以后，也验证了以上原因是正确的。所以设定为1rem=100px，也是最简便的开发方式。注意宽度需要使用百分比例如这样： #hea

html5九宫格布局的网格菜单效果.zip

07-11

这是一个九宫格菜单动画，html5全屏展开网格布局菜单，点击全屏背景切换显示。

IOS 九宫格布局实现方法

01-20

本文将探讨如何实现一个九宫格布局，这是一种常见的设计模式，常用于展示多个相似的元素，如图片、按钮或图标。我们将主要关注使用Auto Layout来实现这一布局，同时也会提及一些辅助的宏定义来简化代码。首先，九...

HTML5九宫格布局效果

06-01

HTML5九宫格布局是网页设计中常用的一种布局方式，尤其在现代响应式设计中扮演着重要角色。这种布局能够将页面分割成九个相等大小的单元格，每个单元格可以承载不同的内容，如图片、文字或者交互元素。Bootstrap模板...

基于javascript实现九宫格大转盘效果

10-22

通过设置`width`、`height`以及`float`属性，使各个单元格形成一个九宫格布局。每个单元格有不同的背景颜色，以区分不同的奖项。当单元格被选中时，会应用`.select`类，改变背景色，以表示当前选中的奖品。现在，...

JS九宫格布局随机闪烁特效特效代码

03-20

总的来说，这个JS九宫格布局随机闪烁特效结合了响应式设计、动态视觉效果和用户交互，是提高网页用户体验的一种创新方法。通过深入理解并应用这些技术，开发者可以创建出更加吸引人的交互式界面。

九宫格前端大屏，html和js部分，自适应

02-24

【标题】"九宫格前端大屏，html和js部分，自适应"涉及的主要知识点是构建一个基于HTML和JavaScript的响应式九宫格布局，适用于大屏幕展示。在这个项目中，开发者利用这两种核心技术来实现一个在不同设备尺寸上都能...

仿微信朋友圈图片九宫格布局

05-11

仿微信朋友圈图片九宫格布局

html 响应式布局 九宫格,响应式九宫格

weixin_42511121的博客

06-09

166

html,body {color:#222;font-family:Microsoft YaHei,Helvitica,Verdana,Tohoma,Arial,san-serif;margin:0;padding:0;text-decoration:none;}img {border:0;}ul {list-style:none outside none;margin:0;padding:0;}...

纯css九宫格布局排版

weixin_33795806的博客

11-14

384

<title></title> <style type="text/css"> * { padding: 0; margin: 0; } body { text-align: center; background:#ddd; } div { width: 170px; margin: 100px auto;...

响应式布局（案例题解）

weixin_46015333的博客

04-07

420

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录媒体查询其它引入方式案例一：输入框label和go案例二：input自适应案例三：js调整基准字体大小案例四：js控制跳转到手机还是pc页面(不同布局)案例五：导航、内容自适应媒体查询 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0.

响应式布局---基础知识

aurora

10-23

262

响应式布局---基础入门一. 媒体查询(@media) 一. 媒体查询(@media) 媒体查询的含义：根据不同设备屏幕大小来决定页面的样式（不限于布局、样式）需求：有一个div，要求在同一个页面根据不同的屏幕大小，来展示不同的样式效果。基本结构： <body>  <div id="dv"></div> </body> style样式： <style>

Html5响应式设计实现九宫格,Html5响应式设计实现九宫格，html5响应九宫格

weixin_35879114的博客

06-05

347

Html5响应式设计实现九宫格，html5响应九宫格自从响应式设计的理念提出以来，越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如：小米商城，天猫等。至于响应式设计的概念等大家可以去百度百度，我这里就不相信讲解了。直接为大家带来源码，用Html5实现响应式的九宫格。代码如下：html5响应式九宫格html, body { color:#222; font-family:Micr...

Html5响应式设计实现九宫格

weixin_34362991的博客

06-02

755

自从响应式设计的理念提出以来，越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如：小米商城，天猫等。至于响应式设计的概念等大家可以去百度百度，我这里就不相信讲解了。直接为大家带来源码，用Html5实现响应式的九宫格。代码如下： <!DOCTYPE html> <html> <head...

flex伸缩布局之九宫格