发表于： 2019-06-26 21:25:02
1 783
今天完成的任务：
手写了导航栏部分，总的来说媒体查询用到的比较多，开始时使用的弹性布局，用盒中盒进行套选，架构好了，那就进行修饰。同样参考以前的布局，把图层和链接都放在同一个元素下，也就是它们是兄弟元素关系，然后pc端这边就布局好了。那么移动设备那边怎么办，前面也提示了，这个时候媒体查询就有用处了，max-width代表着最大宽度 限制在那个像素，刚开时候特别容易很min搞混，时间久了，练多了就知道了，说一下min把，比如移动端限制为768像素，那么它就在768像素以上的那个意思。
移动端这边图层架构把它设置了原地不动，这个时候把链接全部隐藏掉，我的布局方法把它测底的干掉了，没有任何空间，这个时候就可以把按钮装上了，嗯导航栏高度和pc端一样。个人喜好把的高度搞底点，这样就跟美观了。
遇到的困难：
今天遇到到事情还是较多的，导航栏链接下边框：hover效果，使用了嵌套方法把和父元素像关联，这种方法也更好管理些，在路径对的情况下总是报错，这让我感到惊讶，查看 是被前面所写的代码覆盖了，加了一个权重值立马就见效了，取消了权重值查看了覆盖原因。我尝试把：hover设置在嵌套里面就生效了，起初是把元素设置在外面没有效果。排除问题很重要。。第二个问题见下图吧
当图片到320像素时左侧蹦了，原因是什么呢，尝试排除问题，先把栅格注释了，还是有问题，把img标签注释掉，好了，使用背景图就可以了。
明天计划的事情：
1、布局轮翻图及以下任务
2、提前学习js基础知识
收获：
实践了自己前面没有接触到的知识，测试了一下，媒体查询里面可以放：hover吗，嗯阔以的。关于覆盖这个问题前面也遇到过，只是解决方法不怎么好，今天也算是收获到一个好的解决方法了。多尝试使用
返回列表
评论