老师们帮忙看看怎么优化比较好,谢谢
来源：2-2 编程练习
YoLo_H
2020-07-08 15:24:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
border: none;
font-size: 14px;
font-family: Arial;
}
a
{
text-decoration: none;
}
header{
height: 80px;
background-color: black;
}
header > .container
{
width: 1200px;
height: 80px;
margin: 0 auto;
}
header > .container >.logo
{
float: left;
}
header > .container >nav
{
float: right;
}
header > .container >.logo>a
{
float: left;
display: block;
margin: 20px 0px 20px 50px;
}
header > .container >.logo>p
{
float: left;
color: white;
font-size: 20px;
margin: 40px 0px 20px 10px;
}
header > .container >nav>a
{
color: white;
font-size: 18px;
display: block;
float: left;
width: 70px;
height: 72px;
line-height: 72px;
text-align: center;
}
header > .container >nav>a.Home
{
background-color: #d40112;
}
header > .container >nav>a.Course
{
background-color: #feb800;
}
header > .container >nav>a.Actual
{
background-color: #78b917;
}
header > .container >nav>a.Plan
{
background-color:#433b90;
}
header > .container >nav>a.FAQ
{
background-color: #f27c01;
}
header > .container >nav>a.Notes
{
background-color: #017fcb;
}
header > .container >nav>a:hover,
header > .container >nav>a.active{
padding-bottom: 8px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"></a>
<p>MYMOOC</p>
</div>
<nav>
<a class="Home active" href="#">Home</a>
<a class="Course" href="#">Course</a>
<a class="Actual" href="#">Actual</a>
<a class="Plan" href="#">Plan</a>
<a class="FAQ" href="#">FAQ</a>
<a class="Notes" href="#">Notes</a>
</nav>
</div>
</header>
</body>
</html>
1回答
-
同学你好，代码效果正确，无需优化了。继续加油，祝学习愉快~
0
相似问题
回答 1
回答 1