发表于: 2017-04-10 20:09:43
1 526
今天完成的事情:
1、调整了task8中绿色导航条的高度使之与PSD图像似。
对战略合作企业也加了个鼠标hover过去有个box-shadow
轮播图我用了模板的HTML代码,加上链接到
<link rel="stylesheet" type="text/css" href="task8-1.css">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
不知道为啥用别人的bootstrap会出现两边的箭头,我自己下的bootstrap链接的时候轮播图没有箭头,不能翻页。
总之就是可以用,不知道为啥。
2、调整了导航栏在缩小的时候会变成按钮,调整了好久,模板上的class都不能换。和轮播图一样的毛病,丑的一比,但可以用啊。
3、调整了小屏幕下导航栏的高度。增加了上下padding用来使技能树图片上下有空隙,使它不丑点。
4、用媒体查询在720px的情况下,设置了小屏幕下导航栏的排列方向,以及高度。这样就不用再整个HTML中改了,只需要在对应多大的屏幕下用多高的宽度就可以。
@media screen and (max-width: 720px)
{
html{
font-size: 60%;
}
}
这是一个媒体查询的标准写法。
明天计划的事情:
1、做一下task9,不过8和9都差不多吧。
2用一下bootstrap的col中的offset,这个有点意思,可以自己调整某一列在总的12列中的位置,这样就不用其他flex,float这种来调整位置了。
遇到的问题:做出来的太丑了,继续改。
收获:用模板用懂道理才行。
评论