[无名弟子]JS-桂梦|2018年12月17日的日报-技能树.IT修真院

发表于： 2018-12-17 21:38:27

2 721

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

开始职业推荐页面的编写：

1、完成header头部的编写。

这里我直接复制前面写好的bootstrap导航栏，但是和UI效果图还是有点差距，header的高度要高一点，

我直接给下图：

这一栏设样式height：100px，发现没有用，

然后就在页面中调试找，最后在无序列表中找到a标签里，有个自带的line-height：20px；如图：

找到了问题所在就好解决了，然后找权重，为了方便快捷我用了！important，这个问题就解决了。再来调试

技能树logo的居中就可以了。

这里用的是position中的绝对定位来写代码：

.logo {

position: absolute;

top: 33%; transform:translate(50%);

}

网页效果：

好了，header部分算是解决了，开始编写主体main部分。

2、开始主体部分的编写。

前面的文字好写，用一个col栅格来写就行了。

然后方向那一栏文字做成hover效果就行了。

重点是用栅格来写三个div的内容，栅格其实还好写，但是运用到媒体查询，让在col-sm-12只显示一个页面的时候，要显示一个div里的内容，我觉得这个是接下来主体部分的难点。

开始第二个页面ps的切图。第二个页面只需要切两张就可以了，主体内容上差不多，只要完成媒体查询的，写下来应该是不难的，边写边发现问题再解决问题。

在写主体的时候，发现还需要做成hover效果，有一个鼠标触发效果会有另一个内容浮现出来，这个还需要好好理理，之前做的hover效果只是写简单的，这次包含了标题和文字段落还有背景的颜色，我在想这个是写在前还是在后，在一列中写两个div然后再给想要hover效果的div设z-index，先这样写吧，写完之后就知道是什么样子了。