请老师帮我看一下代码中可以优化的地方~谢谢啦
来源：2-10 编程练习
叔叔叔叔_
2019-04-18 17:52:37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*去除内外边距，去除链接下划线，去除列表样式*/
*,img{
margin: 0;
padding:0;
text-decoration: none;
list-style-type: none;
}
/*导航、尾部字白色*/
.lead,.foot a{
color: white;
}
/*导航条宽自适应，高100px,内容（logo及导航文字）垂直居中显示，背景色黑色，文字颜色白色，绝对定位*/
.lead{
width: 100%;
height: 100px;
line-height: 100px;
background: #000;
position: fixed;
top:0;
z-index:5;
}
/*logo图片在左，图片有鼠标点击效果*/
.img{
position: absolute;
left: 0;
cursor:pointer
}
/*导航项在右*/
.leadCol{
position: absolute;
right: 0;
}
/*导航文字的间距相同：用右外间距实现，导航各项有鼠标点击效果*/
.leadCol span{
margin: 0 40px 0 0;
cursor: pointer;
}
/*主体内容宽度自适应，顶部外边距100px，底部外边距100px（防止上下条内容遮挡主体）,字体微软雅黑*/
.body{
width: 100%;
margin-top: 100px;
margin-bottom: 100px;
font-family: "微软雅黑";
}
/*主体的左右内容高度800px，行高2.5em（为了有行间距）*/
.left,.right{
height: 800px;
line-height: 2.5em;
}
/*左内容占主体55%宽度，背景浅蓝，左浮动，上内边距30px*/
.left{
width:55%;
background-color: #CFF;
float: left;
padding-top:30px;
}
/*左内容中的"职业路径"背景色粉色*/
.path{
background-color: pink;
}
/*左、右内容中的链接显示为黑色*/
.left a,.right a{
color:black;
}
/*左内容中的整体，设置绝对定位，距父模块左侧150px*/
.moveRight{
position: absolute;
left:150px;
}
/*右内容占主体45%宽度，背景？？？，右浮动，上内边距30px*/
.right{
width:45%;
background-color: #CFF;
float: right;
padding-top: 30px;
}
/*页脚部分：固定定位，背景黑色，宽自适应，高100px，块位于底部，字垂直居中，在上层,字水平居中*/
.foot{
position: fixed;
background: black;
width: 100%;
height: 100px;
bottom:0px;
line-height: 100px;
z-index: 5;
text-align: center;
}
/*链接去掉下划线，链接间距相同*/
.foot a{
text-decoration: none;
margin: 30px;
}
</style>
</head>
<body>
<!-- 页头部分 -->
<div class="lead">
<div class="img">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="leadCol">
<span>课程</span>
<span>职业路径</span>
<span>实战</span>
<span>猿问</span>
<span>手记</span>
</div>
</div>
<!-- 主体部分 -->
<div class="body">
<div class="left">
<div class="moveRight">
<h3>课程推荐</h3>
<ul>
<li>
<span class="path">职业路径</span>
<a href="#">HTML5与CSS3实现动态网页</a>
</li>
<li>
<span class="path">职业路径</span>
<a href="#">零基础入门Android语法与界面</a>
</li>
<li>
<span class="path">职业路径</span>
<a href="#">iOS基础语法与常用控件</a>
</li>
<li>
<span class="path">职业路径</span>
<a href="#">PHP入门开发</a>
</li>
<li>
<span class="path">职业路径</span>
<a href="#">JAVA入门开发</a>
</li>
</ul>
</div>
</div>
<div class="right">
<h3>相关课程</h3>
<ul>
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 移动端APP开发</li>
</ul>
</div>
</div>
<!-- 页尾部分 -->
<div class="foot">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
1回答
-
同学你好，代码实现效果是不错的。
顶部logo图可以优化一下：盒子高度超出了顶部的高度，
这是因为图片是内联元素，有字体的特性，存在间隙，再加上header中设置了行高，所以间隙会变化，可以将图片修改为block元素。
祝学习愉快！
1
相似问题