web前端入门：Html、CSS完成九宫格 |
您所在的位置：网站首页 › 怎么用docx制作九宫格图片 › web前端入门：Html、CSS完成九宫格 |
web前端入门：Html、CSS完成九宫格
|
用html、css制作一个简单的九宫格，显示完整的拼图效果。 1.建一个三行三列的表格； 2.设置一个图片背景； 3.使用background-position属性来移动背景图片位置。 关于设置背景属性，可以参考以下文档！ http://css.doyoe.com/properties/background/background-position.htm 代码如下： 九宫格 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; }来看看效果吧。
小白也有在努力 >_ |
【本文地址】
今日新闻 |
推荐新闻 |