igem

IGEM网页小白的wiki之旅(二)

[亡魂溺海] 提交于 2019-12-04 21:37:17
承接上一篇,这篇文章有三部分: 4.细节调试 5.Parts编写 6.其他经验总结 四、细节调试 IGEM网站有一些自带的样式,很可能会和你的代码有冲突,导致上传后的效果和本地运行效果不一样,这一点还是有点麻烦的。为了找到原因,可以按 F12键 查看网页代码,看一看各个部分都有哪些样式,分别是在哪里规定的。将不同网页的代码互相比对,可以有助于发现问题所在。 按F12后会出现类似这个样子的: 可以看到左侧是网页代码,中间是样式,右侧是布局等其他内容。我们经常用的就是左侧和中间的部分。 点击左上角的按钮(如下图),就能选取页面中的元素。 点击想要查看的元素,如下图,标蓝的就是当前元素的标签位置,中间就是该元素的所有样式表。 如果IGEM的某一元素的某个样式和你的冲突了,那么就看谁的优先级更高了,具体请看 CSS样式优先级 。!important应该是最简单粗暴的一种方式了,但是要谨慎使用这种,否则代码会比较混乱。 五、Parts编写 //需要编写Parts之后再来看这一部分就可以,否则接下来的内容没有太大的帮助,可以直接跳到第六部分。 Parts部分分为三类。一类是金奖代表的improvement parts, 一类是银奖代表的validated parts, 一类是铜奖代表的characterization parts。除了铜奖需要加上自己学校的标签以外