首页 > HTML & CSS > 移动端布局教程 > 边框九宫格

边框九宫格

1. 前言

由于实现九宫格最方便的方式就是网格布局,所以边框九宫格咱们来拿网格实现法举例,边框九宫格的关键点其实并不在于用哪种方式实现九宫格,所以很容易融会贯通。

2. 笨方法

相信大家都有过这样的经历( 假装你们有过 ):有一道数学题你并不会,但是你却想到了一个耿直的办法来解开这道数学题,答案都是正确的,只不过过程曲折了些:

比如问你 6 x 9 = ? 突然你就忘记了九九乘法表,但是你知道 6 x 9 = 9 + 9 + 9 + 9 + 9 + 9
于是乎你就算呗,最后终于算出来了,顶多麻烦了点,但依然得出了正确答案不是吗?( 即使会被数学老师diss一番 )

边框九宫格也是同理,咱们不懂怎么让两个边框并在一起的时候怎么变细,但是咱们可以用笨方法:
让两个相邻的盒子的其中一个的相邻边不显示边框不就完了!
图片描述
这样的边框合在一起就不会出现两个边框贴在一起啦!
思路有了,那咱们再来个动态程序看一眼:

运行结果:

3. 小结

这么做完全可以实现,绝对没毛病,但一般来说大家用笨方法解出来的数学题,即使答案正确,老师也不会给满分,因为 6 x 9 = ? 就是想考察你的乘法水平,但你却用了加法,虽然答案一样但却饶了许多弯路。如果去参加面试的时候这么实现出来,面试官也不会给你满分,那么下一小节我们来看看有没有不那么麻烦的方法。

本文来自互联网用户投稿,不拥有所有权,该文观点仅代表作者本人,不代表本站立场。
访问者可将本网站提供的内容或服务用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯本网站及相关权利人的合法权利。
本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站,邮箱:80764001@qq.com,予以删除。
© 2023 PV138 · 站点地图 · 免责声明 · 联系我们 · 问题反馈