问答详情
源自：4-2 编程练习

为什么我的效果图是这样的，叠到一起去了

http://img1.mukewang.com/5d96f91c000126e108290072.jpg

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>导航菜单</title>

<style type="text/css">

*{margin:0; padding:0; font-size:14px;}

a{color:#333;text-decoration:none}

ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;}

ul li{float:left; margin-top:20px;}

a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}

a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px;  margin:-10px;}

</style>

</head>


<body>


<ul>


    <li><a class="on" href="#">首　　页</a></li>


    <li><a href="#">新闻快讯</a></li>


    <li><a href="#">产品展示</a></li>


    <li><a href="#">售后服务</a></li>


    <li><a href="#">联系我们</a></li>


  </ul>


</body>


</html>


提问者：前端你 2019-10-04 15:48

个回答

  • 慕无忌4172087
    2020-03-12 07:13:27

    margin:-10px 改成margin-top:-10px

    0
  • 鎏暒是瞬間
    2019-10-09 11:47:54

    http://img.mukewang.com/5d9d582d0001381f01060026.jpg这代表的是上下左右都10px             margin-top:10px;

    0