老师,帮忙看下是否还有需要优化的地方
来源:2-2 编程练习
LongFace
2020-03-27 22:37:49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础的BaseHTML5布局</title>
<!-- <link rel="stylesheet" href="../CSS3/html5-style1.css"> -->
<style>
*{
font-family: "Arial";
font-size: 14px;
margin:0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
header{
height: 80px;
background-color: #080808;
}
header > .container{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
header > .container > a{
display: block;
float: left;
font-size:0px;
padding: 20px 0 0;
}
header > .container > a > span{
font-size:24px;
color: white;
padding-left: 5px;
}
header > .container > nav {
float: right;
}
header > .container > nav > a{
float: left;
font-size: 20px;
color: white;
display: block;
width: 110px;
height: 73px;
line-height: 73px;
text-align: center;
}
header > .container > nav > a:nth-child(1){
background-color: #D30B1B;
}
header > .container > nav > a:nth-child(2){
background-color: #FEB932;
}
header > .container > nav > a:nth-child(3){
background-color: #79B933;
}
header > .container > nav > a:nth-child(4){
background-color: #433B8D;
}
header > .container > nav > a:nth-child(5){
background-color: #F17D24;
}
header > .container > nav > a:nth-child(6){
background-color: #067FC8;
}
header > .container > nav > a:hover,
header > .container > nav > a:active{
padding-bottom: 7px;
}
</style>
</head>
<body>
<header>
<div class="container">
<a href="">
<img src="http://climg.mukewang.com/582e5f160001b17100400040.png" alt="">
<span>MYMOOC</span>
</a>
<nav>
<a href="">Home</a>
<a href="">Course</a>
<a href="">Actual</a>
<a href="">Plan</a>
<a href="">FAQ</a>
<a href="">Notes</a>
</nav>
</div>
</header>
</body>
</html>1回答
好帮手慕粉
2020-03-28
同学你好,第一个可以默认向下延伸8px:

祝学习愉快~
相似问题