老师能帮忙检查一下代码吗？感觉有多余的。。
来源：2-7 编程练习
宝慕林4466778
2020-04-28 21:26:49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
*{margin: 0;padding: 0;
color: #fff;
font-size: 16px;
list-style: none;}
body{
width: 100%;
height: 1500px;
}
.logo{
cursor: pointer;
}
.header{width: 100%;
height: 100px;
background: black;
position: fixed;
}
.header ul {
float: right;
margin-right: 10px;
}
.header ul li{
cursor:pointer;
float: left;
margin-right: 60px;
line-height: 100px;
}
.contpic{
width: 100%;
}
#pic1{
padding-top: 100px;
}
.footer{
width: 100%;
position: fixed;
bottom: 0px;
background: black;
text-align: center;
/* position: fixed;*/
}
.footer ul{
}
.footer ul li{
display: inline;
line-height: 100px;
width: auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="header">
<img class="logo" src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="cont">
<p><img class="contpic" id="pic1" src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt=""></p>
<p><img class="contpic" src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt=""></p>
<p><img class="contpic" src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt=""></p>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
1回答
-
同学你好，代码中存在的问题，解答如下：
如下所示，由于img标签自带间距，导致图片之间存在空白间隙
建议：修改img的display属性为block，消除间隙
不设置样式的代码可以删除了，另，设置为行内元素后，设置width属性无效，它的宽度由内容撑开，所以可以将width:auto;这句代码删除了，简化代码书写。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题