Web App 开发----九宫格

最新推荐文章于 2023-11-05 22:44:21 发布
最新推荐文章于 2023-11-05 22:44:21 发布
阅读量367 收藏 1
点赞数 1
文章标签： web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58760840/article/details/123884733
版权

1.九宫格---默认样式

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>
	<body>
		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<span class="mui-icon mui-icon mui-icon-weixin"></span>
						<div class="mui-media-body">weixi</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<span class="mui-icon mui-icon mui-icon-weixin"></span>
						<div class="mui-media-body">weixi</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<span class="mui-icon mui-icon mui-icon-weixin"></span>
						<div class="mui-media-body">weixi</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<span class="mui-icon mui-icon mui-icon-weixin"></span>
						<div class="mui-media-body">weixi</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<span class="mui-icon mui-icon mui-icon-weixin"></span>
						<div class="mui-media-body">weixi</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<span class="mui-icon mui-icon mui-icon-weixin"></span>
						<div class="mui-media-body">weixi</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<span class="mui-icon mui-icon mui-icon-weixin"></span>
						<div class="mui-media-body">weixi</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<span class="mui-icon mui-icon mui-icon-weixin"></span>
						<div class="mui-media-body">weixi</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<span class="mui-icon mui-icon mui-icon-weixin"></span>
						<div class="mui-media-body">weixi</div>
					</a>
				</li>
			</ul>

		</div>
	</body>
	<script src="js/mui.js"></script>
	<script type="text/javascript">
		mui.init()
	</script>
</html>

代码效果：

 

2.多页面九宫格

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content">
			<div id="gallery" class="mui-slider">
				<div class="mui-slider-group ">
					<div class="mui-slider-item">
						<ul class="mui-table-view mui-grid-view mui-grid-9">
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin">
										<span class="mui-badge">1</span>
										</span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin">
										<span class="mui-badge">2</span>
									</span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin">
										<span class="mui-badge">3</span>
									</span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="mui-slider-item">
						<ul class="mui-table-view mui-grid-view mui-grid-9">
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<span class="mui-icon mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">weixi</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="mui-slider-item">
						<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<a href="#">
					<span class="mui-icon mui-icon mui-icon-weixin"></span>
					<div class="mui-media-body">weixi</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<a href="#">
					<span class="mui-icon mui-icon mui-icon-weixin"></span>
					<div class="mui-media-body">weixi</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<a href="#">
					<span class="mui-icon mui-icon mui-icon-weixin"></span>
					<div class="mui-media-body">weixi</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<a href="#">
					<span class="mui-icon mui-icon mui-icon-weixin"></span>
					<div class="mui-media-body">weixi</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<a href="#">
					<span class="mui-icon mui-icon mui-icon-weixin"></span>
					<div class="mui-media-body">weixi</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<a href="#">
					<span class="mui-icon mui-icon mui-icon-weixin"></span>
					<div class="mui-media-body">weixi</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<a href="#">
					<span class="mui-icon mui-icon mui-icon-weixin"></span>
					<div class="mui-media-body">weixi</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<a href="#">
					<span class="mui-icon mui-icon mui-icon-weixin"></span>
					<div class="mui-media-body">weixi</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<a href="#">
					<span class="mui-icon mui-icon mui-icon-weixin"></span>
					<div class="mui-media-body">weixi</div>
				</a>
			</li>
						</ul>
					</div>
				</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active" ></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
			</div>

		</div>
	</body>
	<script src="js/mui.js"></script>
	<script type="text/javascript">
		mui.init()
	</script>

</html>

代码效果：

 

浏览器九宫格的简单实现
蒋宇捷的专栏
01-09 1万+
<br />九宫格，也叫做快速拨号（Speed dial），是现代浏览器一个非常重要的功能，用户可以在空白页上定制和放置自己喜爱的网站，这样可以方便的打开所需的网站，无需输入和记忆网址。<br /><br /><br /> <br /><br />       九宫格页面一般由9个格子到16格子组成，每个格子可以自由的拖动以交换位置。下面我们来实现一个简单的3*3九宫格。<br />       我们先定义一个容器来放置3*3个格子，定义它的宽度为3个格子的宽度之和再加中间的间距。然后在上面放置9个浮动的格
网页布局的九宫格基本布局
聚合博客室
08-01 3943
九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多，比如我们经常看到软件中的一个窗体，其实就是一个九宫格的典型应用，因为窗体需要在八个方向拉伸，所以在C/S软件中大量采用这种技术来布局设计。在B/S系统大行其道的当今社会，这种布局逐渐被一些网页设计师运用在网页中去，用得最多的就是在圆角框布局中应用。 九宫格的基本布局实际
MUI（5）
weixin_30547797的博客
07-23 139
今天实现9宫格菜单。先上效果图： 就是这个效果咯，界面不太美观，底部导航栏是为了苹果用户没有返回按键设计的，只是为了方便演示而已，没有做过多的处理。首先先说一下这个底部导航栏如何实现，这个底部导航栏小编我写在了主页面index.html中，下面附上代码： 1 <!-- 底部nav开始 --> 2 <nav class="mui-bar mui-bar-tab"> ...
web实现微信9宫格
去流浪
10-25 755
哆啦A梦图片来源网络，侵删。 代码： <html> <head></head> <body style="background-color:skyblue"> <!-- 在页面中展示图片 src：图片来源,地址可以是网上资源和动态图 width、height:宽高 title:悬停图片上显示文字 ...
网页布局之九宫格
weixin_34146805的博客
10-14 187
九宫格虽然嵌套了一些标签，但对于IE6、IE7来讲为了达到预期的美术效果，这中间需要进行权衡；无论怎么讲，他还是很多精华之处。   先看下面的效果，典型的圆角：   虽然圆角有很多的实现方案： 1、使用DIV进行模拟 2、可以使用wekit或moz的一些私有属性进行模拟… 3、使用VML进行处理 4、….   九宫格它的嵌套方式是左、中、右，大致的结构如下： &...
web前端入门到实战：html,css制作九宫格
web前端开发教程htmlcssjs
11-27 1188
绘制九宫格 要求:九宫格垂直居中于页面,只能使用ul和li标签,添加背景边框 代码 <!DOCTYPE html> <html> <body> <h1>九宫格</h1> <p>要求:</p> <p>1:不能修改标签，仅通过 css 实现效果</p> <p>2:添加绿色的边框&...
angular2九宫格组件
08-12
在开发过程中，我们经常会遇到需要展示信息网格的需求，这时九宫格组件就能派上用场。九宫格通常由3x3的单元格组成，可以灵活地展示图片、文字或者其他内容。在Angular2中实现九宫格组件，我们可以利用其强大的数据...
手机九宫格html5网站模板
04-02
总的来说，手机九宫格HTML5网站模板结合了HTML5的强大功能、CSS3的视觉特效以及单页应用的设计理念，为移动端网页设计提供了一种简洁而高效的解决方案，旨在优化移动设备上的用户体验，同时满足现代Web开发的需求。...
一种方便手机app九宫格、列表开发的js组件.docx
12-07
### 一种方便手机app九宫格、列表开发的JS组件 #### 发明概述 本发明是一种面向移动应用开发领域的创新工具——一种方便手机app九宫格、列表开发的JS组件。该组件旨在通过HTML5、CSS3以及JavaScript的集成应用，...
解决APP开发BUG！美女老师的Web APP一站式教学课程 轻松掌握APP高级开发技能
04-16
首页_九宫格实现.mp4 ├─(11) 11 11.首页婚纱拍摄九宫格.mp4 ├─(12) 12 12.首页图文列表功能实现.mp4 ├─(13) 13 13.底部选项卡实现.mp4 ├─(14) 14 14.h5plus 功能实现1.mp4 ├─(15) 15 15.h5plus 通讯录页面...
web页面九宫格手势密码（仿手机九宫格锁屏）
01-22
公司是做移动端的,前段时间要求我们后端开发人员给做一个和移动端一样的九宫格锁屏方式的进入密码,在网上查找资料也没有什么可以用的,写完后上传上来,大家可以分享
jquery九宫格布局点击弹出菜单九宫格布局效果代码
11-21
jquery九宫格布局点击弹出菜单九宫格布局效果代码 jquery九宫格布局点击弹出菜单九宫格布局效果代码 jquery九宫格布局点击弹出菜单九宫格布局效果代码
html实现九宫格
08-19
html js 实现九宫格的网页。方便学习，可以应用于教育平台
9宫格后台模板
07-03
9宫格后台模板,后台管理系统主页模版，管理系统引导页
九宫格游戏
08-01
主要设置格子游戏，格子打乱，在两个相邻格子之间点击互换，当格子一一相对应即可，原理就是相当于拼图游戏，很简单的一个小游戏，不才请见谅
web前端入门：Html、CSS完成九宫格
m0_59587050的博客
08-01 2276
用html、css制作一个简单的九宫格，显示完整的拼图效果。 1.建一个三行三列的表格； 2.设置一个图片背景； 3.使用background-position属性来移动背景图片位置。 关于设置背景属性，可以参考以下文档！ http://css.doyoe.com/properties/background/background-position.htm 代码如下： <!DOCTYPE html> <html> <head> <meta cha
html+9宫格+app+首页,一种方便手机app九宫格、列表开发的js组件的制作方法
weixin_29748637的博客
06-29 351
一种方便手机app九宫格、列表开发的js组件的制作方法【技术领域】[0001]本发明涉及软件技术领域，尤其涉及一种方便手机app九宫格、列表开发的js组件，主要是应用于手机app开发中实现九宫格、列表页的相应开发。【背景技术】[0002]互联网已经进入到了成熟的时代，现在也越来越重视与用户之间的交流，这就必不可少需要通讯工具，因此，智能手机逐渐成为绝大部分网民的必备品。无论是10S还是Androi...
web前端——HTML+CSS实现九宫格
最新发布
weixin_58474273的博客
11-05 1454
web前端——HTML+CSS实现九宫格。
HTML网站导航九宫格代码
weixin_49771248的博客
12-16 987
九宫格
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

烊烊！

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值