请老师帮我检查下我的代码是否可以优化，还有就是a标签是只能用color而不能用font-color么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
height: 100px;
width: 1100px;
margin: auto;
background-color: black;
position: absolute;
top: 50%;
left:50%;
margin-top:-50px;
margin-left: -550px;
}
.nav .logo{
width: 300px;
height: 100px;
}
.nav ul{
height: 100px;
line-height: 100px;
width: auto;
position: absolute;
top: 0;
right:5%;
overflow: hidden;
zoom:1;
}
.nav ul li{
float:left;
font-family: "黑体";
margin-right: 30px;
font-size: 30px
}
.nav ul li a{
text-decoration: none;
color:white;
}
</style>
</head>
<body>
<div class="nav">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div>
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</body>
</html>
正在回答
同学你好啊，对比你之前的代码，稍微优化了一下：
首先你在 .logo 的div中插入了图片，那么这个div的宽高就会被图片撑起来，所以可以不需要设置宽高的数值了，给图片设置display: block，去掉图片默认状态下的缝隙就可以了。
然后导航条是logo和右边的菜单构成的，这样就可以让logo左浮动，ul右浮动即可。
整个外围宽度是1100px，图片是300px，剩下的800px就可以用来设置为ul的宽度。但为了美观，我给ul的宽度设置为了600px。
剩下的就是设置li了，首先每个li的宽度是相等的，即600/5=120px，然后行高设置为100px，文字就可以在垂直方向居中了，再设置text-align：center;文字就可以在水平方向居中了。
通常情况下浏览器字体默认大小为16px，也有例外的，但无外乎都在14-20px之间，字体我给改成了20px，看上去会舒服点。
另外，如果想给字体设置颜色，请直接用color，没有font-color这个说法哦！
纯手打，欢迎采纳哦，一起学习，一起进步，加油，冲鸭！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星