web前端入门：Html、CSS完成九宫格

最新推荐文章于 2023-11-05 22:44:21 发布
最新推荐文章于 2023-11-05 22:44:21 发布
阅读量2k 收藏 16
点赞数 2
分类专栏： web前端 文章标签： html5 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59587050/article/details/119293446
版权

用html、css制作一个简单的九宫格，显示完整的拼图效果。

1.建一个三行三列的表格；

2.设置一个图片背景；

3.使用background-position属性来移动背景图片位置。

关于设置背景属性，可以参考以下文档！

http://css.doyoe.com/properties/background/background-position.htm

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>九宫格</title>
		<style>
			table{
				width: 400px;
				height: 400px;
			}
			td{
				width: 133px;
				height: 133px;
				background-image: url(img/1.jpg);
			}
			td.a{
				background-position: 0px 0px;
			}
			td.b{
				background-position: -133px 0px;
			}
			td.c{
				background-position: -266px 0px;
			}
			td.a1{
				background-position: 0px -133px;
			}
			td.b1{
				background-position: -133px -133px;
			}
			td.c1{
				background-position: -266px -133px;
			}
			td.a2{
				background-position: 0px -266px;
			}
			td.b2{
				background-position: -133px -266px;
			}
			td.c2{
				background-position: -266px -266px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td class="a"></td>
				<td class="b"></td>
				<td class="c"></td>
			</tr>
			<tr>
				<td class="a1"></td>
				<td class="b1"></td>
				<td class="c1"></td>
			</tr>
			<tr>
				<td class="a2"></td>
				<td class="b2"></td>
				<td class="c2"></td>
			</tr>
		</table>
	</body>
</html>

来看看效果吧。

 

小白也有在努力   >_<    !

莫得信服
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML九宫格布局实现方法
09-28
主要介绍了HTML九宫格布局实现方法，瀑布流，九宫格，响应式等布局方式已成为主流，对九宫格布局感兴趣的小伙伴们可以参考一下
用html和css制作九宫格,我就是要用CSS实现九宫格图
weixin_36362326的博客
06-11 1672
下图是手Q吃喝玩乐好友去哪儿九宫格图的图示：我就是要用CSS实现九宫格图-1.jpg (10.42 KB, 下载次数: 0)2020-7-21 10:52 上传从上图我们可以分析出如下需求：图片大小自适应；图片个数不同时，图片按照指定方式排列；图片相邻处有1px空白间隙。我们以最复杂的6图布局为例，一步一步来看如何以纯CSS实现。1、float布局最容易想到的，也是最简单的方案，就是 floa...
HTML5 九宫格拼图游戏
热门推荐
07-20 1万+
设计思路 根据上面的效果图来观察思考，我们要做的就是设置一个大 DIV 用来包裹里面的小 DIV，然后在里面设置 8 个小 DIV，从 1 开始给他们编号。右边设置两个按钮，点击开始的时候开始计时，完成拼图后停止计时，并弹出一个框，提示完成了。重来按钮是当用户觉得当前有难度的时候，点击重来可以重新开始一个新的拼图，把所有方块打乱顺序，然后开始计时。 我们的重点就是当鼠标点击其中一个方块
web前端——HTML+CSS实现九宫格
最新发布
weixin_58474273的博客
11-05 1172
web前端——HTML+CSS实现九宫格。
[CSS] 图片九宫格
少莫千华
08-06 829
.img-item:nth-child(3n+1) 3n+1 选中第一列的元素 1 4 7 3n+2 选中第二列的元素 2 5 8 3n+0 选中第三列的元素 3 6 9 n+7 选中第三行的元素 7 8 9 -n + 6 选中第一、二行的元素 6 5 4 3 2 1* -n + 6 选中第一行的元素 3 2 1
前端小练习——九宫格布局
林飞的梦呓
08-22 5405
相关介绍：最近在仿天猫官网，如下图这是一张列表页中的一部分效果，正常情况下边框是灰色的，鼠标移动到小盒子上时其边框变红。 动态效果图是这样的： 刚开始觉得很容易实现，等到自己写样式的时候发现，右边和下边边框会被后一个盒子覆盖住了。抓耳挠腮之际，觉得这个效果好像见过，但是一时想不起来。昨晚睡觉的时候，也一直在想这个事情，边框被挡住了？边框被挡住了？…..怎么让边框显示出来呢？…..，想着想着后
【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-11 6055
这是我们最终想要达到的效果，并且支持任意宽高缩放不变形。注意哟这次不一样的是有透明度！ 开始准备物料 第一步：切片，建议用九宫格的形式，切割有考究，主要是最大限度、最小尺寸囊括多个边界转角处的样式(亮蓝色是参考线，白色文字是描述区域规则，红色文字是宽高、分割输出的png图片文件名，正中的宫格就用1像素宽高png背景图拉伸[注意是拉伸不是平铺！]) 第二步：输出文件（一共是9个png文件：lt、mt、rt、lm、mm、rm、lb、mb、rb.png），需要注意小细节，我的每张图片...
HTML前端小技巧—页面九宫格排版
yunduanaoligei的博客
12-30 2593
今天分享下”HTML前端小技巧—页面九宫格排版“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 网站布局多样化是大家前面的拿手菜！近期见到UC浏览器的默认设置标签页应用的便是九宫格合理布局。就科学研究了下，在这儿，我便介绍一下编码，共同学习下！实际效果如下所示： XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <
九宫格——用html+css制作一个网页
qq_58035376的博客
02-14 3364
使用html和css制作一个九宫格
JS - Web端的点九图
kelly0721的博客
08-25 1552
点九图
html+css、vue九宫格抽奖web页面源码，js九宫格抽奖代码
05-14
可以访问这篇文章有完整的介绍： https://blog.csdn.net/lucky_fang/article/details/124767705
Web前端基础：CSS3过渡&转换.pptx
05-06
单元二 CSS3样式表端基础前Web单元2-9 CSS3过渡&转换13转换应用过渡应用2过渡属性4转换属性什么是CSS3过渡当元素从一种样式变换为另一种样式时为元素添加效果。1过渡应用CSS3过渡是元素从一种样式逐渐改变为另一种的...
Web前端开发：HTML5+CSS3+JavaScript
09-29
Web前端开发：HTML5+CSS3+JavaScript 学习笔记。
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
css布局入门级实战之九宫格网格布局
weixin_43401380的博客
02-06 973
入门级实战案例介绍css中如何实现九宫格布局!
web前端入门到实战：CSS实现动态图片的九宫格布局
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-30 798
前提条件：content="width=750" <meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover"> 复制代码 效果图如下： 需求分析 高宽： 1张图【宽320，高320】[2倍稿尺寸] 2张图时【宽332，高332】...
记录一些有趣的前端技巧（css）
niepan990810的博客
08-14 90
css练习
JQuery实现移动9宫格图片自由切换移动
Remind_hh的博客
04-17 3146
这篇文章主要介绍了通过JQuery实现移动9宫格的前端页面特效，用户可以自由选择任意2张图片，被选中的2张图片会自动交换位置。 实现方法：html和css在页面上静态地实现9宫格，用9张图片填充这9个格子，然后使用jquery动态实现图片自由切换移动。 实现思路：当鼠标点击其中任意一张图片时，我们利用jquery克隆此包含了此图片的div块并隐藏它。然后在鼠标移动事件中监听鼠标停止事件，当鼠标
HTML+css+js九宫格抽奖
05-17
好的，以下是一个简单的 HTML+CSS+JS 九宫格抽奖的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>九宫格抽奖</title> <style type="text/css"> .container { display: flex; flex-wrap: wrap; width: 300px; height: 300px; margin: 0 auto; } .item { flex-basis: 33.33%; height: 33.33%; box-sizing: border-box; border: 1px solid #ccc; text-align: center; font-size: 24px; line-height: 100px; } .active { background-color: #ff0; } .btn { display: block; margin: 20px auto; padding: 10px 20px; font-size: 24px; background-color: #00f; color: #fff; border-radius: 5px; cursor: pointer; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> <button class="btn">开始抽奖</button> <script type="text/javascript"> var items = document.querySelectorAll('.item'); // 获取所有九宫格元素 var btn = document.querySelector('.btn'); // 获取开始抽奖按钮 var timer = null; // 定义计时器 btn.onclick = function() { if (timer) return; // 如果计时器已经在运行，则返回 var index = 0; // 初始化索引值 timer = setInterval(function() { // 清除其他元素的样式 for (var i = 0; i < items.length; i++) { items[i].classList.remove('active'); } // 添加当前元素的样式 items[index].classList.add('active'); // 更新索引值 index++; if (index >= items.length) { index = 0; } }, 100); // 3秒后停止计时器 setTimeout(function() { clearInterval(timer); timer = null; }, 3000); }; </script> </body> </html> ``` 这段代码实现了一个简单的九宫格抽奖功能，点击“开始抽奖”按钮后，九宫格中的元素会不断地轮流高亮显示，3秒后停止，并且最终停留在一个元素上。可以根据需要自行修改样式和逻辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值