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,当时真的一点一 ...
最新文章
- 如何利用业余时间提升自己
- oracle恢复误删除记录
- Intel Realsense 官方案例源码地址
- Intellij IDEA中 Debug 用法
- MongoDB 入门，我是花了心思的
- C＃：异步编程和线程的使用（.NET 4.5 ）
- 如何更方便地将谷歌翻译导入到Goldendict
- Win8下Qualcomm Atheros AR9285网卡改mac
- 苹果计算机的优势,苹果笔记本的优缺点详细分析
- 开网站需要多少钱,制作一个网页需要多少钱
- php的外文参考文献_php英文文献翻译及参考文献
- flutter 打开设置面板进行基本设置
- 配置Cisco VWIC T1/E1
- MS Office 开发工具--VBA
- MSR165数据记录仪让运输透明化
- 计算几何，三维向量的旋转
- 微软2013校园招聘笔试题
- Python-OpenCV图像处理（三）：高斯噪声与高斯模糊
- Python爬虫示例：爬取 13 个旅游城市，看看大家放假了都爱去哪玩
- bigbrother的python第一天 复习基础知识