2-4编程练习，麻烦老师看一下是不是有问题，谢谢

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

body{margin:0;padding:0;height:800px;}

.nav{width:1100px;height:100px;background:black;color:white;font-size:20px;position:relative;left:50%;top:50%;margin-left:-550px;margin-top:-50px;}

.title{position:absolute;right:0;top:0;margin-top:35px;margin-right:35px;}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

另外，什么叫导航logo和导航项要有鼠标点击效果？是要用伪类选择器吗？我好像不太会，能不能写个例子，谢谢老师。

源自：CSS网页布局基础 2-4 编程练习

收起

2回答

好帮手慕言回答被采纳获得+3积分 2020-09-14 16:10:06

同学你好，绝对定位参考于两种情况：

（1）元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。

（2）当父元素（祖先）都没有定位的时候，按照浏览器窗口进行定位。

所以.nav设置相对定位还是绝对定位都是可以的，导航都会相对于.nav定位

同学可以再理解下，祝学习愉快~

好帮手慕言 2020-09-14 14:34:46

同学你好，代码中存在以下问题

1、logo的高度溢出父元素，如下：

原因是img标签自带间隙，建议：可以把img设置为块元素，代码参考：

2、导航项垂直方向居中显示，使用行高的方式，会更准确快捷，代码参考：

3、导航条在垂直方向上是没有居中的，上下间距不一样，如下：

相对定位是相对于元素自身位置定位的，建议：调整为绝对定位

4、点击效果使用a标签嵌套导航项即可，例如：

添加a标签后，右侧导航的文字样式会变，如下：

这是因为a标签有默认的下划线等样式，建议设置样式调整一下：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

提问者 milmilbaby #1

我把代码按照老师的建议修改后，效果实现了。但是相对定位和绝对定位还是让我有点混乱。我之前用相对定位是因为我要把导航项目移到导航条的右上角，所以我给.title导航项设置了position:absolute，然后根据课上学到的内容，导航项会定位到最近定位的祖先元素，所以我就把.nav导航条设置成position:relative，成为导航项的最近定位祖先元素。如果把导航条设置成绝对定位，那为什么导航项还在导航条里？不是应该变成针对body进行偏移吗？麻烦老师再解释一下，谢谢。

2020-09-14 15:22:48