2-6作业改进
来源：2-7 编程练习
qq_陌_45
2017-11-14 12:28:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.one{background: #000;width: 100%;height: 100px;position:fixed;top:0;}
.b{float: right;}
.logo{float: left;}
.tow{float: right;
font-family:"微软雅黑";
font-size:20px;
margin-right:20px;
line-height: 100px;}
a{text-decoration: none; color:#f0ffff;}
.tu{width: 100%;height: auto;margin:0 auto;text-align:center;margin-bottom: 80px;}
.diyitu{margin-top:100px;}
.yejiao{width:100%;height: 80px;background-color:#000;line-height: 80px;position:fixed;bottom: 0;text-align:center;}
.content{display:inline;font-size: 16px;font-family:"微软雅黑";margin:0 20px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="one">
<div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>
</div>
<div class="b">
<div class="tow"><a href="#">课程</a></div>
<div class="tow"><a href="#">职业路径</a></div>
<div class="tow"><a href="#">实战</a></div>
<div class="tow"><a href="#">猿问</a></div>
<div class="tow"><a href="#">手记</a></div>
</div>
</div>
<div class="tu">
<div class="diyitu"><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"></div>
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg">
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg">
</div>
<div class="yejiao">
<div class="content"><a href="">网站首页</a></div>
<div class="content"><a href="">企业合作</a></div>
<div class="content"><a href="">人才招聘</a></div>
<div class="content"><a href="">联系我们</a></div>
<div class="content"><a href="">常见问题</a></div>
<div class="content"><a href="">友情链接</a></div>
</div>
</body>
</html>写回答
1回答
-
小于飞飞
2017-11-14
根据要求基本完成不错，注意细节处理，1. 简化代码，第一个图片可以不添加div，class="diyitu"添加在img中。2. 图片部分充满整个屏幕，修改其宽度。
0
相似问题