请老师检查作业
来源：2-7 编程练习
BT103
2019-09-10 23:47:02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;list-style:none;text-decoration: none;}
.top{width: 100%;height:100px;background-color: #000;position: fixed;}
.top img{display:block;margin-left:120px;float:left;width:300px;height:100px;}
.top ul{float:right;margin-right:120px;padding-right:80px;height:100px;}
.top ul li{float:left;display:inline;line-height:100px;margin:0 50px;}
.top ul a{color:white;font-size:28px;}
.top ul a:hover{color:#ff0}
/* top-setting */
.body img{display: block;}
.body{width:1600px;margin:0 auto;padding-top:100px;}
/* body-setting */
.footer{
width:100%;height:100px;
background-color: #000;
position: fixed;bottom:0px;
text-align: center;
}
.footer ul{margin:0 auto;}
.footer ul li{display: inline;height:100px;line-height:100px;margin:0 80px;}
.footer ul li a{color:white;font-size:30px;}
.footer ul li a:hover{color:#ff0;text-shadow:3px 5px 6px rgb(255,255,255);}
/* footer-setting */
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<div><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a></div>
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
</ul>
</div>
<div class="body">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt="1">
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt="2">
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt="3">
</div>
<div class="footer">
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;list-style:none;text-decoration: none;}
.top{width: 100%;height:100px;background-color: #000;position: fixed;}
.top img{display:block;margin-left:120px;float:left;width:300px;height:100px;}
.top ul{float:right;margin-right:120px;padding-right:80px;height:100px;}
.top ul li{float:left;display:inline;line-height:100px;margin:0 50px;}
.top ul a{color:white;font-size:28px;}
.top ul a:hover{color:#ff0}
/* top-setting */
.body img{display: block;}
.body{width:1600px;margin:0 auto;padding-top:100px;}
/* body-setting */
.footer{
width:100%;height:100px;
background-color: #000;
position: fixed;bottom:0px;
text-align: center;
}
.footer ul{margin:0 auto;}
.footer ul li{display: inline;height:100px;line-height:100px;margin:0 80px;}
.footer ul li a{color:white;font-size:30px;}
.footer ul li a:hover{color:#ff0;text-shadow:3px 5px 6px rgb(255,255,255);}
/* footer-setting */
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<div><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a></div>
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
</ul>
</div>
<div class="body">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt="1">
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt="2">
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt="3">
</div>
<div class="footer">
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
</ul>
</div>
</body>
</html>
写回答
1回答
-
同学你好，
整体布局还是可以的，小细节可以注意下：
1、顶部右侧导航项超出父容器高度：
是因为a标签是内联元素，有文字特性，默认存在间隙，可以给li设置高度为100px：
2、中间图片在水平方向上没有全屏显示：
由于每个显示器的分辨率不同，宽度也会不同，所以建议设置图片以及容器宽度为100%，如下：
祝学习愉快！
0
