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

用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>

来看看效果吧。

小白也有在努力 >_< !

web前端入门：Html、CSS完成九宫格相关推荐

web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
【css教程】web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
web前端入门学习 css（2）
https://www.bilibili.com/video/BV1pE411q7FU?p=85&spm_id_from=pageDriver 文章目录 css引入方式总结综合案例:新闻页面 ...
web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）
https://www.bilibili.com/video/BV14J4114768?p=390 代码:https://gitee.com/xiaoqiang001/html_css_materia ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
web前端入门学习 css（4）（盒子模型）
文章目录盒子模型(box model) 盒子模型的组成边框 border 边框的简写,边框的分开写法(分别写上下左右边框) 利用边框的层叠性简化书写代码(小技巧) 给表格table和单元格td和表 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
web前端入门学习 css（3）（背景相关）
文章目录 css背景颜色(backgroud-color.transparent) css背景图片 background-image 背景平铺 background-repeat 背景图片位置 bac ...

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

web前端入门：Html、CSS完成九宫格相关推荐

最新文章

热门文章