检查一下代码，看看是否有能优化的地方。

来源：2-7 编程练习

weixin_慕的地5241954

2019-08-13 23:14:17

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
margin: 0;
padding: 0;
font: 24px "微软雅黑";
color: white;
/*字的设置应该在全局选择器中设置，字体颜色要单独设置，忘记了*/
}

.headernav {
width: 100%;
height: 100px;
background: black;
/*绝对定位和浮动的组合应用还不熟练*/
position: fixed;
top: 0;
}

.logo {
float: left;
}

.nav {
float: right;
}

.nav ul li {
list-style: none;
display: inline-block;
margin: auto 40px;
line-height: 100px;
}

/*.content {
            width: 100%;
            height: 500px;
            position: relative;
            top: 100px;
        }图片区是展示内容区，不用设置定位，或者说它们就是常规流中的元素，说明对定位的概念不熟悉，要多加练习。*/

img{
width: 100%;
display: block;/*图片是行级元素，要把他转换为块级元素才不会有缝隙。*/
}

.footer {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
background: black;
position: fixed;
bottom: 0;
}

.footer ul li {
display: inline-block;
margin: 40px;
}
a{
text-decoration: none;
}
</style>
</head>

<body>
<!-- 此处写代码 -->
<div class="headernav">
<div class="logo"><a href="#1"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"
alt="logo" /></a></div>
<div class="nav">
<ul>
<a href="#2">
<li>课程</li>
</a>
<a href="#3">
<li>职业路径</li>
</a>
<a href="#4">
<li>实战</li>
</a>
<a href="#5">
<li>猿问</li>
</a>
<a href="#6">
<li>手记</li>
</a>
</ul>
</div>
</div>
<div class="content">
<div class="content1"><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt="慕课"></div>
<div class="content2"><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt="实战"></div>
<div class="content3"><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt="大胆说"></div>
</div>
<div class="footer">
<ul>
<a href="#7">
<li>网站首页</li>
</a>
<a href="#8">
<li>企业合作</li>
</a>
<a href="#9">
<li>人才招聘</li>
</a>
<a href="#10">
<li>联系我们</li>
</a>
<a href="#11">
<li>常见问题</li>
</a>
<a href="#12">
<li>友情链接</li>
</a>
</ul>
</div>
</body>

</html>

还有我CSS样式表中几个注释错误的地方，老师能不能讲解一下相关的概念和应用，谢谢，有点不是知道如何运用。

写回答

1回答

好帮手慕慕子

2019-08-14

已采纳

同学你好，

你使用a包裹li标签，虽然也是可以实现效果的，但是不符合代码代码规范， ul的直接子元素是li。建议优化：使用li包括a标签，头部的也是一样，同学自己下去修改一下即可
建议优化：使用行高实现文字的垂直居中显示即可
头部和页脚设置了固定定位，脱离文档流，导致中间的内容被覆盖一部分，建议：可以给content设置上下外边距，给头部和页脚留出空白显示区域
绝对定位和浮动的组合应用还不熟练，初学者都会有这种疑惑，这个是正常现象，同学不用担心，多练习慢慢积累总结，熟练就好了
对于另外两条，同学就总结的很棒，这就是同学自己在练习中慢慢总结出来的经验，可以记录下来，下次布局的时候就知道了哦