老师 您看下我的代码有什么问题吗,logo和文字部分定位的方式有需要改进的吗?

来源:2-2 编程练习

慕粉3924036

2019-12-29 18:07:35

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" type="text/css" href="css/03.css">
</head>
<body>
   <header>
       <div class="content">
           <div class="logo">
               <a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"></a>
               <p>MYMOOC</p>
           </div>
           <nav>
               <a href="#" class="active">Home</a>
               <a href="#">Course</a>
               <a href="#">Acture</a>
               <a href="#">Plan</a>
               <a href="#">FAQ</a>
               <a href="#">Notes</a>
           </nav>
       </div>
   </header>
</body>
</html>


*{
   margin: 0;
   padding: 0;
   font-family: Arial;
   color: aliceblue;
}
a{
   text-decoration: none;
}
header{
   height: 80px;
   background: black;
   opacity: 0.8;
}
header > .content{
   width: 1000px;
   margin: 0 auto;
}

header > .content > .logo{
   /*width: 200px;*/
   /*height: 70px;*/
   /*border: antiquewhite solid 2px;*/
   position: absolute;
}
header > .content > .logo a{
   float: left;
   display: block;
   margin: 20px 10px;
}
header > .content > .logo p{
   float: left;
   /*line-height: 75px;*/
   position: absolute;
   left: 56px;
   top: 40px;
   font-size: 20px;
}

header > .content > nav{
   float: right;
   /*height: 73px;*/
}
header > .content > nav a{
   display: block;
   float: left;
   width: 65px;
   height: 73px;
   line-height: 80px;
   text-align: center;
   /*border: aqua solid 1px;*/
}
header > .content > nav a:nth-child(1){background-color: #032165;}
header > .content > nav a:nth-child(2){background-color: #265999;}
header > .content > nav a:nth-child(3){background-color: #333333;}
header > .content > nav a:nth-child(4){background-color: #502323;}
header > .content > nav a:nth-child(5){background-color: #632572;}
header > .content > nav a:nth-child(6){background-color: #123456;}

header > .content > nav a:hover,
header > .content > nav a.active{
   padding-bottom: 7px;
}

写回答

1回答

好帮手慕粉

2019-12-29

同学你好,logo部分的a标签超出了父容器:

http://img.mukewang.com/climg/5e087d5709d8497e03630160.jpg


这是由于图片是内联元素,底部默认存在间隙,将盒子撑大了,可以将图片设置为block块去除默认间隙:

http://img.mukewang.com/climg/5e087d8709a7ce4705100099.jpg

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

1

0 学习 · 40143 问题

查看课程