请老师帮忙检查和优化,谢谢!

来源: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回答

好帮手慕码

2019-05-04

同学你好!

代码效果实现是有一些问题的:

http://img.mukewang.com/climg/5ccd3efe0001ae2005020148.jpg

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

http://img.mukewang.com/climg/5ccd3f640001317c03120084.jpg

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

0

0 学习 · 40143 问题

查看课程