老师在吗请您帮忙看看代码
来源：3-1 相对定位
慕粉1924517932
2021-07-31 22:54:09
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页导航条</title>
<style>
boby,p,ol{
margin:0;
padding:0;
}
nav ul,a,li{
list-style:none;
text-decoration: none;
}
nav{
width:1000px;
height:40px;
margin:40px auto;
}
nav ul li{
float:left;
display: block;
width: 120px;
height:40px;
line-height: 40px;
text-align: center;
color:white;
background-color: orange;
}
nav ul li a:hover{
margin-top:3px solid red;
}
</style>
</head>
<body>
<!-- 导航条 -->
<nav>
<ul>
<a href=""><li>首页</li></a>
</ul>
<ul>
<a href=""><li>医院概况</li></a>
</ul>
<ul>
<a href=""><li>医院动态</li></a>
</ul>
<ul>
<a href=""><li>专家学科</li></a>
</ul>
<ul>
<a href=""><li>服务指南</li></a>
</ul>
<ul>
<a href=""><li>医院文化</li></a>
</ul>
<ul>
<a href=""><li>信息公开</li></a>
</ul>
<ul>
<a href=""><li>互动交流</li></a>
</ul>
</nav>
</body>
</html>
模仿老师写的代码，不知为什么没有红色上边框还有很多问题
写回答
1回答
-
好帮手慕然然
2021-08-01
同学你好，代码中存在以下几点问题，建议优化：
1、css选择器中，body选择器拼写有误，如图
2、根据HTML语法规范，ul标签内应直接嵌套li标签，不建议直接嵌套其他标签，此处可以将a标签放在li标签内，参考如下
3、需要给超链接a标签设置css样式，参考如下
4、当超链接a标签触发:hover伪类时，应设置上边框border-top，而不是margin-top，并设置定位解决高出一块的问题，参考如下
5、建议将一组li标签直接放在一个ul标签内即可，不需要写多个ul、li标签对，参考如下
祝学习愉快！
0
相似问题