2024年最全HTML&CSS Table元素详细解说,小白也能懂的前端教程!,面试技巧总结

文末

技术是没有终点的,也是学不完的,最重要的是活着、不秃。

零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。

最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力,一定要自律,杜绝“三天打鱼两天晒网”,到最后白忙活一场。

高度自律的同时,要保持耐心,不抛弃不放弃,切勿自怨自艾,每天给自己一点点鼓励,学习的劲头就会很足,不容易犯困。

技术学到手后,找工作的时候一定要好好准备一份简历,不要无头苍蝇一样去海投简历,容易“竹篮打水一场空”。好好的准备一下简历,毕竟是找工作的敲门砖。

拿到面试邀请后,在面试的过程中一定要大大方方,尽力把自己学到的知识舒适地表达出来,不要因为是自学就不够自信,给面试官一个好的印象,面试成功的几率就会大很多,加油吧,骚年!

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

效果:

2.编写工具类样式文件 tool.css


在刚才的例子中,我们把一个div元素或者span元素都相对于父元素居中显示了,我现在请问一下大家,在实际开发中,让一个元素相对于父元素居中显示,这样的需求是不是很常见呀?

那有没有什么办法,让我们下次再遇到这个需求的时候,直接用起来就行了呢?答案肯定是有的,我们可以封装一个通用的工具类,然后把一些经常要用到的样式放进去,就OK了。现在我们来编写一个tool.css工具类。

1489026181387098368.png

引入这个css:

然后,在span元素上绑定对应的class:

这样就OK啦。

3.终于开始画table了


现在,我们开始画一个table,比如来一个一行三列的table:

为了看出效果,我们需要另外给这个table元素,tr和td元素设置样式:

刷新页面:

就这样,一个简单的table就画好咯~

##4.合并单元格

既然学table,肯定会遇到一个问题,那就是怎样合并单元格呢?

比如,我希望在第二列和第三列下面增加一行,怎么办?很简单,我只需要在后面再写一个tr,里面有两个td:

这个tr希望和它平级:

可惜效果不对,这一行被挤下来了,原因很简单,因为第一列没有占据两行,所以如果我们硬是在后面添加一行,就会被挤下来。解决方法,是在第一列的td元素上,绑定一个rowspan属性,设置为2:

1489026700715061544.png

这样就可以了吧,这就是所谓的行合并,那么怎样列合并呢?

如图,我在下面重新写了一个tr,这表示重起一行,然后,挂载一个td元素,并且绑定colspan属性,这个属性的含义就是列合并。

各位,再看一下之前的这个例子,是不是一共有三列啊,那么我就colspan=3,表示合并三列,效果:

还有个问题,这个table没有默认占满父容器,那么我就得手动设置它的width为100%:

1489027220387037348.png

这样是不是就好了呀?

5.画一张请假单?


接下来我们加快一点进度,来做一个请假单吧。我们把颜色调成黑色。

再添几行:

把文字填进去:

最后是班主任审批:

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!

可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值