web实现微信9宫格
2024-06-06 04:17:01
哆啦A梦图片来源网络，侵删。
代码：
<html><head></head><body style="background-color:skyblue"><!-- 在页面中展示图片src：图片来源,地址可以是网上资源和动态图width、height:宽高title:悬停图片上显示文字九宫格只能放32%以下图片，可能之间有间隙，33会超过超链接：<a herf> 00000 </a>target:当前页面内跳转，新页面用 _blank,默认_selftable:表格操作<table><tr><td></td><td></td><tr><tr><td></td><td></td><tr><tr><td></td><td></td><tr><table>--><img width="32%" height="32%" title="哆啦A梦" src="C:\Users\Tedu\Desktop\timg.jpg"/><img width="32%" height="32%" title="哆啦A梦" src="C:\Users\Tedu\Desktop\timg.jpg"/><a href="https://www.sogo.com/"> <img width="32%" height="32%" title="点我去搜猫" src="C:\Users\Tedu\Desktop\timg.jpg"/></a> </br><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> 点我查看大图片</a> </br><h1>快速到达<h1><p style="color:black;font-size:16px">哆啦A梦</br>作品背景</br><a href="https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6/185384?fromtitle=%E5%93%86%E5%95%A6%EF%BC%A1%E6%A2%A6&fromid=6509914&fr=aladdin">百度结果</a></br><a href="https://baike.sogou.com/v180489481.htm?fromTitle=%E5%93%86%E5%95%A6A%E6%A2%A6" target="_blank">搜狗结果</a></br></p><h1><b>哆啦A梦</b><h1><p style="color:black;font-size:16px"> 《哆啦A梦》（日语：ドラえもん；英语：Doraemon；旧译叮当小叮当）是由日本漫画家藤本弘（笔名藤子·F·不二雄）创作的漫画。</br></br> 漫画叙述了一只来自22世纪的<a href="https://baike.baidu.com/item/%E7%8C%AB%E5%9E%8B%E6%9C%BA%E5%99%A8%E4%BA%BA/9596781" target="_blank"><u>猫型机器人</u></a>——哆啦A梦，受主人野比世修的托付，回到30世纪，借助从四维口袋里拿出来的各种未来道具，来帮助世修的高祖父——小学生野比大雄化解身边的种种困难问题，以及生活中和身边的小伙伴们发生的轻松幽默搞笑感人的故事。</br></br> 作品自1970年1月开始在《小学1-4年级生》杂志中开始连载，并且大受小学生欢迎。《哆啦A梦》系列的篇幅浩繁，由原作者亲自执笔的短篇漫画共1345回（分为45卷单行本），大长篇漫画16回，《哆啦A梦Plus》6卷，在藤本弘去世后，又由其弟子创作了大量漫画，至今仍有新作品在不断推出。</br></br></p><p><h1><b>作品背景</b><h1><span style="color:black;font-size:16px"> 哆啦A梦的创造要追溯到1969年的某个截稿日，大师藤子·F·不二雄的家里突然闯进了一只小猫，虽然很快就要截稿了，但大师还是和小猫玩了起来，还替小猫挠虱子，而这一挠就是几个小时，等大师发现时间不够用的时候，已经来不及完成稿子。这时老师像热锅上的蚂蚁走来走去，突然踢到了女儿的不倒翁玩具，于是老师灵光一显，把猫的形象和不倒翁结合起来，就创造了带给我们欢乐的哆啦A梦。</span> </br></br><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="30%" height="30%" title="点我看大图"></a> </br></br></br></br></br><span style="font-size:100px;font-family:">宫格图片</span></br></br></br></br><table border="0" cellspacing="0" cellpadding="5" align="center" height="80%" width="80%"><tr cellspacing="2" cellspacing="5"><td colspan="3" height="%30" ><p style="font-size:10px"> 宫格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片格图片</p></td></tr><tr align="center" ><td><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="99%%" height="99%%" title="点我看大图"></a></td><td><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="99%%" height="99%%" title="点我看大图"></a></td><td><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="99%%" height="99%%" title="点我看大图"></a></td></tr><tr align="center" ><td><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="99%%" height="99%%" title="点我看大图"></a></td><td><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="99%%" height="99%%" title="点我看大图"></a></td><td><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="99%%" height="99%%" title="点我看大图"></a></td></tr><tr align="center" ><td><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="99%%" height="99%%" title="点我看大图"></a></td><td><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="99%%" height="99%%" title="点我看大图"></a></td><td><a href="C:\Users\Tedu\Desktop\timg.jpg" target="_blank"> <img src="C:\Users\Tedu\Desktop\timg.jpg" width="99%%" height="99%%" title="点我看大图"></a></td></tr><table></br></br></br></br><table border="1" cellspacing="0" align="center" height="60%" width="30%"><tr align="center"><td colspan="3">宫格显示</td></tr><tr align="center"><td>111</td><td rowspan="2">112</td><td>113</td></tr><tr align="center"><td>211</td><td>213</td></tr><tr align="center"><td>311</td><td>312</td><td>313</td></tr><table></br></br></br></br><table border="1" cellspacing="20" align="center" height="60%" width="60%"><tr align="center" ><td colspan="2"></td><td rowspan="2"></td></tr><tr align="center"><td rowspan="2"></td><td></td></tr><tr align="center"><td colspan="2"></td></tr><table></body>
</html>web实现微信9宫格相关推荐
- 仿微信9宫格群组头像
开发了一个聊天工具,群组头像像仿照微信的头像那样显示成员头像合成图片,百度了一下,发现没有顺手的,就自己动手写了一个,现在分享给大家. 我所有用户图片都是120*120的,合成图片为132*132,九 ...
- android 仿微信9宫格图片
https://github.com/LukeMee/NineGridlayout 亲测好用
- 9宫格实现微信朋友圈图片点击放大缩小弹簧效果
//之前写Demo要实现点击scrollView中图片的放大缩小的效果,用了scrollView自带的viewForZoomingInScrollView方法,效果不明显,后来改用点击图片,切换控制器 ...
- android开发支付界面,Android仿微信、支付宝钱包宫格界面Demo
[实例简介] 博文源码,文章链接:http://blog.csdn.net/airsaid/article/details/50588728 [实例截图] [核心代码] [ec]仿微信.支付宝钱包宫格 ...
- html 小程序九宫格抽奖,微信小程序实现多宫格抽奖活动
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果: 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样, ...
- 微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
- [微信小程序专题] 宫格导航设计
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题 在很多APP软件,都会设置宫格导航,那么是如何设计的呢? ...
- 微信小程序开发实现宫格布局
微信小程序开发实现宫格布局 问题背景 客户端和小程序等日常开发和学习过程中,宫格布局是一种很场景的场景,可以清晰的展现分类等效果.本文将介绍微信小程序开发中如何实现宫格布局效果. 问题分析 先上效果图 ...
- 微信小程序 9宫格翻牌动画
9宫格翻牌需求: 1.进来时平铺9个格子显示 2.点击开始抽奖时洗牌动作 3.洗完牌后呈现9个都是未翻牌的状态 4.点击任意一个牌子,有翻转的动作 5.翻转结束后出现中奖的弹窗 555,当时真的一点一 ...
最新文章
- 联泰集群发布水晶系列工作站，用于深度学习场景
- matlab中decnbr,LMI 求解时调用decnbr()函数得到的决策变量的个数为小数是为什么
- python代码判断两棵二叉树是否相同
- wxWidgets：wxApp概览
- LOJ #6052. 「雅礼集训 2017 Day11」DIV
- HTML5文档查看器PrizmDoc发布v13.0，新增文档比较功能
- 输入网址后，浏览器从访问服务器到呈现网页的过程
- python打包exe黑框一闪而过,解决pyinstaller打包exe文件出现命令窗口一闪而过的问题...
- Akka的Actor生命周期《Eight》译
- 系统学习深度学习（三十一）--Nature DQN(NIPS 2015)
- 几个关于设计的小问题
- linux怎么添加硬盘步骤,Linux 添加新硬盘方法
- [基于kk搭建k8s和kubesphere] 1 概念和文档
- python爬虫-京东全网搜索
- 4年亏损超6亿，摩贝化学赴美上市能否输血成功？
- （数论）[SDOI2008]沙拉公主的题目描述
- js 手机号码和电话号码（座机号）正则校验
- execute immediate在存储过程中的使用
- 计算机选择开机账户,Windows开机显示Administrator帐户的方法
- linux 常用命明