发表于： 2019-03-15 23:35:07
1 741
今天完成的事情：
1.完成了任务八第二个页面。
明天计划的事情：
1.开始写任务八第一个页面。
2.学习一下媒体查询
遇到的问题：
1.导航栏在页面缩小的时候出现了布局混乱。原因是col-md-6里面放置的四个导航
都是固定宽度。
页面缩小的时候内容放置不下，被挤到下一行了。解决方法是设置min-width和max-width控制宽度在一个范围以内。
2.给左侧导航栏设置hover效果遇到困难。首先list-style是可以画出来一个小圆。但是太小了，而如果设置li的字体大小扩大圆的大小，那么就会出现圆圈和字体垂直居中的问题。最后给li使用伪元素强行画出来了。代码如下。
然后hover效果是给a再使用伪元素：
讲道理不应该使用伪元素表现内容，但是想不出来更好的方法。
并且此方法已经使用了display：inline-block。所以只能用opity来实现出现不出现效果了。
收获：
1.
底部在窗口变窄的时候要分为三栏。源代码分为 col-md-4 col-md-4 col-md-4。在每一列再加入col-sm-12，col-sm-12，col-sm-12，即可在窗口宽度小于768px时变为三栏。如图：
2.调整了网页的布局。
3.ie盒子模型。
W3C模型中：
CSS中的宽（width）=内容（content）的宽
CSS中的高（height）=内容（content）的高
而ie盒子模型中：
IE模型中：
CSS中的宽（width）=内容（content）的宽+（border+padding）*2
CSS中的高（height）=内容（content）的高+（border+padding）*2
解决方法是
在代码顶部加如下的 doctype 声明，
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
使页面以W3C盒子模型渲染。
4.同遇到的问题。
返回列表
评论