请老师帮忙检查和优化,谢谢!
来源:2-7 编程练习
慕标4507442
2019-05-02 17:12:50
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
.header{
width: 100%;
height: 100px;
background:black;
position: fixed;
top: 0;
overflow: hidden;
*zoom:1;
}
.logo{
width: 300px;
height: 100px;
background:url(http://climg.mukewang.com/58c0d2d900016ce303000100.png);
float: left;
margin-left: 20px;
}
.nav{
text-align: center;
line-height: 100px;
float: right;
margin-right: 20px;
}
.nav span{
color:#fff;
margin:0 20px;
}
.content{
width: 100%;
height: 500px;
margin: 100px auto;
text-align: center;
}
.footer{
width: 100%;
height: 100px;
background:black;
position: fixed;
bottom: 0;
line-height: 100px;
text-align: center;
}
.footer span{
color: #fff;
margin: 40px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav">
<span>课程</span>
<span>职业路径</span>
<span>实战</span>
<span>猿问</span>
<span>手记</span>
</div>
</div>
<div class="content">
<div><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"></div>
<div><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"></div>
<div><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"></div>
</div>
<div class="footer">
<span>网站首页</span>
<span>企业合作</span>
<span>人才招聘</span>
<span>联系我们</span>
<span>常见问题</span>
<span>友情链接</span>
</div>
</body>
</html>
1回答
同学你好!
代码效果实现是有一些问题的:

图片中间有空隙:这是图片本身的间距,可以给图片设置display: block;去除

如果帮助到了你 欢迎采纳 祝学习愉快~
相似问题